refactor: 清理代码注释并优化组件结构

- 在 useQrCode.ts 中移除多余的注释,简化代码逻辑。
- 在 DataPreview.tsx 和 FieldEditor.tsx 中删除不必要的注释,提升可读性。
- 在 format.ts 和 jsonToToml.ts 中更新注释内容,确保准确性。
This commit is contained in:
雨霖铃
2026-06-19 01:04:15 +08:00
parent cd21d11fa1
commit c69a26b469
7 changed files with 18 additions and 64 deletions
+1 -30
View File
@@ -6,10 +6,8 @@ import { useContextMenuData } from '@/utils/useContextMenuData';
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;
@@ -99,7 +97,6 @@ export function useQrCode(): QrCodeContextValue {
const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
// 清除防抖定时器
useEffect(() => {
return () => {
if (debounceTimerRef.current) {
@@ -108,7 +105,6 @@ export function useQrCode(): QrCodeContextValue {
};
}, []);
/** 自动检测URL并生成二维码 */
const autoGenerateIfUrl = useCallback((text: string) => {
if (debounceTimerRef.current) {
clearTimeout(debounceTimerRef.current);
@@ -149,7 +145,6 @@ export function useQrCode(): QrCodeContextValue {
[autoGenerateIfUrl],
);
/** 手动触发生成二维码(用于非URL文本) */
const confirmGenerate = useCallback(() => {
const text = generatorState.textToEncode.trim();
@@ -159,10 +154,8 @@ export function useQrCode(): QrCodeContextValue {
return;
}
// 先设置 loading 状态,让 React 渲染加载动画
setGeneratorState((prev) => ({ ...prev, generating: true, inputError: '' }));
// 延迟到下一帧生成,确保 loading 状态先被渲染显示
setTimeout(() => {
const qrCodeDataUrl = generateQrCodeDataUrl(text);
@@ -186,7 +179,6 @@ export function useQrCode(): QrCodeContextValue {
}, 0);
}, [generatorState.textToEncode]);
/** 返回编辑态,保留上次输入内容 */
const backToEdit = useCallback(() => {
if (debounceTimerRef.current) {
clearTimeout(debounceTimerRef.current);
@@ -200,7 +192,6 @@ export function useQrCode(): QrCodeContextValue {
}));
}, []);
/** 从图片URL解析二维码 */
const parseQrCodeFromUrl = useCallback(async (imageUrl: string) => {
try {
setParserState((prev) => ({
@@ -212,7 +203,6 @@ export function useQrCode(): QrCodeContextValue {
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 });
@@ -239,35 +229,19 @@ export function useQrCode(): QrCodeContextValue {
}
}, []);
/** 右键菜单传入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',
textToEncode: payload,
savedText: payload.trim(),
qrCodeDataUrl,
generating: false,
inputError: '',
}));
} else {
// 生成失败,停留在输入态,显示文本供用户编辑
if (!qrCodeDataUrl) {
setGeneratorState((prev) => ({
...prev,
step: 'input',
@@ -284,7 +258,6 @@ export function useQrCode(): QrCodeContextValue {
useContextMenuData({ featureKey: 'qrCode', onData: handleContextMenuData });
// 反向活态解析二维码算法
const parseQrCode = useCallback(async (file: File) => {
try {
setParserState((prev) => ({ ...prev, parsing: true, parseError: '', decodedResult: '' }));
@@ -354,7 +327,6 @@ export function useQrCode(): QrCodeContextValue {
};
});
// 触发解析安全的后台 Promise
parseQrCode(file).catch((err) => {
console.error('Parser standalone task thread exploded:', err);
});
@@ -362,7 +334,6 @@ export function useQrCode(): QrCodeContextValue {
[parseQrCode],
);
// 清除解析受控文件
const handleClearFile = useCallback(() => {
setParserState((prev) => {
if (prev.previewUrl) {