OmniAI/omniai-web
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: 多页面拖拽上传、滚动条精简、UI优化

Browse Source 
- 剧本评测/分辨率提升/数字人/角色迁移/图片工作台/去水印/电商：新增外部拖拽文件上传
- 电商：爆款图复刻上传框支持拖拽+大滚动条，短视频/模特图/详情图滚动条精简回退
- 图片工作台：右侧输出面板移至左侧提示词上方，删除局部重绘遮罩/结果框
- 数字人：生成按钮改为「开始生成」
- 局部重绘：编辑遮罩→编辑页面
- 对话框生成器：新增对话/视频模式、模型/速度/深度选择按钮
- 视频时长默认改为5秒
- 工具箱页面空状态logo统一绿底亮色图标
- 多处CSS滚动条和布局优化
This commit is contained in:
OmniAI Developer
2026-06-05 18:01:55 +08:00
parent 8fbb2ec95e
commit 5b87594e36
22 changed files with 1796 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/agent/AgentPage.tsx
+110 -7
View File
@@ -13,7 +13,7 @@ import {
SendOutlined,
ThunderboltOutlined,
} from "@ant-design/icons";
import { useRef, useState } from "react";
import { useEffect, useRef, useState } from "react";
import WorkspacePageShell from "../../components/WorkspacePageShell";
import type { WebGenerationPreviewTask } from "../../types";
@@ -72,6 +72,24 @@ const agentModes = [
},
];
const agentModelOptions = [
{ id: "gemini-3.1-pro", label: "Gemini 3.1 Pro" },
{ id: "gemini-2.5-pro", label: "Gemini 2.5 Pro" },
{ id: "gpt-4o", label: "GPT-4o" },
];
const thinkingSpeedOptions = [
{ id: "fast", label: "快速" },
{ id: "balanced", label: "均衡" },
{ id: "precise", label: "精细" },
];
const thinkingDepthOptions = [
{ id: "concise", label: "简洁" },
{ id: "standard", label: "标准" },
{ id: "deep", label: "深度" },
];
const quickStarts = ["「新品发布」全链路运营", "「销售日报」自动分析", "「竞品监控」每周报告"];
function getTaskSourceLabel(task: WebGenerationPreviewTask): string | null {
@@ -93,6 +111,21 @@ function AgentPage({
const [prompt, setPrompt] = useState("让 Omni Agent 帮我规划「新品发布会全流程」");
const [isRunning, setIsRunning] = useState(false);
const [notice, setNotice] = useState("选择一个 Agent 模式，输入目标后即可开始。");
const [agentModel, setAgentModel] = useState(agentModelOptions[0].id);
const [thinkingSpeed, setThinkingSpeed] = useState(thinkingSpeedOptions[1].id);
const [thinkingDepth, setThinkingDepth] = useState(thinkingDepthOptions[1].id);
const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
const controlsRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (controlsRef.current && !controlsRef.current.contains(event.target as Node)) {
setActiveDropdown(null);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, []);
const selectedMode = agentModes.find((item) => item.id === activeMode) ?? agentModes[0];
const recentTasks = tasks.slice(0, 3);
@@ -203,15 +236,85 @@ function AgentPage({
/>
<div className="agent-composer__footer">
<div className="agent-composer__controls" aria-label="输入设置">
<div className="agent-composer__controls" aria-label="输入设置" ref={controlsRef}>
<button type="button" className="agent-tool-icon" aria-label="上传附件">
<PaperClipOutlined />
</button>
<button type="button" className="agent-tool-pill">
<ThunderboltOutlined />
自动模式
<DownOutlined />
</button>
<div className="agent-tool-pills">
<button
type="button"
className={`agent-tool-pill${activeDropdown === "model" ? " is-open" : ""}`}
onClick={() => setActiveDropdown(activeDropdown === "model" ? null : "model")}
>
<RobotOutlined />
{agentModelOptions.find((m) => m.id === agentModel)?.label ?? "模型选择"}
<DownOutlined />
</button>
{activeDropdown === "model" && (
<div className="agent-dropdown">
{agentModelOptions.map((m) => (
<button
key={m.id}
type="button"
className={`agent-dropdown__item${agentModel === m.id ? " is-active" : ""}`}
onClick={() => { setAgentModel(m.id); setActiveDropdown(null); }}
>
{m.label}
</button>
))}
</div>
)}
</div>
<div className="agent-tool-pills">
<button
type="button"
className={`agent-tool-pill${activeDropdown === "speed" ? " is-open" : ""}`}
onClick={() => setActiveDropdown(activeDropdown === "speed" ? null : "speed")}
>
<ThunderboltOutlined />
{thinkingSpeedOptions.find((s) => s.id === thinkingSpeed)?.label ?? "思考速度"}
<DownOutlined />
</button>
{activeDropdown === "speed" && (
<div className="agent-dropdown">
{thinkingSpeedOptions.map((s) => (
<button
key={s.id}
type="button"
className={`agent-dropdown__item${thinkingSpeed === s.id ? " is-active" : ""}`}
onClick={() => { setThinkingSpeed(s.id); setActiveDropdown(null); }}
>
{s.label}
</button>
))}
</div>
)}
</div>
<div className="agent-tool-pills">
<button
type="button"
className={`agent-tool-pill${activeDropdown === "depth" ? " is-open" : ""}`}
onClick={() => setActiveDropdown(activeDropdown === "depth" ? null : "depth")}
>
<ApartmentOutlined />
{thinkingDepthOptions.find((d) => d.id === thinkingDepth)?.label ?? "思考深度"}
<DownOutlined />
</button>
{activeDropdown === "depth" && (
<div className="agent-dropdown">
{thinkingDepthOptions.map((d) => (
<button
key={d.id}
type="button"
className={`agent-dropdown__item${thinkingDepth === d.id ? " is-active" : ""}`}
onClick={() => { setThinkingDepth(d.id); setActiveDropdown(null); }}
>
{d.label}
</button>
))}
</div>
)}
</div>
<button type="button" className="agent-tool-icon" aria-label="工具集">
<AppstoreOutlined />
</button>
src/features/canvas/CanvasPage.tsx
+132 -5
View File
@@ -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}
src/features/canvas/canvasConstants.ts
-1
View File
@@ -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" },
src/features/character-mix/CharacterMixPage.tsx
+40 -3
View File
@@ -16,7 +16,7 @@ import {
ThunderboltOutlined,
VideoCameraOutlined,
} from "@ant-design/icons";
import { useCallback, useEffect, useRef, useState } from "react";
import { useCallback, useEffect, useRef, useState, type DragEvent } from "react";
import StudioToolLayout from "../../components/StudioToolLayout";
import type { WebImageWorkbenchTool, WebViewKey } from "../../types";
import { aiGenerationClient } from "../../api/aiGenerationClient";
@@ -58,6 +58,7 @@ function CharacterMixPage({
const [resultUrl, setResultUrl] = useState<string | null>(null);
const abortRef = useRef(false);
const taskIdRef = useRef<string | null>(null);
const [isDragging, setIsDragging] = useState(false);
useEffect(() => {
return () => {
@@ -233,6 +234,32 @@ function CharacterMixPage({
}
};
const handleDragOver = (e: DragEvent) => { e.preventDefault(); if (e.dataTransfer?.types?.includes("Files")) setIsDragging(true); };
const handleDragLeave = (e: DragEvent) => { e.preventDefault(); if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsDragging(false); };
const handleDrop = (e: DragEvent) => {
e.preventDefault();
setIsDragging(false);
const file = e.dataTransfer?.files?.[0];
if (!file) return;
if (file.type.startsWith("image/")) {
if (characterPreview) URL.revokeObjectURL(characterPreview);
setCharacterFile(file.name);
setCharacterPreview(URL.createObjectURL(file));
const reader = new FileReader();
reader.onload = () => { if (typeof reader.result === "string") setCharacterDataUrl(reader.result); };
reader.readAsDataURL(file);
setNotice(`已选择人物图 ${file.name}`);
} else if (file.type.startsWith("video/")) {
if (videoPreview) URL.revokeObjectURL(videoPreview);
setVideoFile(file.name);
setVideoPreview(URL.createObjectURL(file));
const reader2 = new FileReader();
reader2.onload = () => { if (typeof reader2.result === "string") setVideoDataUrl(reader2.result); };
reader2.readAsDataURL(file);
setNotice(`已选择参考视频 ${file.name}`);
}
};
return (
<section className="image-workbench-page character-mix-page" aria-label="角色迁移">
<header className="image-workbench-topbar">
@@ -292,7 +319,17 @@ function CharacterMixPage({
<StudioToolLayout
noTop
leftPanel={
<>
<div
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
style={{ position: "relative" }}
>
{isDragging ? (
<div style={{ position: "absolute", inset: 0, zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(0,0,0,0.55)", border: "2px dashed var(--primary, #4a9eff)", borderRadius: 12, pointerEvents: "none" }}>
<span style={{ fontSize: 18, color: "#fff", fontWeight: 600 }}>释放文件以上传</span>
</div>
) : null}
<div className="studio-panel__section">
<div className="studio-panel__section-head">
<span className="studio-panel__section-title">人物图</span>
@@ -370,7 +407,7 @@ function CharacterMixPage({
</label>
</div>
</div>
</>
</div>
}
canvas={
isCreating ? (
src/features/dialog-generator/DialogGeneratorPage.tsx
+190 -1
View File
@@ -1,6 +1,8 @@
import { useCallback, useRef, useState, type CSSProperties, type MouseEvent as ReactMouseEvent, type TouchEvent as ReactTouchEvent } from "react";
import { useCallback, useEffect, useRef, useState, type CSSProperties, type MouseEvent as ReactMouseEvent, type TouchEvent as ReactTouchEvent } from "react";
import { ApartmentOutlined, DownOutlined, RobotOutlined, ThunderboltOutlined } from "@ant-design/icons";
type DialogStyle = "style1" | "style2" | "style3" | "style4";
type GenerationMode = "dialog" | "video";
interface DialogItem {
id: number;
@@ -39,16 +41,68 @@ const textColorOptions = [
{ value: "#00ff88", label: "绿色" },
];
const dialogModelOptions = [
{ id: "gemini", label: "Gemini" },
{ id: "wanxian", label: "万相" },
{ id: "deepseek", label: "DeepSeek" },
];
const thinkingSpeedOptions = [
{ id: "default", label: "默认" },
{ id: "high", label: "高" },
{ id: "ultra", label: "急速" },
];
const thinkingDepthOptions = [
{ id: "default", label: "默认" },
{ id: "strong", label: "强" },
{ id: "extreme", label: "极限" },
];
const videoDurationOptions = [
{ value: "5", label: "5s" },
{ value: "6", label: "6s" },
{ value: "7", label: "7s" },
{ value: "8", label: "8s" },
{ value: "9", label: "9s" },
{ value: "10", label: "10s" },
{ value: "11", label: "11s" },
{ value: "12", label: "12s" },
{ value: "13", label: "13s" },
{ value: "14", label: "14s" },
{ value: "15", label: "15s" },
];
function DialogGeneratorPage() {
const fileInputRef = useRef<HTMLInputElement | null>(null);
const previewRef = useRef<HTMLDivElement | null>(null);
const dragRef = useRef<DragState | null>(null);
const nextIdRef = useRef(0);
const controlsRef = useRef<HTMLDivElement>(null);
const [backgroundUrl, setBackgroundUrl] = useState("");
const [dialogs, setDialogs] = useState<DialogItem[]>([]);
const [selectedTextColor, setSelectedTextColor] = useState(textColorOptions[0].value);
const [activeDragId, setActiveDragId] = useState<number | null>(null);
// ── Generation state ──
const [generationMode, setGenerationMode] = useState<GenerationMode>("dialog");
const [dialogModel, setDialogModel] = useState(dialogModelOptions[0].id);
const [thinkingSpeed, setThinkingSpeed] = useState(thinkingSpeedOptions[0].id);
const [thinkingDepth, setThinkingDepth] = useState(thinkingDepthOptions[0].id);
const [videoDuration, setVideoDuration] = useState(videoDurationOptions[0].value);
const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
const [isGenerating, setIsGenerating] = useState(false);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (controlsRef.current && !controlsRef.current.contains(event.target as Node)) {
setActiveDropdown(null);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, []);
const handleFile = useCallback((file?: File | null) => {
if (!file || !file.type.startsWith("image/")) return;
const reader = new FileReader();
@@ -194,6 +248,141 @@ function DialogGeneratorPage() {
</div>
</div>
<div className="dialog-generator-section">
<h2>生成设置</h2>
<div className="dialog-generator-mode-switch" role="radiogroup" aria-label="生成模式">
<button
type="button"
className={`dialog-generator-mode${generationMode === "dialog" ? " is-active" : ""}`}
role="radio"
aria-checked={generationMode === "dialog"}
onClick={() => setGenerationMode("dialog")}
>
对话模式
</button>
<button
type="button"
className={`dialog-generator-mode${generationMode === "video" ? " is-active" : ""}`}
role="radio"
aria-checked={generationMode === "video"}
onClick={() => setGenerationMode("video")}
>
视频模式
</button>
</div>
<div className="dialog-generator-controls" ref={controlsRef}>
{generationMode === "dialog" ? (
<>
<div className="dialog-generator-pills">
<button
type="button"
className={`dialog-generator-pill${activeDropdown === "model" ? " is-open" : ""}`}
onClick={() => setActiveDropdown(activeDropdown === "model" ? null : "model")}
>
<RobotOutlined />
{dialogModelOptions.find((m) => m.id === dialogModel)?.label ?? "模型选择"}
<DownOutlined />
</button>
{activeDropdown === "model" && (
<div className="dialog-generator-dropdown">
{dialogModelOptions.map((m) => (
<button
key={m.id}
type="button"
className={`dialog-generator-dropdown__item${dialogModel === m.id ? " is-active" : ""}`}
onClick={() => { setDialogModel(m.id); setActiveDropdown(null); }}
>
{m.label}
</button>
))}
</div>
)}
</div>
<div className="dialog-generator-pills">
<button
type="button"
className={`dialog-generator-pill${activeDropdown === "speed" ? " is-open" : ""}`}
onClick={() => setActiveDropdown(activeDropdown === "speed" ? null : "speed")}
>
<ThunderboltOutlined />
{thinkingSpeedOptions.find((s) => s.id === thinkingSpeed)?.label ?? "思考速度"}
<DownOutlined />
</button>
{activeDropdown === "speed" && (
<div className="dialog-generator-dropdown">
{thinkingSpeedOptions.map((s) => (
<button
key={s.id}
type="button"
className={`dialog-generator-dropdown__item${thinkingSpeed === s.id ? " is-active" : ""}`}
onClick={() => { setThinkingSpeed(s.id); setActiveDropdown(null); }}
>
{s.label}
</button>
))}
</div>
)}
</div>
<div className="dialog-generator-pills">
<button
type="button"
className={`dialog-generator-pill${activeDropdown === "depth" ? " is-open" : ""}`}
onClick={() => setActiveDropdown(activeDropdown === "depth" ? null : "depth")}
>
<ApartmentOutlined />
{thinkingDepthOptions.find((d) => d.id === thinkingDepth)?.label ?? "思考深度"}
<DownOutlined />
</button>
{activeDropdown === "depth" && (
<div className="dialog-generator-dropdown">
{thinkingDepthOptions.map((d) => (
<button
key={d.id}
type="button"
className={`dialog-generator-dropdown__item${thinkingDepth === d.id ? " is-active" : ""}`}
onClick={() => { setThinkingDepth(d.id); setActiveDropdown(null); }}
>
{d.label}
</button>
))}
</div>
)}
</div>
</>
) : (
<div className="dialog-generator-duration">
<span className="dialog-generator-duration__label">视频时长</span>
<div className="dialog-generator-duration__options">
{videoDurationOptions.map((opt) => (
<button
key={opt.value}
type="button"
className={`dialog-generator-duration__btn${videoDuration === opt.value ? " is-active" : ""}`}
onClick={() => setVideoDuration(opt.value)}
>
{opt.label}
</button>
))}
</div>
</div>
)}
</div>
<button
type="button"
className="dialog-generator-run"
disabled={isGenerating}
onClick={() => {
setIsGenerating(true);
// TODO: wire to actual generation API
setTimeout(() => setIsGenerating(false), 2000);
}}
>
{isGenerating ? "生成中..." : "生成"}
</button>
</div>
<button type="button" className="dialog-generator-clear" onClick={() => setDialogs([])}>
清空全部文字
</button>
src/features/digital-human/DigitalHumanPage.tsx
+37 -4
View File
@@ -17,7 +17,7 @@ import {
ThunderboltOutlined,
UserOutlined,
} from "@ant-design/icons";
import { useCallback, useEffect, useRef, useState } from "react";
import { useCallback, useEffect, useRef, useState, type DragEvent } from "react";
import { aiGenerationClient } from "../../api/aiGenerationClient";
import { uploadAssetWithProgress } from "../../api/uploadWithProgress";
import { waitForTask } from "../../api/taskSubscription";
@@ -95,6 +95,7 @@ function DigitalHumanPage({
const activeTaskIdRef = useRef(activeTaskId);
activeTaskIdRef.current = activeTaskId;
const keepaliveRestoredRef = useRef(false);
const [isDragging, setIsDragging] = useState(false);
useEffect(() => {
return () => {
@@ -146,6 +147,28 @@ function DigitalHumanPage({
setNotice("已取消");
}, [activeTaskId]);
const handleDragOver = (e: DragEvent) => { e.preventDefault(); if (e.dataTransfer?.types?.includes("Files")) setIsDragging(true); };
const handleDragLeave = (e: DragEvent) => { e.preventDefault(); if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsDragging(false); };
const handleDrop = (e: DragEvent) => {
e.preventDefault();
setIsDragging(false);
const file = e.dataTransfer?.files?.[0];
if (!file) return;
if (file.type.startsWith("image/")) {
if (imagePreview) URL.revokeObjectURL(imagePreview);
setImageName(file.name);
setImageFile(file);
setImagePreview(URL.createObjectURL(file));
setNotice(`已拖放参考图 ${file.name}`);
} else if (file.type.startsWith("audio/")) {
if (audioPreview) URL.revokeObjectURL(audioPreview);
setAudioName(file.name);
setAudioFile(file);
setAudioPreview(URL.createObjectURL(file));
setNotice(`已拖放音频 ${file.name}`);
}
};
const handleDownloadResult = async () => {
if (!resultVideoUrl || isDownloadingResult) return;
setIsDownloadingResult(true);
@@ -417,7 +440,17 @@ function DigitalHumanPage({
<StudioToolLayout
noTop
leftPanel={
<>
<div
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
style={{ position: "relative" }}
>
{isDragging ? (
<div style={{ position: "absolute", inset: 0, zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(0,0,0,0.55)", border: "2px dashed var(--primary, #4a9eff)", borderRadius: 12, pointerEvents: "none" }}>
<span style={{ fontSize: 18, color: "#fff", fontWeight: 600 }}>释放文件以上传</span>
</div>
) : null}
<div className="studio-panel__section">
<div className="studio-panel__section-head">
<span className="studio-panel__section-title">参考人像</span>
@@ -490,7 +523,7 @@ function DigitalHumanPage({
{audioPreview ? <audio src={audioPreview} controls className="studio-audio-preview" /> : null}
</div>
</div>
</>
</div>
}
canvas={
resultVideoUrl ? (
@@ -558,7 +591,7 @@ function DigitalHumanPage({
</div>
<button type="button" className="studio-generate-btn" onClick={() => void handleCreateTask()} disabled={isCreating || !imageFile || !audioFile}>
<PlayCircleOutlined />
{isCreating ? "生成中..." : "提交 wan2.2-s2v"}
{isCreating ? "生成中..." : "开始生成"}
</button>
{isCreating && (
<button type="button" className="studio-generate-btn digital-human-cancel-btn" onClick={handleCancel} aria-label="取消生成任务">
src/features/ecommerce/EcommercePage.tsx
+30
View File
@@ -991,6 +991,32 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
event.target.value = "";
};
const [isCloneReferenceDragging, setIsCloneReferenceDragging] = useState(false);
const handleCloneReferenceDragOver = (event: DragEvent<HTMLButtonElement>) => {
event.preventDefault();
event.stopPropagation();
if (event.dataTransfer.types.includes("Files")) {
setIsCloneReferenceDragging(true);
}
};
const handleCloneReferenceDragLeave = (event: DragEvent<HTMLButtonElement>) => {
event.preventDefault();
event.stopPropagation();
if (event.currentTarget === event.target || !event.currentTarget.contains(event.relatedTarget as Node)) {
setIsCloneReferenceDragging(false);
}
};
const handleCloneReferenceDrop = (event: DragEvent<HTMLButtonElement>) => {
event.preventDefault();
event.stopPropagation();
setIsCloneReferenceDragging(false);
const files = Array.from(event.dataTransfer.files);
if (files.length) addCloneReferenceImages(files);
};
const updateCloneSetCount = (key: CloneSetCountKey, delta: -1 | 1) => {
setCloneSetCounts((current) => {
const total = Object.values(current).reduce((sum, value) => sum + value, 0);
@@ -1949,6 +1975,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
setOpenCloneBasicSelect={setOpenCloneBasicSelect}
setCloneReferenceMode={setCloneReferenceMode}
handleCloneReferenceUpload={handleCloneReferenceUpload}
isCloneReferenceDragging={isCloneReferenceDragging}
handleCloneReferenceDragOver={handleCloneReferenceDragOver}
handleCloneReferenceDragLeave={handleCloneReferenceDragLeave}
handleCloneReferenceDrop={handleCloneReferenceDrop}
setCloneReplicateLevel={setCloneReplicateLevel}
startCloneSetCountHold={startCloneSetCountHold}
clearCloneSetCountHold={clearCloneSetCountHold}
src/features/ecommerce/panels/EcommerceClonePanel.tsx
+65 -15
View File
@@ -7,6 +7,7 @@ import {
ReloadOutlined,
SettingOutlined,
} from "@ant-design/icons";
import { createPortal } from "react-dom";
import type { CSSProperties, ChangeEvent, DragEvent, MutableRefObject, RefObject } from "react";
import { useRef, useState } from "react";
@@ -118,6 +119,10 @@ interface EcommerceClonePanelProps {
setOpenCloneBasicSelect: (value: CloneBasicSelectKey | null) => void;
setCloneReferenceMode: (value: CloneReferenceMode) => void;
handleCloneReferenceUpload: (event: ChangeEvent<HTMLInputElement>) => void;
isCloneReferenceDragging: boolean;
handleCloneReferenceDragOver: (event: DragEvent<HTMLButtonElement>) => void;
handleCloneReferenceDragLeave: (event: DragEvent<HTMLButtonElement>) => void;
handleCloneReferenceDrop: (event: DragEvent<HTMLButtonElement>) => void;
setCloneReplicateLevel: (value: CloneReplicateLevelKey) => void;
startCloneSetCountHold: (key: CloneSetCountKey, delta: -1 | 1, disabled: boolean) => void;
clearCloneSetCountHold: () => void;
@@ -186,6 +191,10 @@ export default function EcommerceClonePanel({
setOpenCloneBasicSelect,
setCloneReferenceMode,
handleCloneReferenceUpload,
isCloneReferenceDragging,
handleCloneReferenceDragOver,
handleCloneReferenceDragLeave,
handleCloneReferenceDrop,
setCloneReplicateLevel,
startCloneSetCountHold,
clearCloneSetCountHold,
@@ -210,6 +219,14 @@ export default function EcommerceClonePanel({
const videoOutfitRefRef = useRef<HTMLInputElement>(null);
const [videoOutfitVideoUrl, setVideoOutfitVideoUrl] = useState<string | null>(null);
const [videoOutfitRefUrl, setVideoOutfitRefUrl] = useState<string | null>(null);
const [zoomImage, setZoomImage] = useState<{ src: string; x: number; y: number } | null>(null);
const handleFileMouseEnter = (src: string, event: React.MouseEvent<HTMLElement>) => {
const rect = event.currentTarget.getBoundingClientRect();
setZoomImage({ src, x: rect.left + rect.width / 2, y: rect.top });
};
const handleFileMouseLeave = () => setZoomImage(null);
const handleVideoOutfitVideoChange = () => {
const file = videoOutfitVideoRef.current?.files?.[0] || null;
@@ -383,23 +400,44 @@ export default function EcommerceClonePanel({
</button>
</div>
{cloneReferenceMode === "upload" ? (
<button type="button" className="clone-ai-replicate-upload" onClick={() => cloneReferenceInputRef.current?.click()}>
<span>
<CloudUploadOutlined />
<span className="clone-ai-replicate-upload-text">添加图片</span>
</span>
<em>{cloneReferenceImages.length ? `已选 ${cloneReferenceImages.length}/${maxCloneReferenceImages}` : `最多 ${maxCloneReferenceImages} 张`}</em>
<button
type="button"
className={`clone-ai-replicate-upload${isCloneReferenceDragging ? " is-dragging" : ""}${cloneReferenceImages.length ? " has-files" : ""}`}
onClick={() => cloneReferenceInputRef.current?.click()}
onDragOver={handleCloneReferenceDragOver}
onDragLeave={handleCloneReferenceDragLeave}
onDrop={handleCloneReferenceDrop}
>
{cloneReferenceImages.length ? (
<div className="clone-ai-replicate-preview" aria-hidden="true">
{cloneReferenceImages.slice(0, 4).map((item) => (
<figure key={item.id}>
<img src={item.src} alt="" />
<span className="uploaded-image-zoom">
<>
<div className="clone-ai-replicate-files">
{cloneReferenceImages.map((item) => (
<figure
key={item.id}
className="clone-ai-replicate-file"
onMouseEnter={(e) => handleFileMouseEnter(item.src, e)}
onMouseLeave={handleFileMouseLeave}
>
<img src={item.src} alt="" />
</span>
</figure>
))}
{cloneReferenceImages.length > 4 ? <b>+{cloneReferenceImages.length - 4}</b> : null}
</figure>
))}
</div>
<span className="clone-ai-replicate-add-more">
<CloudUploadOutlined />
点击继续上传文件
</span>
</>
) : (
<span>
<CloudUploadOutlined />
<span className="clone-ai-replicate-upload-text">拖拽或点击上传参考图</span>
</span>
)}
<em>{cloneReferenceImages.length ? `已选 ${cloneReferenceImages.length}/${maxCloneReferenceImages}` : `最多 ${maxCloneReferenceImages} 张`}</em>
{isCloneReferenceDragging ? (
<div className="clone-ai-replicate-upload-overlay">
<CloudUploadOutlined />
<span>释放文件以上传</span>
</div>
) : null}
</button>
@@ -754,6 +792,18 @@ export default function EcommerceClonePanel({
</button>
) : null}
</div>
{zoomImage
? createPortal(
<div
className="clone-ai-zoom-portal"
style={{ left: zoomImage.x, top: zoomImage.y } as CSSProperties}
onMouseLeave={handleFileMouseLeave}
>
<img src={zoomImage.src} alt="" />
</div>,
document.body,
)
: null}
</>
);
}
src/features/image-workbench/ImageWorkbenchPage.tsx
+125 -70
View File
@@ -23,7 +23,7 @@ import {
TableOutlined,
ThunderboltOutlined,
} from "@ant-design/icons";
import { useCallback, useEffect, useRef, useState } from "react";
import { useCallback, useEffect, useRef, useState, type DragEvent } from "react";
import type { WebImageWorkbenchTool, WebViewKey } from "../../types";
import { aiGenerationClient } from "../../api/aiGenerationClient";
import { waitForTask } from "../../api/taskSubscription";
@@ -138,6 +138,8 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
const [downloadingResultUrl, setDownloadingResultUrl] = useState<string | null>(null);
const [savingAssetResultUrl, setSavingAssetResultUrl] = useState<string | null>(null);
const [generationError, setGenerationError] = useState<string | null>(null);
const [isDragging, setIsDragging] = useState(false);
const [isCameraDragging, setIsCameraDragging] = useState(false);
const abortRef = useRef(false);
const taskIdRef = useRef<string | null>(null);
const keepaliveRestoredRef = useRef(false);
@@ -229,6 +231,37 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
event.target.value = "";
};
const handleDragOver = (event: DragEvent) => {
event.preventDefault();
event.stopPropagation();
setIsDragging(true);
};
const handleDragLeave = (event: DragEvent) => {
event.preventDefault();
event.stopPropagation();
setIsDragging(false);
};
const handleDrop = (event: DragEvent) => {
event.preventDefault();
event.stopPropagation();
setIsDragging(false);
const files = Array.from(event.dataTransfer.files).filter((f) => f.type.startsWith('image/'));
if (!files.length) return;
const selectedFiles = mode === 'blend' ? files : files.slice(0, 1);
selectedFiles.forEach((file) => {
const reader = new FileReader();
reader.onload = () => {
if (typeof reader.result !== 'string') return;
setReferenceImages((current) => (mode === 'blend' ? [...current, reader.result as string] : [reader.result as string]));
setStatus(mode === 'blend' ? `已追加 ${file.name}` : `已导入 ${file.name}`);
};
reader.readAsDataURL(file);
});
};
const handleAddUrl = () => {
const nextUrl = imageUrlInput.trim();
if (!nextUrl) return;
@@ -261,9 +294,15 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
event.target.value = "";
};
const handleInpaintDrop = (event: React.DragEvent) => {
event.preventDefault();
const file = Array.from(event.dataTransfer.files).find((f) => f.type.startsWith("image/"));
const [isInpaintDragging, setIsInpaintDragging] = useState(false);
const handleInpaintDragOver = (e: DragEvent<HTMLDivElement>) => { e.preventDefault(); e.stopPropagation(); if (e.dataTransfer.types.includes("Files")) setIsInpaintDragging(true); };
const handleInpaintDragLeave = (e: DragEvent<HTMLDivElement>) => { e.preventDefault(); e.stopPropagation(); if (e.currentTarget === e.target || !e.currentTarget.contains(e.relatedTarget as Node)) setIsInpaintDragging(false); };
const handleInpaintDrop = (e: DragEvent<HTMLDivElement>) => {
e.preventDefault();
e.stopPropagation();
setIsInpaintDragging(false);
const file = Array.from(e.dataTransfer.files).find((f) => f.type.startsWith("image/"));
if (!file) return;
const reader = new FileReader();
reader.onload = () => {
@@ -302,7 +341,7 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
return;
}
if (!hasMask) {
setStatus("请先编辑遮罩，涂抹需要重绘的区域");
setStatus("请先编辑页面，涂抹需要重绘的区域");
return;
}
if (generating) return;
@@ -364,6 +403,33 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
event.target.value = "";
};
const handleCameraDragOver = (event: DragEvent) => {
event.preventDefault();
event.stopPropagation();
setIsCameraDragging(true);
};
const handleCameraDragLeave = (event: DragEvent) => {
event.preventDefault();
event.stopPropagation();
setIsCameraDragging(false);
};
const handleCameraDrop = (event: DragEvent) => {
event.preventDefault();
event.stopPropagation();
setIsCameraDragging(false);
const file = Array.from(event.dataTransfer.files).find((f) => f.type.startsWith('image/'));
if (!file) return;
const reader = new FileReader();
reader.onload = () => {
if (typeof reader.result !== 'string') return;
setCameraImage(reader.result);
setStatus(`已导入镜头参考图 ${file.name}`);
};
reader.readAsDataURL(file);
};
const handleAddCameraUrl = () => {
const nextUrl = cameraUrlInput.trim();
if (!nextUrl) return;
@@ -696,7 +762,13 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
accept="image/png,image/jpeg,image/webp"
onChange={handleInpaintFileChange}
/>
<div className="image-workbench-upload-shell">
<div
className={`image-workbench-upload-shell${isInpaintDragging ? " is-dragging" : ""}`}
onDragOver={handleInpaintDragOver}
onDragLeave={handleInpaintDragLeave}
onDrop={handleInpaintDrop}
>
{isInpaintDragging ? <div className="image-workbench-upload-drop-overlay"><span>释放文件以上传</span></div> : null}
<button type="button" className="image-workbench-upload" onClick={() => inpaintFileInputRef.current?.click()}>
{inpaintImage ? <img src={inpaintImage} alt="" /> : <FileImageOutlined />}
<strong>{inpaintImage ? "更换原图" : "选择图片"}</strong>
@@ -789,7 +861,7 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
<img src={inpaintResultImages[0]} alt="重绘结果" style={{ maxWidth: "95%", maxHeight: "95%", borderRadius: 8, objectFit: "contain" }} />
<div className="image-workbench-inpaint-bottom-bar">
<button type="button" className="image-workbench-inpaint-edit-btn" onClick={() => { setInpaintResultImages([]); setIsMaskEditing(true); setInpaintTool("brush"); setCanvasInitCounter((c) => c + 1); }}>
<HighlightOutlined /> 重新编辑遮罩
<HighlightOutlined /> 重新编辑页面
</button>
{renderResultActions(inpaintResultImages[0], 0)}
{inpaintResultImages.length > 1 && (
@@ -845,7 +917,7 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
<div className="image-workbench-inpaint-bottom-bar">
{!isMaskEditing && (
<button type="button" className="image-workbench-inpaint-edit-btn" onClick={() => { setInpaintTool("brush"); setIsMaskEditing(true); }}>
<HighlightOutlined /> {hasMask ? "重新编辑遮罩" : "编辑遮罩"}
<HighlightOutlined /> {hasMask ? "重新编辑页面" : "编辑页面"}
</button>
)}
<span className="image-workbench-inpaint-zoom-controls">
@@ -858,11 +930,13 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
) : (
<button
type="button"
className="image-workbench-empty image-workbench-empty--button"
className={`image-workbench-empty image-workbench-empty--button${isInpaintDragging ? " is-dragging" : ""}`}
onClick={() => inpaintFileInputRef.current?.click()}
onDragOver={(e) => e.preventDefault()}
onDragOver={handleInpaintDragOver}
onDragLeave={handleInpaintDragLeave}
onDrop={handleInpaintDrop}
>
{isInpaintDragging ? <span className="image-workbench-upload-drop-overlay" style={{ borderRadius: "var(--radius-sm)" }}><span>释放文件以上传</span></span> : null}
<FileImageOutlined />
<strong>拖拽或选择图片</strong>
<span>支持 PNG / JPG / WebP</span>
@@ -870,36 +944,6 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
)}
</section>
<aside className="image-workbench-panel image-workbench-panel--right">
<section className="image-workbench-right-note">
<div className="image-workbench-section-title">
<h3>遮罩</h3>
<span>{isMaskEditing ? (inpaintTool === "eraser" ? "橡皮中" : "画笔中") : hasMask ? "已保存" : "待编辑"}</span>
</div>
<span>{inpaintImage ? (hasMask ? "遮罩区域已标记，可开始重绘。" : "点击画布上的「编辑遮罩」开始涂抹。") : "上传原图后可编辑遮罩"}</span>
</section>
<section className="image-workbench-right-note">
<div className="image-workbench-section-title">
<h3>结果</h3>
<span>{inpaintResultImages.length > 0 ? `${inpaintResultImages.length} 张` : "待生成"}</span>
</div>
{inpaintResultImages.length > 0 ? (
<div className="image-workbench-result-grid">
{inpaintResultImages.map((url, i) => (
<div key={url} className="image-workbench-result-card">
<a href={url} target="_blank" rel="noopener noreferrer" className="image-workbench-result-thumb">
<img src={url} alt={`重绘结果 ${i + 1}`} />
</a>
{renderResultActions(url, i)}
</div>
))}
</div>
) : (
<span>重绘结果会显示在这里</span>
)}
</section>
</aside>
</main>
) : activeTool === "camera" ? (
<main className="image-workbench-layout image-workbench-layout--camera">
@@ -915,7 +959,13 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
accept="image/png,image/jpeg,image/webp"
onChange={handleCameraFileChange}
/>
<div className="image-workbench-upload-shell">
<div
className={`image-workbench-upload-shell${isCameraDragging ? " is-dragging" : ""}`}
onDragOver={handleCameraDragOver}
onDragLeave={handleCameraDragLeave}
onDrop={handleCameraDrop}
>
{isCameraDragging && <div className="image-workbench-upload-overlay">释放文件以上传</div>}
<button type="button" className="image-workbench-upload" onClick={() => cameraFileInputRef.current?.click()}>
{cameraImage ? <img src={cameraImage} alt="" /> : <FileImageOutlined />}
<strong>{cameraImage ? "更换参考图" : "导入参考图"}</strong>
@@ -1194,7 +1244,13 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
</button>
</div>
) : (
<div className="image-workbench-upload-shell">
<div
className={`image-workbench-upload-shell${isDragging ? " is-dragging" : ""}`}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
>
{isDragging && <div className="image-workbench-upload-overlay">释放文件以上传</div>}
<button type="button" className="image-workbench-upload" onClick={() => fileInputRef.current?.click()}>
{referenceImage ? <img src={referenceImage} alt="" /> : <FileImageOutlined />}
<strong>{referenceImage ? "更换参考图" : "导入参考图"}</strong>
@@ -1225,6 +1281,33 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
</div>
</section>
<section className="image-workbench-control-card">
<h3>输出</h3>
<span className="image-workbench-field-label">尺寸</span>
<div className="image-workbench-segmented">
{(["9:16", "16:9", "4:3", "3:4", "1:1"] as OutputSize[]).map((s) => (
<button key={s} type="button" className={outputSize === s ? "is-active" : ""} onClick={() => setOutputSize(s)}>
{s}
</button>
))}
</div>
<div className="image-workbench-count">
<span>数量</span>
<div>
{([1, 2, 3, 4] as OutputCount[]).map((count) => (
<button
key={count}
type="button"
className={outputCount === count ? "is-active" : ""}
onClick={() => setOutputCount(count)}
>
{count} 张
</button>
))}
</div>
</div>
</section>
<section className="image-workbench-control-card image-workbench-prompt">
<h3>提示词</h3>
<textarea
@@ -1297,34 +1380,6 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
)}
</section>
<aside className="image-workbench-panel image-workbench-panel--right">
<section className="image-workbench-control-card">
<h3>输出</h3>
<span className="image-workbench-field-label">尺寸</span>
<div className="image-workbench-segmented">
{(["9:16", "16:9", "4:3", "3:4", "1:1"] as OutputSize[]).map((s) => (
<button key={s} type="button" className={outputSize === s ? "is-active" : ""} onClick={() => setOutputSize(s)}>
{s}
</button>
))}
</div>
<div className="image-workbench-count">
<span>数量</span>
<div>
{([1, 2, 3, 4] as OutputCount[]).map((count) => (
<button
key={count}
type="button"
className={outputCount === count ? "is-active" : ""}
onClick={() => setOutputCount(count)}
>
{count} 张
</button>
))}
</div>
</div>
</section>
</aside>
</main>
)}
src/features/resolution-upscale/ResolutionUpscalePage.tsx
+34 -7
View File
@@ -15,7 +15,7 @@ import {
ThunderboltOutlined,
VideoCameraOutlined,
} from "@ant-design/icons";
import { useCallback, useEffect, useRef, useState } from "react";
import { useCallback, useEffect, useRef, useState, type DragEvent } from "react";
import { aiGenerationClient } from "../../api/aiGenerationClient";
import { waitForTask } from "../../api/taskSubscription";
import { saveToolTaskState, loadToolTaskState, clearToolTaskState } from "../workbench/toolKeepalive";
@@ -87,6 +87,7 @@ function ResolutionUpscalePage({
const [isProcessing, setIsProcessing] = useState(false);
const [isDownloading, setIsDownloading] = useState(false);
const [isSavingAsset, setIsSavingAsset] = useState(false);
const [isDragging, setIsDragging] = useState(false);
const activeTaskIdRef = useRef(activeTaskId);
activeTaskIdRef.current = activeTaskId;
const keepaliveRestoredRef = useRef(false);
@@ -164,6 +165,24 @@ function ResolutionUpscalePage({
event.currentTarget.value = "";
};
const processDroppedFile = (file: File) => {
if (sourcePreview.startsWith("blob:")) URL.revokeObjectURL(sourcePreview);
setSourceName(file.name);
setSourceFile(file);
setSourceUrl("");
setSourcePreview(URL.createObjectURL(file));
setResultPreview("");
setSourceDimensions(null);
setVideoViewMode("source");
setActiveTaskId("");
setTaskProgress(0);
setStatus(`已导入 ${file.name}`);
};
const handleDragOver = (e: DragEvent<HTMLDivElement>) => { e.preventDefault(); e.stopPropagation(); if (e.dataTransfer.types.includes("Files")) setIsDragging(true); };
const handleDragLeave = (e: DragEvent<HTMLDivElement>) => { e.preventDefault(); e.stopPropagation(); if (e.currentTarget === e.target || !e.currentTarget.contains(e.relatedTarget as Node)) setIsDragging(false); };
const handleDrop = (e: DragEvent<HTMLDivElement>) => { e.preventDefault(); e.stopPropagation(); setIsDragging(false); const file = e.dataTransfer.files[0]; if (file) processDroppedFile(file); };
const handleImportUrl = () => {
const normalizedUrl = sourceUrl.trim();
if (!/^https?:\/\//i.test(normalizedUrl)) {
@@ -405,7 +424,13 @@ function ResolutionUpscalePage({
accept={mode === "image" ? "image/png,image/jpeg,image/webp" : "video/mp4,video/quicktime,video/webm,video/*"}
onChange={handleFileChange}
/>
<div className="image-workbench-upload-shell">
<div
className={`image-workbench-upload-shell${isDragging ? " is-dragging" : ""}`}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
>
{isDragging ? <div className="image-workbench-upload-drop-overlay"><span>释放文件以上传</span></div> : null}
<button type="button" className="image-workbench-upload" onClick={() => fileInputRef.current?.click()}>
{sourcePreview && mode === "image" ? <img src={sourcePreview} alt="" /> : <FileImageOutlined />}
<strong>{sourceName || (mode === "image" ? "选择图片" : "选择视频")}</strong>
@@ -574,11 +599,13 @@ function ResolutionUpscalePage({
</div>
)
) : (
<button type="button" className="image-workbench-empty image-workbench-empty--button" onClick={() => fileInputRef.current?.click()}>
<ColumnWidthOutlined />
<strong>{mode === "image" ? "拖拽或选择图片" : "拖拽或选择视频"}</strong>
<span>{mode === "image" ? "支持 PNG / JPG / WebP" : "支持 MP4 / MOV / WebM"}</span>
</button>
<div className="studio-canvas-ghost">
<div className="studio-canvas-ghost__icon">
<ThunderboltOutlined />
</div>
<div className="studio-canvas-ghost__title">{mode === "image" ? "拖拽或选择图片" : "拖拽或选择视频"}</div>
<div className="studio-canvas-ghost__hint">{mode === "image" ? "支持 PNG / JPG / WebP" : "支持 MP4 / MOV / WebM"}</div>
</div>
)}
</section>
</main>
src/features/script-tokens/ScriptTokensPage.tsx
+52 -5
View File
@@ -1,6 +1,7 @@
import {
BarChartOutlined,
CheckCircleFilled,
CloseOutlined,
CopyOutlined,
DownloadOutlined,
FileTextOutlined,
@@ -8,7 +9,7 @@ import {
ThunderboltOutlined,
UploadOutlined,
} from "@ant-design/icons";
import { useEffect, useRef, useState, type ChangeEvent, type KeyboardEvent } from "react";
import { useEffect, useRef, useState, type ChangeEvent, type DragEvent, type KeyboardEvent } from "react";
import { evaluateScript } from "../../api/scriptEvalClient";
import { buildApiUrl, getStoredToken } from "../../api/serverConnection";
import { useSessionStore } from "../../stores";
@@ -239,6 +240,7 @@ function ScriptTokensPage() {
const [animatedScore, setAnimatedScore] = useState(0);
const [activeHistoryIndex, setActiveHistoryIndex] = useState<number>(0);
const [history, setHistory] = useState<HistoryEntry[]>(loadHistory);
const [isDragging, setIsDragging] = useState(false);
const fileInputRef = useRef<HTMLInputElement>(null);
const scoreFrameRef = useRef<number | null>(null);
@@ -261,9 +263,7 @@ function ScriptTokensPage() {
return () => { if (scoreFrameRef.current) cancelAnimationFrame(scoreFrameRef.current); };
}, [result]);
const handleFileUpload = async (event: ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
if (!file) return;
const processUploadedFile = async (file: File) => {
const ext = getFileExtension(file.name);
const readable = isReadableTextFile(file, ext);
setUploadedFile({ name: file.name, size: file.size });
@@ -293,6 +293,12 @@ function ScriptTokensPage() {
} else {
setScript(`[已上传文件：${file.name}]\n\n暂不支持解析 ${ext ? ext.toUpperCase() : "未知"} 格式，请上传常见文本类文件。`);
}
};
const handleFileUpload = async (event: ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
if (!file) return;
await processUploadedFile(file);
event.target.value = "";
};
@@ -393,6 +399,30 @@ function ScriptTokensPage() {
fileInputRef.current?.click();
};
const handleDragOver = (event: DragEvent<HTMLDivElement>) => {
event.preventDefault();
event.stopPropagation();
if (event.dataTransfer.types.includes("Files")) {
setIsDragging(true);
}
};
const handleDragLeave = (event: DragEvent<HTMLDivElement>) => {
event.preventDefault();
event.stopPropagation();
if (event.currentTarget === event.target || !event.currentTarget.contains(event.relatedTarget as Node)) {
setIsDragging(false);
}
};
const handleDrop = (event: DragEvent<HTMLDivElement>) => {
event.preventDefault();
event.stopPropagation();
setIsDragging(false);
const file = event.dataTransfer.files[0];
if (file) processUploadedFile(file);
};
const grade = result ? getGrade(result.totalScore) : null;
const beatPct = result ? (result.totalScore >= 95 ? 97 : result.totalScore >= 88 ? 92 : result.totalScore >= 80 ? 85 : 72) : 0;
const compactTitle = uploadedFile?.name?.replace(/\.[^.]+$/, "") ?? "剧本评测";
@@ -409,14 +439,31 @@ function ScriptTokensPage() {
<div className="script-eval-v5-lp-section">
<div className="script-eval-v5-lp-label">上传剧本</div>
<div
className="script-eval-v5-upload-zone"
className={`script-eval-v5-upload-zone${isDragging ? " is-dragging" : ""}`}
role="button"
tabIndex={0}
onClick={() => fileInputRef.current?.click()}
onKeyDown={uploadKeyDown}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
>
{isDragging ? (
<div className="script-eval-v5-upload-drop-overlay">
<UploadOutlined />
<span>释放文件以上传</span>
</div>
) : null}
{uploadedFile ? (
<div className="script-eval-v5-upload-done is-show">
<button
type="button"
className="script-eval-v5-upload-delete"
onClick={(e) => { e.stopPropagation(); handleReset(); }}
aria-label="删除文件"
>
<CloseOutlined />
</button>
<CheckCircleFilled />
<span className="script-eval-v5-uf-meta">
<span className="script-eval-v5-uf-name">{uploadedFile.name}</span>
src/features/subtitle-removal/SubtitleRemovalPage.tsx
+25 -9
View File
@@ -12,7 +12,7 @@ import {
SwapOutlined,
VideoCameraOutlined,
} from "@ant-design/icons";
import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
import { useCallback, useEffect, useRef, useState, type CSSProperties, type DragEvent } from "react";
import { aiGenerationClient } from "../../api/aiGenerationClient";
import { waitForTask } from "../../api/taskSubscription";
import { saveToolTaskState, loadToolTaskState, clearToolTaskState } from "../workbench/toolKeepalive";
@@ -73,6 +73,7 @@ function SubtitleRemovalPage({
const [isProcessing, setIsProcessing] = useState(false);
const [isDownloading, setIsDownloading] = useState(false);
const [isSavingAsset, setIsSavingAsset] = useState(false);
const [isDragging, setIsDragging] = useState(false);
const activeTaskIdRef = useRef(activeTaskId);
activeTaskIdRef.current = activeTaskId;
const keepaliveRestoredRef = useRef(false);
@@ -125,10 +126,7 @@ function SubtitleRemovalPage({
event.currentTarget.value = "";
};
const handleFileDrop = (event: React.DragEvent) => {
event.preventDefault();
const file = Array.from(event.dataTransfer.files).find((f) => f.type.startsWith("video/"));
if (!file) return;
const processDroppedFile = (file: File) => {
if (sourcePreview.startsWith("blob:")) URL.revokeObjectURL(sourcePreview);
setSourceName(file.name);
setSourceFile(file);
@@ -140,6 +138,10 @@ function SubtitleRemovalPage({
setStatus(`已导入 ${file.name}`);
};
const handleDragOver = (e: DragEvent<HTMLDivElement>) => { e.preventDefault(); e.stopPropagation(); if (e.dataTransfer.types.includes("Files")) setIsDragging(true); };
const handleDragLeave = (e: DragEvent<HTMLDivElement>) => { e.preventDefault(); e.stopPropagation(); if (e.currentTarget === e.target || !e.currentTarget.contains(e.relatedTarget as Node)) setIsDragging(false); };
const handleFileDrop = (e: DragEvent<HTMLDivElement>) => { e.preventDefault(); e.stopPropagation(); setIsDragging(false); const file = Array.from(e.dataTransfer.files).find((f) => f.type.startsWith("video/")); if (file) processDroppedFile(file); };
const handleImportUrl = () => {
const normalized = sourceUrl.trim();
if (!/^https?:\/\//i.test(normalized)) {
@@ -341,7 +343,13 @@ function SubtitleRemovalPage({
accept="video/mp4"
onChange={handleFileChange}
/>
<div className="image-workbench-upload-shell" onDragOver={(e) => e.preventDefault()} onDrop={handleFileDrop}>
<div
className={`image-workbench-upload-shell${isDragging ? " is-dragging" : ""}`}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleFileDrop}
>
{isDragging ? <div className="image-workbench-upload-drop-overlay"><span>释放文件以上传</span></div> : null}
<button type="button" className="image-workbench-upload" onClick={() => fileInputRef.current?.click()}>
<FileImageOutlined />
<strong>{sourceName || "拖拽或选择视频"}</strong>
@@ -435,9 +443,17 @@ function SubtitleRemovalPage({
)}
</div>
) : (
<div className="image-workbench-empty-canvas">
<DeleteOutlined style={{ fontSize: 48, opacity: 0.2 }} />
<p>上传视频后在此预览</p>
<div
className="studio-canvas-ghost"
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleFileDrop}
>
<div className="studio-canvas-ghost__icon">
<VideoCameraOutlined />
</div>
<div className="studio-canvas-ghost__title">拖拽或选择视频</div>
<div className="studio-canvas-ghost__hint">仅支持 MP4，最大 1GB，最高 1080P</div>
</div>
)}
</section>
src/features/workbench/WorkbenchPage.tsx
+50 -3
View File
@@ -99,6 +99,9 @@ import {
type WorkbenchKeepaliveTask,
MODE_META,
MODE_OPTIONS,
CHAT_MODEL_OPTIONS,
THINKING_SPEED_OPTIONS,
THINKING_DEPTH_OPTIONS,
IMAGE_MODEL_OPTIONS,
VIDEO_MODEL_OPTIONS,
RATIO_OPTIONS,
@@ -330,9 +333,13 @@ function WorkbenchPage({
const [videoModel, setVideoModel] = useState(VIDEO_MODEL_OPTIONS[0].value);
const [videoFrameMode, setVideoFrameMode] = useState("omni");
const [videoRatio, setVideoRatio] = useState("16:9");
const [videoDuration, setVideoDuration] = useState("4");
const [videoDuration, setVideoDuration] = useState("5");
const [videoQuality, setVideoQuality] = useState(() => getDefaultVideoQuality(VIDEO_MODEL_OPTIONS[0].value));
const [chatModel, setChatModel] = useState(CHAT_MODEL_OPTIONS[0].value);
const [thinkingSpeed, setThinkingSpeed] = useState(THINKING_SPEED_OPTIONS[0].value);
const [thinkingDepth, setThinkingDepth] = useState(THINKING_DEPTH_OPTIONS[0].value);
useEffect(() => {
let cancelled = false;
@@ -388,13 +395,13 @@ function WorkbenchPage({
const referenceCount = referenceItems.length;
const activeVideoModelValue = toHappyHorseDisplayModel(videoModel);
const activeModelValue =
activeMode === "image" ? imageModel : activeMode === "video" ? activeVideoModelValue : CHAT_MODEL;
activeMode === "image" ? imageModel : activeMode === "video" ? activeVideoModelValue : chatModel;
const activeModel =
activeMode === "image"
? imageModelOptions.find((item) => item.value === imageModel)?.label || imageModel
: activeMode === "video"
? videoModelOptions.find((item) => item.value === activeVideoModelValue)?.label || activeVideoModelValue
: "OmniChat";
: CHAT_MODEL_OPTIONS.find((item) => item.value === chatModel)?.label || chatModel;
const conversationRecords = useMemo<WebProjectSummary[]>(
() =>
conversations.map((conversation) => ({
@@ -2648,6 +2655,46 @@ function WorkbenchPage({
ariaLabel="工作台模式"
direction={dropdownDirection}
/>
{activeMode === "chat" && (
<>
<SelectChip
chipId="chat-model"
value={chatModel}
options={CHAT_MODEL_OPTIONS}
disabled={disabled}
isOpen={toolbarMenuId === "chat-model"}
onToggle={() => toggleToolbarMenu("chat-model")}
onClose={closeToolbarMenus}
onChange={setChatModel}
ariaLabel="对话模型"
direction={dropdownDirection}
/>
<SelectChip
chipId="chat-speed"
value={thinkingSpeed}
options={THINKING_SPEED_OPTIONS}
disabled={disabled}
isOpen={toolbarMenuId === "chat-speed"}
onToggle={() => toggleToolbarMenu("chat-speed")}
onClose={closeToolbarMenus}
onChange={setThinkingSpeed}
ariaLabel="思考速度"
direction={dropdownDirection}
/>
<SelectChip
chipId="chat-depth"
value={thinkingDepth}
options={THINKING_DEPTH_OPTIONS}
disabled={disabled}
isOpen={toolbarMenuId === "chat-depth"}
onToggle={() => toggleToolbarMenu("chat-depth")}
onClose={closeToolbarMenus}
onChange={setThinkingDepth}
ariaLabel="思考深度"
direction={dropdownDirection}
/>
</>
)}
{activeMode === "image" && (
<>
<SelectChip
src/features/workbench/workbenchConstants.ts
+21 -1
View File
@@ -6,6 +6,9 @@ import type { ReactNode } from "react";
export type WorkbenchMode = "chat" | "image" | "video";
export type ToolbarMenuId =
| "studio-mode"
| "chat-model"
| "chat-speed"
| "chat-depth"
| "image-model"
| "image-settings"
| "image-grid-mode"
@@ -134,6 +137,24 @@ export const REFERENCE_IMAGE_INITIAL_QUALITY = 0.84;
export const REFERENCE_IMAGE_MIN_QUALITY = 0.62;
export const CHAT_MODEL = "gemini-3.1-pro";
export const CHAT_MODEL_OPTIONS: WorkbenchOption[] = [
{ value: "gemini", label: "Gemini" },
{ value: "wanxian", label: "万相" },
{ value: "deepseek", label: "DeepSeek" },
];
export const THINKING_SPEED_OPTIONS: WorkbenchOption[] = [
{ value: "default", label: "默认" },
{ value: "high", label: "高" },
{ value: "ultra", label: "急速" },
];
export const THINKING_DEPTH_OPTIONS: WorkbenchOption[] = [
{ value: "default", label: "默认" },
{ value: "strong", label: "强" },
{ value: "extreme", label: "极限" },
];
export const CHAT_NATURAL_SYSTEM_PROMPT = [
"你是 OmniAI 的创作协作助手，像一个正在一起工作的同伴一样说话。",
`默认使用自然、简洁的中文，不要官腔，不要机械套话，不要频繁使用“首先、其次、最后”这种模板。`,
@@ -238,7 +259,6 @@ export const VIDEO_FRAME_OPTIONS: WorkbenchOption[] = [
];
export const VIDEO_DURATION_OPTIONS: WorkbenchOption[] = [
{ value: "4", label: "4s" },
{ value: "5", label: "5s" },
{ value: "6", label: "6s" },
{ value: "7", label: "7s" },