lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

close upload progress before image sizing

Browse Source
This commit is contained in:
134 2026-07-08 20:54:00 +08:00
parent d00eb6d0e4
commit 2b875847dd
1 changed files with 36 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
components/canvas/CanvasChatPanel.tsx
View File

@ -720,6 +720,14 @@ const CANVAS_COMPOSER_PREVIEW_TEXTS_DEFAULT = [
"帮我把这张产品图做成高级电商海报",
"基于参考图延展 3 套同风格方案",
];
const CANVAS_IMAGE_DIMENSION_TIMEOUT_MS = 3500;
const DEFAULT_CANVAS_IMAGE_DIMENSIONS = {
width: 300,
height: 300,
originalWidth: 0,
originalHeight: 0,
};
function normalizeComposerPreviewTail(text: string, fixedPrefix: string) {
const trimmed = text.trim();
@ -750,6 +758,24 @@ function getImageDimensions(url: string): Promise<{
}> {
return new Promise((resolve) => {
const img = new Image();
let settled = false;
const resolveOnce = (dimensions: {
width: number;
height: number;
originalWidth: number;
originalHeight: number;
}) => {
if (settled) return;
settled = true;
window.clearTimeout(timeout);
img.onload = null;
img.onerror = null;
resolve(dimensions);
};
const timeout = window.setTimeout(() => {
resolveOnce(DEFAULT_CANVAS_IMAGE_DIMENSIONS);
}, CANVAS_IMAGE_DIMENSION_TIMEOUT_MS);
img.onload = () => {
// 限制最大尺寸，避免节点过大
const maxSize = 500;
@ -773,11 +799,11 @@ function getImageDimensions(url: string): Promise<{
height = Math.round(height * scale);
}
resolve({ width, height, originalWidth, originalHeight });
resolveOnce({ width, height, originalWidth, originalHeight });
};
img.onerror = () => {
// 加载失败时使用默认尺寸
resolve({ width: 300, height: 300, originalWidth: 0, originalHeight: 0 });
resolveOnce(DEFAULT_CANVAS_IMAGE_DIMENSIONS);
};
img.src = url;
});
@ -8488,6 +8514,7 @@ export function CanvasChatPanel({
const data = await response.json();
const imageUrl = data.url as string;
const assetId = normalizeUploadedAssetId(data.assetId);
clearComposerUploadProgress(250);
updateAttachmentAtVideoSlot(
slotIndex,
@ -8565,6 +8592,7 @@ export function CanvasChatPanel({
const data = await response.json();
const imageUrl = data.url as string;
const assetId = normalizeUploadedAssetId(data.assetId);
clearComposerUploadProgress(250);
updateAttachmentAtAgentSlot(
slotIndex,
@ -8729,6 +8757,7 @@ export function CanvasChatPanel({
if (!imageUrl) {
throw new Error("未获取到图片地址");
}
clearComposerUploadProgress(250);
updateDetailSlotAttachment(
slotIndex,
@ -11514,6 +11543,7 @@ export function CanvasChatPanel({
const imageUrl = data.url as string;
const assetId =
typeof data.assetId === "string" && data.assetId.trim() ? data.assetId.trim() : undefined;
clearComposerUploadProgress(250);
const dimensions = await getImageDimensions(imageUrl);
const spacing = 20;
const x = 100 + (nodeIndex % 3) * (dimensions.width + spacing);
@ -11549,7 +11579,7 @@ export function CanvasChatPanel({
toast.error('图片上传失败');
return null;
}
}, [addNode, updateComposerUploadProgress]);
}, [addNode, clearComposerUploadProgress, updateComposerUploadProgress]);
const uploadImageFileForComposerAttachment = useCallback(async (
file: File,
@ -11601,6 +11631,7 @@ export function CanvasChatPanel({
typeof data.assetId === "string" && data.assetId.trim()
? data.assetId.trim()
: undefined;
clearComposerUploadProgress(250);
const dimensions = await getImageDimensions(imageUrl);
return {
@ -11615,7 +11646,7 @@ export function CanvasChatPanel({
toast.error("图片上传失败");
return null;
}
}, [updateComposerUploadProgress]);
}, [clearComposerUploadProgress, updateComposerUploadProgress]);
const handlePastedImages = useCallback(async (files: File[]) => {
if (files.length === 0) return;
@ -12111,6 +12142,7 @@ export function CanvasChatPanel({
const imageUrl = data.url;
const assetId =
typeof data.assetId === "string" && data.assetId.trim() ? data.assetId.trim() : undefined;
clearComposerUploadProgress(250);
const dimensions = await getImageDimensions(imageUrl);
// 记录第一张图片的 URL（用于自动命名和缩略图）