Merge branch 'main' of github.com:hainatravel/GHHub

src/components/ImageUploader.jsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
-import { Upload, List, Modal } from "antd";
+import { Upload, List, Popconfirm } from "antd";
+
 import { UploadOutlined } from "@ant-design/icons";
 import { Image } from "antd";
 import { fetchJSON } from "@/utils/request";
@@ -108,30 +109,19 @@ export const ImageUploader = props => {
 	}, [key]);
 
 	// 处理删除操作
-	const handleDelete = file => {
-		Modal.confirm({
-			title: "确认删除",
-			content: "确定要删除这张图片吗？",
-			okText: "确认",
-			cancelText: "取消",
-			onOk: async () => {
-				const success = await deleteImage(file.encrypt_key);
-				if (success) {
-					const newImages = fileList.filter(item => item.encrypt_key !== file.encrypt_key);
-					if (props.onChange) {
-						props.onChange(newImages);
-					}
-					setFileList(newImages);
-					console.log("删除成功");
-				} else {
-					console.error("删除失败");
-				}
-			},
-			onCancel: () => {
-				// 用户点击取消，重新设置fileList以刷新Upload组件
-				setFileList([...fileList]);
-			},
-		});
+
+	const handleDelete = async file => {
+		const success = await deleteImage(file.encrypt_key);
+		if (success) {
+			const newImages = fileList.filter(item => item.encrypt_key !== file.encrypt_key);
+			if (props.onChange) {
+				props.onChange(newImages);
+			}
+			setFileList(newImages);
+			//console.log("删除成功");
+		} else {
+			//console.error("删除失败");
+		}
 	};
 
 	// 处理上传操作
@@ -176,9 +166,31 @@ export const ImageUploader = props => {
 		setPreviewOpen(true);
 	};
 
+	const handleRemove = file => {	
+		
+		return (
+			<Popconfirm
+				title="Confirm deletion"
+				description="Confirm deletion of this file?"
+				onConfirm={() => handleDelete(file)}
+				onCancel={() => setFileList([...fileList])}
+				okText="Yes"
+				cancelText="No"
+			>
+			
+			</Popconfirm>
+		);
+		// 返回 false 阻止默认的删除行为，让 Popconfirm 来处理
+		return false;
+	};
+
+	const itemRender = (originNode, file, fileList, actions) => {
+
+	};
+
 	return (
 		<>
-			<Upload customRequest={handleUploadFile} multiple={true} onRemove={handleDelete} listType="picture-card" fileList={fileList} onPreview={handlePreview} onChange={handleChange}>
+			<Upload customRequest={handleUploadFile} multiple={true} onRemove={handleRemove} listType="picture-card" fileList={fileList} onPreview={handlePreview} onChange={handleChange} >
 				<div>
 					<UploadOutlined />
 					<div style={{ marginTop: 8 }}>上传图片</div>
@@ -240,4 +252,4 @@ export const ImageViewer = props => {
 	);
 };
 
-export default ImageUploader;
+export default ImageUploader;