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/pages/QrCode/hooks/useQrCode.ts
+88 -126
View File
@@ -3,44 +3,35 @@ import QRious from 'qrious';
import { toast } from 'sonner';
import { parseQrCodeFromFile } from '@/utils/qrCodeParser';
import { useContextMenuData } from '@/utils/useContextMenuData';
import { useI18n } from '@/utils/chromeI18n';
import type { QrCodeContextValue } from '../contexts/QrCodeContext';
import type { QrCodeGeneratorState, QrCodeMode, QrCodeParserState } from '../types';
/** 防抖延迟时间（毫秒） */
const DEBOUNCE_DELAY = 500;
/** 检测文本是否为URL格式 */
function isUrl(text: string): boolean {
const trimmed = text.trim();
if (!trimmed) return false;
// 检查是否以 http:// 或 https:// 开头
if (trimmed.startsWith('http://') || trimmed.startsWith('https://')) {
return true;
}
// 检查是否为域名格式（包含.且不以特殊字符开头）
const domainPattern = /^[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?(\.[a-zA-Z]{2,})+([/:].*)?$/;
return domainPattern.test(trimmed);
}
/** 检测URL是否为图片格式 */
function isImageUrl(url: string): boolean {
const trimmedUrl = url.trim().toLowerCase();
// 检查是否为 data:image 格式
if (trimmedUrl.startsWith('data:image/')) {
return true;
}
// 检查是否包含图片扩展名
const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg', '.ico'];
if (imageExtensions.some((ext) => trimmedUrl.includes(ext))) {
return true;
}
// 检查URL路径中是否包含图片相关关键词
const imageKeywords = ['/image/', '/img/', '/photo/', '/pic/', '/upload/'];
if (imageKeywords.some((keyword) => trimmedUrl.includes(keyword))) {
return true;
@@ -49,7 +40,6 @@ function isImageUrl(url: string): boolean {
return false;
}
/** 生成二维码的核心逻辑 */
function generateQrCodeDataUrl(text: string): string {
const trimmedText = text.trim();
if (!trimmedText) return '';
@@ -78,8 +68,6 @@ function generateQrCodeDataUrl(text: string): string {
}
export function useQrCode(): QrCodeContextValue {
const { t } = useI18n('qrCode');
const [mode, setMode] = useState<QrCodeMode>('generate');
const [generatorState, setGeneratorState] = useState<QrCodeGeneratorState>({
@@ -102,7 +90,6 @@ export function useQrCode(): QrCodeContextValue {
const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
// 清除防抖定时器
useEffect(() => {
return () => {
if (debounceTimerRef.current) {
@@ -111,41 +98,37 @@ export function useQrCode(): QrCodeContextValue {
};
}, []);
/** 自动检测URL并生成二维码 */
const autoGenerateIfUrl = useCallback(
(text: string) => {
if (debounceTimerRef.current) {
clearTimeout(debounceTimerRef.current);
const autoGenerateIfUrl = useCallback((text: string) => {
if (debounceTimerRef.current) {
clearTimeout(debounceTimerRef.current);
}
if (!isUrl(text)) {
return;
}
debounceTimerRef.current = setTimeout(() => {
setGeneratorState((prev) => ({ ...prev, generating: true, inputError: '' }));
const qrCodeDataUrl = generateQrCodeDataUrl(text);
if (qrCodeDataUrl) {
setGeneratorState((prev) => ({
...prev,
step: 'preview',
savedText: text.trim(),
qrCodeDataUrl,
generating: false,
}));
} else {
setGeneratorState((prev) => ({
...prev,
generating: false,
inputError: '生成二维码失败，请重试',
}));
}
if (!isUrl(text)) {
return;
}
debounceTimerRef.current = setTimeout(() => {
setGeneratorState((prev) => ({ ...prev, generating: true, inputError: '' }));
const qrCodeDataUrl = generateQrCodeDataUrl(text);
if (qrCodeDataUrl) {
setGeneratorState((prev) => ({
...prev,
step: 'preview',
savedText: text.trim(),
qrCodeDataUrl,
generating: false,
}));
} else {
setGeneratorState((prev) => ({
...prev,
generating: false,
inputError: t('qrCode:generateError'),
}));
}
}, DEBOUNCE_DELAY);
},
[t],
);
}, DEBOUNCE_DELAY);
}, []);
const setTextToEncode = useCallback(
(text: string) => {
@@ -155,20 +138,17 @@ export function useQrCode(): QrCodeContextValue {
[autoGenerateIfUrl],
);
/** 手动触发生成二维码（用于非URL文本） */
const confirmGenerate = useCallback(() => {
const text = generatorState.textToEncode.trim();
if (!text) {
setGeneratorState((prev) => ({ ...prev, inputError: t('qrCode:inputRequired') }));
toast.error(t('qrCode:inputRequired'));
setGeneratorState((prev) => ({ ...prev, inputError: '请输入内容' }));
toast.error('请输入内容');
return;
}
// 先设置 loading 状态，让 React 渲染加载动画
setGeneratorState((prev) => ({ ...prev, generating: true, inputError: '' }));
// 延迟到下一帧生成，确保 loading 状态先被渲染显示
setTimeout(() => {
const qrCodeDataUrl = generateQrCodeDataUrl(text);
@@ -176,9 +156,9 @@ export function useQrCode(): QrCodeContextValue {
setGeneratorState((prev) => ({
...prev,
generating: false,
inputError: t('qrCode:generateError'),
inputError: '生成二维码失败，请重试',
}));
toast.error(t('qrCode:generateError'));
toast.error('生成二维码失败，请重试');
return;
}
@@ -190,9 +170,8 @@ export function useQrCode(): QrCodeContextValue {
generating: false,
}));
}, 0);
}, [generatorState.textToEncode, t]);
}, [generatorState.textToEncode]);
/** 返回编辑态，保留上次输入内容 */
const backToEdit = useCallback(() => {
if (debounceTimerRef.current) {
clearTimeout(debounceTimerRef.current);
@@ -206,66 +185,56 @@ export function useQrCode(): QrCodeContextValue {
}));
}, []);
/** 从图片URL解析二维码 */
const parseQrCodeFromUrl = useCallback(
async (imageUrl: string) => {
try {
setParserState((prev) => ({
...prev,
parsing: true,
parseError: '',
decodedResult: '',
previewUrl: imageUrl,
selectedFile: null,
}));
const parseQrCodeFromUrl = useCallback(async (imageUrl: string) => {
try {
setParserState((prev) => ({
...prev,
parsing: true,
parseError: '',
decodedResult: '',
previewUrl: imageUrl,
selectedFile: null,
}));
// 从URL获取图片并转换为File对象
const response = await fetch(imageUrl);
const blob = await response.blob();
const file = new File([blob], 'qrcode-image.png', { type: blob.type });
const response = await fetch(imageUrl);
const blob = await response.blob();
const file = new File([blob], 'qrcode-image.png', { type: blob.type });
setParserState((prev) => ({ ...prev, selectedFile: file }));
setParserState((prev) => ({ ...prev, selectedFile: file }));
const result = await parseQrCodeFromFile(file);
const result = await parseQrCodeFromFile(file);
if (result.success && result.data) {
setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
toast.success(t('qrCode:parseSuccess'));
} else {
const errorMsg = result.error || t('qrCode:noQrDetected');
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
toast.error(errorMsg);
}
} catch (error) {
console.error('解析图片二维码失败:', error);
const errorMsg = error instanceof Error ? error.message : t('qrCode:parseError');
if (result.success && result.data) {
setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
toast.success('二维码解析成功');
} else {
const errorMsg = result.error || '未检测到二维码，请确保图片清晰且包含二维码';
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
toast.error(errorMsg);
} finally {
setParserState((prev) => ({ ...prev, parsing: false }));
}
},
[t],
);
} catch (error) {
console.error('解析图片二维码失败:', error);
const errorMsg = error instanceof Error ? error.message : '解析二维码失败，请重试';
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
toast.error(errorMsg);
} finally {
setParserState((prev) => ({ ...prev, parsing: false }));
}
}, []);
/** 右键菜单传入URL时，自动生成二维码或解析图片 */
const handleContextMenuData = useCallback(
(payload: string) => {
// 检测是否为图片URL，如果是则切换到解析模式
if (isImageUrl(payload)) {
setMode('parse');
void parseQrCodeFromUrl(payload);
return;
}
// 非图片URL，生成二维码
setMode('generate');
// 直接生成二维码，无需等待
const qrCodeDataUrl = generateQrCodeDataUrl(payload);
if (qrCodeDataUrl) {
// 生成成功，直接跳转到预览态
setGeneratorState((prev) => ({
...prev,
step: 'preview',
@@ -276,7 +245,6 @@ export function useQrCode(): QrCodeContextValue {
inputError: '',
}));
} else {
// 生成失败，停留在输入态，显示文本供用户编辑
setGeneratorState((prev) => ({
...prev,
step: 'input',
@@ -293,33 +261,29 @@ export function useQrCode(): QrCodeContextValue {
useContextMenuData({ featureKey: 'qrCode', onData: handleContextMenuData });
// 反向活态解析二维码算法
const parseQrCode = useCallback(
async (file: File) => {
try {
setParserState((prev) => ({ ...prev, parsing: true, parseError: '', decodedResult: '' }));
const parseQrCode = useCallback(async (file: File) => {
try {
setParserState((prev) => ({ ...prev, parsing: true, parseError: '', decodedResult: '' }));
const result = await parseQrCodeFromFile(file);
const result = await parseQrCodeFromFile(file);
if (result.success && result.data) {
setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
toast.success(t('qrCode:parseSuccess'));
} else {
const errorMsg = result.error || t('qrCode:noQrDetected');
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
toast.error(errorMsg);
}
} catch (error) {
console.error('解析二维码失败:', error);
const errorMsg = error instanceof Error ? error.message : t('qrCode:parseError');
if (result.success && result.data) {
setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
toast.success('二维码解析成功');
} else {
const errorMsg = result.error || '未检测到二维码，请确保图片清晰且包含二维码';
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
toast.error(errorMsg);
} finally {
setParserState((prev) => ({ ...prev, parsing: false }));
}
},
[t],
);
} catch (error) {
console.error('解析二维码失败:', error);
const errorMsg = error instanceof Error ? error.message : '解析二维码失败，请重试';
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
toast.error(errorMsg);
} finally {
setParserState((prev) => ({ ...prev, parsing: false }));
}
}, []);
const downloadQrCode = useCallback(() => {
if (!generatorState.qrCodeDataUrl) return;
@@ -328,8 +292,8 @@ export function useQrCode(): QrCodeContextValue {
link.href = generatorState.qrCodeDataUrl;
link.download = 'qrcode.png';
link.click();
toast.success(t('qrCode:qrCodeDownloadSuccess'));
}, [generatorState.qrCodeDataUrl, t]);
toast.success('二维码下载成功');
}, [generatorState.qrCodeDataUrl]);
const copyQrCode = useCallback(async () => {
if (!generatorState.qrCodeDataUrl) return;
@@ -344,12 +308,12 @@ export function useQrCode(): QrCodeContextValue {
}),
]);
toast.success(t('qrCode:qrCodeCopySuccess'));
toast.success('二维码已复制到剪贴板');
} catch (error) {
console.error('复制二维码失败:', error);
toast.error(t('qrCode:copyError'));
toast.error('复制失败，请重试');
}
}, [generatorState.qrCodeDataUrl, t]);
}, [generatorState.qrCodeDataUrl]);
const handleFileChange = useCallback(
(file: File) => {
@@ -366,15 +330,13 @@ export function useQrCode(): QrCodeContextValue {
};
});
// 触发解析安全的后台 Promise
parseQrCode(file).catch((err) => {
console.error('Parser standalone task thread exploded:', err);
console.error('解析二维码失败:', err);
});
},
[parseQrCode],
);
// 清除解析受控文件
const handleClearFile = useCallback(() => {
setParserState((prev) => {
if (prev.previewUrl) {