refactor(ImageUploader): 移除预览 URL 相关逻辑并简化粘贴事件处理

- 删除 ImageUploader 组件中的 onPreviewUrlChange 属性及相关逻辑,简化文件处理流程。
- 更新测试用例,确保只调用 onFileChange 方法,移除对预览 URL 的依赖。
- 新增 ParsePanel 组件的测试,确保粘贴功能的正确性和唯一性。
This commit is contained in:
雨霖铃
2026-06-19 20:29:19 +08:00
parent 9d6213e75e
commit e372fc6855
4 changed files with 160 additions and 56 deletions
+2 -38
View File
@@ -1,4 +1,4 @@
import { useCallback, useEffect, useRef } from 'react';
import { useCallback, useRef } from 'react';
import { Image, X } from 'lucide-react';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
@@ -13,8 +13,6 @@ interface ImageUploaderProps {
onClearFile: () => void;
/** 文件预览 URL */
previewUrl: string;
/** 预览 URL 变更回调 */
onPreviewUrlChange: (url: string) => void;
/** 是否正在拖拽 */
dragging: boolean;
/** 拖拽状态变更回调 */
@@ -26,7 +24,6 @@ const ImageUploader = ({
onFileChange,
onClearFile,
previewUrl,
onPreviewUrlChange,
dragging,
onDraggingChange,
}: ImageUploaderProps) => {
@@ -35,9 +32,8 @@ const ImageUploader = ({
const handleFileChange = useCallback(
(file: File) => {
onFileChange(file);
onPreviewUrlChange(URL.createObjectURL(file));
},
[onFileChange, onPreviewUrlChange],
[onFileChange],
);
const handleClearFile = useCallback(() => {
@@ -72,38 +68,6 @@ const ImageUploader = ({
}
};
// 监听粘贴事件
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('图片粘贴成功,正在解析...');
} catch (error) {
console.error('处理粘贴图片失败:', error);
toast.error('粘贴图片失败,请重试');
}
}
break;
}
}
};
document.addEventListener('paste', handlePaste);
return () => {
document.removeEventListener('paste', handlePaste);
};
}, [handleFileChange]);
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 ${