feat: 多页面拖拽上传、滚动条精简、UI优化
- 剧本评测/分辨率提升/数字人/角色迁移/图片工作台/去水印/电商：新增外部拖拽文件上传 - 电商：爆款图复刻上传框支持拖拽+大滚动条，短视频/模特图/详情图滚动条精简回退 - 图片工作台：右侧输出面板移至左侧提示词上方，删除局部重绘遮罩/结果框 - 数字人：生成按钮改为「开始生成」 - 局部重绘：编辑遮罩→编辑页面 - 对话框生成器：新增对话/视频模式、模型/速度/深度选择按钮 - 视频时长默认改为5秒 - 工具箱页面空状态logo统一绿底亮色图标 - 多处CSS滚动条和布局优化
This commit is contained in:
OmniAI Developer
@@ -389,6 +389,8 @@ function CanvasPage({
|
||||
const canvasRef = useRef<HTMLElement>(null);
|
||||
const videoGenerationInFlightRef = useRef(new Set<string>());
|
||||
const canvasReferenceUploadPromisesRef = useRef(new Map<string, Promise<string | null>>());
|
||||
const canvasDragCounterRef = useRef(0);
|
||||
const [isCanvasDragging, setIsCanvasDragging] = useState(false);
|
||||
const suppressNextPaneClickRef = useRef(false);
|
||||
const canvasAutoSaveTimerRef = useRef<number | null>(null);
|
||||
const canvasAutoSaveIdleHandleRef = useRef<number | null>(null);
|
||||
@@ -1278,7 +1280,7 @@ function CanvasPage({
|
||||
model: defaultVideoModel,
|
||||
aspectRatio: "16:9",
|
||||
resolution: getDefaultVideoQuality(defaultVideoModel),
|
||||
duration: "4",
|
||||
duration: "5",
|
||||
videoMode: "text2video",
|
||||
sourceTextNodeId: source.id,
|
||||
position: {
|
||||
@@ -1302,7 +1304,7 @@ function CanvasPage({
|
||||
model: defaultVideoModel,
|
||||
aspectRatio: "16:9",
|
||||
resolution: getDefaultVideoQuality(defaultVideoModel),
|
||||
duration: "4",
|
||||
duration: "5",
|
||||
videoMode: "text2video",
|
||||
sourceTextNodeId: "",
|
||||
position,
|
||||
@@ -1358,7 +1360,7 @@ function CanvasPage({
|
||||
imageUrl = "",
|
||||
fileName = "本地图片",
|
||||
position = { x: 0, y: 0 },
|
||||
options?: { title?: string; sourceImageNodeId?: string }
|
||||
options?: { title?: string; sourceImageNodeId?: string; sourceTextNodeId?: string }
|
||||
) => {
|
||||
const nodeNumber = imageNodeIdRef.current;
|
||||
imageNodeIdRef.current += 1;
|
||||
@@ -1372,6 +1374,7 @@ function CanvasPage({
|
||||
imageSize: getDefaultImageQuality(fallbackVisibleImageModel),
|
||||
fileName,
|
||||
sourceImageNodeId: options?.sourceImageNodeId,
|
||||
sourceTextNodeId: options?.sourceTextNodeId,
|
||||
position,
|
||||
size: createCanvasNodeSize("image"),
|
||||
};
|
||||
@@ -1977,6 +1980,120 @@ function CanvasPage({
|
||||
setNodeMenu(null);
|
||||
};
|
||||
|
||||
// ── Canvas drag-and-drop file upload ──────────────────────────────
|
||||
const handleCanvasDragEnter = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
canvasDragCounterRef.current += 1;
|
||||
if (canvasDragCounterRef.current === 1) {
|
||||
setIsCanvasDragging(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleCanvasDragLeave = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
canvasDragCounterRef.current -= 1;
|
||||
if (canvasDragCounterRef.current <= 0) {
|
||||
canvasDragCounterRef.current = 0;
|
||||
setIsCanvasDragging(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleCanvasDragOver = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}, []);
|
||||
|
||||
const handleCanvasDrop = useCallback(
|
||||
(e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
canvasDragCounterRef.current = 0;
|
||||
setIsCanvasDragging(false);
|
||||
const files = Array.from(e.dataTransfer.files).filter(
|
||||
(f) => f.type.startsWith("image/")
|
||||
);
|
||||
if (files.length === 0) return;
|
||||
|
||||
const rect = canvasRef.current?.getBoundingClientRect();
|
||||
if (!rect) return;
|
||||
const dropPosition = {
|
||||
x: (e.clientX - rect.left - canvasViewport.x) / canvasViewport.zoom,
|
||||
y: (e.clientY - rect.top - canvasViewport.y) / canvasViewport.zoom,
|
||||
};
|
||||
|
||||
let offsetX = 0;
|
||||
let offsetY = 0;
|
||||
for (const file of files) {
|
||||
const imageUrl = URL.createObjectURL(file);
|
||||
addImageNode(imageUrl, file.name, {
|
||||
x: dropPosition.x + offsetX,
|
||||
y: dropPosition.y + offsetY,
|
||||
});
|
||||
offsetX += 60;
|
||||
offsetY += 60;
|
||||
}
|
||||
setContextMenu(null);
|
||||
setNodeMenu(null);
|
||||
},
|
||||
[canvasViewport.x, canvasViewport.y, canvasViewport.zoom, addImageNode],
|
||||
);
|
||||
|
||||
// ── Text composer drag-and-drop ──────────────────────────────────
|
||||
const [textComposerDragNodeId, setTextComposerDragNodeId] = useState<string | null>(null);
|
||||
const textComposerDragCounterRef = useRef(0);
|
||||
|
||||
const handleTextComposerDragEnter = useCallback((_e: React.DragEvent, nodeId: string) => {
|
||||
_e.preventDefault();
|
||||
_e.stopPropagation();
|
||||
textComposerDragCounterRef.current += 1;
|
||||
if (textComposerDragCounterRef.current === 1) {
|
||||
setTextComposerDragNodeId(nodeId);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleTextComposerDragLeave = useCallback((_e: React.DragEvent) => {
|
||||
_e.preventDefault();
|
||||
_e.stopPropagation();
|
||||
textComposerDragCounterRef.current -= 1;
|
||||
if (textComposerDragCounterRef.current <= 0) {
|
||||
textComposerDragCounterRef.current = 0;
|
||||
setTextComposerDragNodeId(null);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleTextComposerDragOver = useCallback((_e: React.DragEvent) => {
|
||||
_e.preventDefault();
|
||||
_e.stopPropagation();
|
||||
}, []);
|
||||
|
||||
const handleTextComposerDrop = useCallback(
|
||||
(e: React.DragEvent, sourceNode: CanvasTextNode) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
textComposerDragCounterRef.current = 0;
|
||||
setTextComposerDragNodeId(null);
|
||||
const files = Array.from(e.dataTransfer.files).filter(
|
||||
(f) => f.type.startsWith("image/")
|
||||
);
|
||||
if (files.length === 0) return;
|
||||
|
||||
let offsetX = 0;
|
||||
let offsetY = 0;
|
||||
for (const file of files) {
|
||||
const imageUrl = URL.createObjectURL(file);
|
||||
addImageNode(imageUrl, file.name, {
|
||||
x: sourceNode.position.x + sourceNode.size.width + 40 + offsetX,
|
||||
y: sourceNode.position.y + offsetY,
|
||||
}, { sourceTextNodeId: sourceNode.id });
|
||||
offsetX += 60;
|
||||
offsetY += 60;
|
||||
}
|
||||
},
|
||||
[addImageNode],
|
||||
);
|
||||
|
||||
const activeTextNode = textNodeMenu
|
||||
? textNodes.find((node) => node.id === textNodeMenu.nodeId) ?? null
|
||||
: null;
|
||||
@@ -3550,7 +3667,7 @@ function CanvasPage({
|
||||
<WorkspacePageShell title="画布" fullWidth className="canvas-page page-motion">
|
||||
<div className={`studio-tool-layout studio-tool-layout--no-top studio-tool-layout--no-left studio-tool-layout--no-right studio-tool-layout--canvas${(shouldShowEmptyProjectState || isWaitingForProjects) ? " studio-tool-layout--canvas-empty" : ""}`}>
|
||||
<section
|
||||
className={`studio-canvas${pendingLinkPort ? " is-linking" : ""}${(shouldShowEmptyProjectState || isWaitingForProjects) ? " is-empty-projects" : ""}`}
|
||||
className={`studio-canvas${pendingLinkPort ? " is-linking" : ""}${isCanvasDragging ? " is-canvas-dragging" : ""}${(shouldShowEmptyProjectState || isWaitingForProjects) ? " is-empty-projects" : ""}`}
|
||||
ref={canvasRef}
|
||||
onAuxClick={(shouldShowEmptyProjectState || isWaitingForProjects) ? undefined : handleCanvasAuxClick}
|
||||
onContextMenu={(shouldShowEmptyProjectState || isWaitingForProjects) ? (event) => event.preventDefault() : handleCanvasContextMenu}
|
||||
@@ -3558,6 +3675,10 @@ function CanvasPage({
|
||||
onDoubleClick={(shouldShowEmptyProjectState || isWaitingForProjects) ? undefined : handleCanvasDoubleClick}
|
||||
onMouseMove={(shouldShowEmptyProjectState || isWaitingForProjects) ? undefined : handleCanvasMouseMove}
|
||||
onWheel={(shouldShowEmptyProjectState || isWaitingForProjects) ? undefined : handleCanvasWheel}
|
||||
onDragEnter={(shouldShowEmptyProjectState || isWaitingForProjects) ? undefined : handleCanvasDragEnter}
|
||||
onDragOver={(shouldShowEmptyProjectState || isWaitingForProjects) ? undefined : handleCanvasDragOver}
|
||||
onDragLeave={(shouldShowEmptyProjectState || isWaitingForProjects) ? undefined : handleCanvasDragLeave}
|
||||
onDrop={(shouldShowEmptyProjectState || isWaitingForProjects) ? undefined : handleCanvasDrop}
|
||||
style={{
|
||||
"--canvas-bg-size": `${34 * canvasViewport.zoom}px`,
|
||||
"--canvas-bg-dot": `${1.35 * canvasViewport.zoom}px`,
|
||||
@@ -4137,7 +4258,13 @@ function CanvasPage({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="studio-canvas-text-composer">
|
||||
<div
|
||||
className={`studio-canvas-text-composer${textComposerDragNodeId === textNode.id ? " is-drag-over" : ""}`}
|
||||
onDragEnter={(e) => handleTextComposerDragEnter(e, textNode.id)}
|
||||
onDragOver={handleTextComposerDragOver}
|
||||
onDragLeave={handleTextComposerDragLeave}
|
||||
onDrop={(e) => handleTextComposerDrop(e, textNode)}
|
||||
>
|
||||
<div className="studio-canvas-text-composer__input-wrap">
|
||||
<textarea
|
||||
value={textNode.prompt}
|
||||
|
||||
@@ -140,7 +140,6 @@ export const videoRatioOptions: CanvasOption[] = [
|
||||
];
|
||||
|
||||
export const videoDurationOptions: CanvasOption[] = [
|
||||
{ value: "4", label: "4s" },
|
||||
{ value: "5", label: "5s" },
|
||||
{ value: "6", label: "6s" },
|
||||
{ value: "7", label: "7s" },
|
||||
|
||||
Reference in New Issue
Block a user