Feat/dialog generator cancel generation #23
@@ -0,0 +1,408 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>交互式对话框生成器</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#165DFF',
|
||||
secondary: '#6B7280',
|
||||
accent: '#F59E0B'
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', 'sans-serif']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style type="text/tailwindcss">
|
||||
@layer utilities {
|
||||
.dialog-item {
|
||||
@apply p-3 border rounded-lg cursor-pointer transition-all hover:bg-primary/5 hover:border-primary;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.gen-dialog {
|
||||
position: absolute;
|
||||
min-width: 140px;
|
||||
max-width: 280px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.12);
|
||||
z-index: 10;
|
||||
user-select: none;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
.gen-dialog:hover { box-shadow: 0 6px 32px rgba(0,0,0,0.18); }
|
||||
.gen-dialog.active-drag { z-index: 20; box-shadow: 0 8px 40px rgba(0,0,0,0.22); }
|
||||
|
||||
/* 样式1：白色圆角 */
|
||||
.gen-dialog.style1 { background: rgba(255,255,255,0.97); border: 2px solid #CBD5E1; }
|
||||
.gen-dialog.style1 .gen-confirm { background: #165DFF; }
|
||||
.gen-dialog.style1 .gen-text { color: #1e293b; }
|
||||
|
||||
/* 样式2：蓝色气泡 */
|
||||
.gen-dialog.style2 { background: rgba(22,93,255,0.95); border: 2px solid #4F8AFF; border-radius: 16px 16px 4px 16px; }
|
||||
.gen-dialog.style2 .gen-confirm { background: #fff; color: #165DFF; }
|
||||
.gen-dialog.style2 .gen-text { color: #fff; }
|
||||
.gen-dialog.style2 .gen-text::placeholder { color: rgba(255,255,255,0.6); }
|
||||
|
||||
/* 样式3：黄色提示 */
|
||||
.gen-dialog.style3 { background: rgba(255,247,237,0.97); border: 2px solid #F59E0B; }
|
||||
.gen-dialog.style3 .gen-confirm { background: #F59E0B; }
|
||||
.gen-dialog.style3 .gen-text { color: #92400e; }
|
||||
.gen-dialog.style3 .gen-text::placeholder { color: rgba(146,64,14,0.4); }
|
||||
|
||||
/* 样式4：灰色简约 */
|
||||
.gen-dialog.style4 { background: rgba(248,250,252,0.97); border: 2px solid #6B7280; border-radius: 4px; }
|
||||
.gen-dialog.style4 .gen-confirm { background: #6B7280; }
|
||||
.gen-dialog.style4 .gen-text { color: #1f2937; }
|
||||
|
||||
.gen-text {
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
resize: none;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
padding: 0;
|
||||
font-family: inherit;
|
||||
}
|
||||
.gen-text::placeholder { color: rgba(0,0,0,0.3); }
|
||||
|
||||
.gen-confirm {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.gen-confirm:hover { filter: brightness(1.1); transform: translateY(-1px); }
|
||||
.gen-confirm:active { transform: translateY(0); }
|
||||
|
||||
/* 已确认状态 */
|
||||
.gen-dialog.confirmed .gen-text { cursor: default; }
|
||||
.gen-dialog.confirmed .gen-confirm { display: none; }
|
||||
.gen-dialog.confirmed .gen-edit-hint { display: inline-block; }
|
||||
.gen-dialog:not(.confirmed) .gen-edit-hint { display: none; }
|
||||
|
||||
.gen-edit-hint {
|
||||
font-size: 10px;
|
||||
color: rgba(0,0,0,0.3);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* 删除按钮 */
|
||||
.gen-delete {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #EF4444;
|
||||
color: #fff;
|
||||
border: 2px solid #fff;
|
||||
font-size: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s;
|
||||
z-index: 5;
|
||||
}
|
||||
.gen-dialog:hover .gen-delete { opacity: 1; }
|
||||
|
||||
#previewContainer { position: relative; }
|
||||
#previewImage { width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50 min-h-screen">
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-center mb-8 text-gray-800">
|
||||
交互式对话框生成器
|
||||
</h1>
|
||||
|
||||
<div class="flex flex-col lg:flex-row gap-6">
|
||||
<!-- 左侧面板 -->
|
||||
<div class="lg:w-1/3 bg-white rounded-xl shadow-md p-6">
|
||||
<!-- 文件上传区域 -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-lg font-semibold mb-4 text-gray-700">
|
||||
<i class="fa fa-upload mr-2 text-primary"></i>上传背景图片
|
||||
</h2>
|
||||
<div id="dropArea" class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-primary transition-colors">
|
||||
<i class="fa fa-image text-4xl text-gray-400 mb-3"></i>
|
||||
<p class="text-gray-500 mb-2">点击或拖拽图片到此处</p>
|
||||
<p class="text-xs text-gray-400">支持 JPG、PNG、WEBP 格式</p>
|
||||
<input type="file" id="fileInput" accept="image/*" class="hidden">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 对话框选择区域 -->
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold mb-4 text-gray-700">
|
||||
<i class="fa fa-comment mr-2 text-primary"></i>点击添加对话框
|
||||
</h2>
|
||||
<p class="text-xs text-gray-400 mb-3">每点一次即在预览区新增一个对话框</p>
|
||||
<div class="space-y-3" id="dialogList">
|
||||
<div class="dialog-item" data-style="style1">
|
||||
<span class="inline-block w-3 h-3 rounded bg-white border border-gray-300 mr-2 align-middle"></span>白色圆角对话框
|
||||
</div>
|
||||
<div class="dialog-item" data-style="style2">
|
||||
<span class="inline-block w-3 h-3 rounded bg-blue-500 mr-2 align-middle"></span>蓝色气泡对话框
|
||||
</div>
|
||||
<div class="dialog-item" data-style="style3">
|
||||
<span class="inline-block w-3 h-3 rounded bg-amber-400 mr-2 align-middle"></span>黄色提示对话框
|
||||
</div>
|
||||
<div class="dialog-item" data-style="style4">
|
||||
<span class="inline-block w-3 h-3 rounded bg-gray-400 mr-2 align-middle"></span>灰色简约对话框
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<button id="clearBtn" class="w-full bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition-all">
|
||||
<i class="fa fa-trash mr-1"></i>清空全部对话框
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧预览面板 -->
|
||||
<div class="lg:w-2/3 bg-white rounded-xl shadow-md p-6">
|
||||
<h2 class="text-lg font-semibold mb-4 text-gray-700">
|
||||
<i class="fa fa-eye mr-2 text-primary"></i>预览区域
|
||||
</h2>
|
||||
<div id="previewContainer" class="relative w-full h-[500px] border rounded-lg bg-gray-100 overflow-hidden">
|
||||
<div id="previewImage"></div>
|
||||
<div id="dialogContainer" class="absolute inset-0"></div>
|
||||
<div id="emptyTip" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-gray-400 pointer-events-none">
|
||||
<i class="fa fa-image text-5xl mb-3"></i>
|
||||
<p>上传图片后开始编辑</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-3">
|
||||
<i class="fa fa-info-circle mr-1"></i>提示：对话框可拖动定位，输入文字后点确认即可渲染，双击已确认的框可重新编辑
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let dialogCount = 0;
|
||||
|
||||
const dropArea = document.getElementById('dropArea');
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const previewImage = document.getElementById('previewImage');
|
||||
const emptyTip = document.getElementById('emptyTip');
|
||||
const dialogList = document.getElementById('dialogList');
|
||||
const dialogContainer = document.getElementById('dialogContainer');
|
||||
const clearBtn = document.getElementById('clearBtn');
|
||||
const previewContainer = document.getElementById('previewContainer');
|
||||
|
||||
// ===== 文件上传 =====
|
||||
dropArea.addEventListener('click', () => fileInput.click());
|
||||
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(evt => {
|
||||
dropArea.addEventListener(evt, e => { e.preventDefault(); e.stopPropagation(); });
|
||||
});
|
||||
dropArea.addEventListener('drop', e => handleFile(e.dataTransfer.files[0]));
|
||||
fileInput.addEventListener('change', e => handleFile(e.target.files[0]));
|
||||
|
||||
function handleFile(file) {
|
||||
if (!file || !file.type.startsWith('image/')) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = e => {
|
||||
previewImage.style.backgroundImage = `url(${e.target.result})`;
|
||||
emptyTip.classList.add('hidden');
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
// ===== 点击添加对话框 =====
|
||||
dialogList.addEventListener('click', e => {
|
||||
const item = e.target.closest('.dialog-item');
|
||||
if (!item) return;
|
||||
createDialog(item.dataset.style);
|
||||
});
|
||||
|
||||
function createDialog(style) {
|
||||
dialogCount++;
|
||||
const dialog = document.createElement('div');
|
||||
dialog.className = `gen-dialog ${style}`;
|
||||
dialog.dataset.style = style;
|
||||
|
||||
// 随机偏移避免完全重叠
|
||||
const offsetX = 30 + (dialogCount * 25) % 200;
|
||||
const offsetY = 30 + (dialogCount * 20) % 150;
|
||||
dialog.style.left = offsetX + 'px';
|
||||
dialog.style.top = offsetY + 'px';
|
||||
dialog.style.padding = '12px 14px';
|
||||
|
||||
// 删除按钮
|
||||
const delBtn = document.createElement('div');
|
||||
delBtn.className = 'gen-delete';
|
||||
delBtn.innerHTML = '<i class="fa fa-times" style="font-size:9px"></i>';
|
||||
delBtn.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
dialog.remove();
|
||||
});
|
||||
|
||||
// 文本输入区
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.className = 'gen-text';
|
||||
textarea.rows = 2;
|
||||
textarea.placeholder = '输入文本...';
|
||||
// 阻止拖动冲突
|
||||
textarea.addEventListener('mousedown', e => e.stopPropagation());
|
||||
textarea.addEventListener('touchstart', e => e.stopPropagation());
|
||||
|
||||
// 底部：确认按钮 + 编辑提示
|
||||
const bottomRow = document.createElement('div');
|
||||
bottomRow.style.cssText = 'display:flex; justify-content:flex-end; align-items:center;';
|
||||
|
||||
const editHint = document.createElement('span');
|
||||
editHint.className = 'gen-edit-hint';
|
||||
editHint.textContent = '双击编辑';
|
||||
|
||||
const confirmBtn = document.createElement('button');
|
||||
confirmBtn.className = 'gen-confirm';
|
||||
confirmBtn.innerHTML = '<i class="fa fa-check" style="font-size:10px"></i> 确认';
|
||||
|
||||
bottomRow.appendChild(editHint);
|
||||
bottomRow.appendChild(confirmBtn);
|
||||
|
||||
dialog.appendChild(delBtn);
|
||||
dialog.appendChild(textarea);
|
||||
dialog.appendChild(bottomRow);
|
||||
dialogContainer.appendChild(dialog);
|
||||
|
||||
// ===== 确认 =====
|
||||
confirmBtn.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
const text = textarea.value.trim();
|
||||
if (!text) return;
|
||||
|
||||
// 把textarea换成纯文本展示
|
||||
const textDisplay = document.createElement('div');
|
||||
textDisplay.className = 'gen-text';
|
||||
textDisplay.style.whiteSpace = 'pre-wrap';
|
||||
textDisplay.textContent = text;
|
||||
textarea.replaceWith(textDisplay);
|
||||
|
||||
dialog.classList.add('confirmed');
|
||||
});
|
||||
|
||||
// ===== 双击重新编辑 =====
|
||||
dialog.addEventListener('dblclick', e => {
|
||||
if (!dialog.classList.contains('confirmed')) return;
|
||||
e.stopPropagation();
|
||||
|
||||
const textDisplay = dialog.querySelector('.gen-text');
|
||||
const currentText = textDisplay.textContent;
|
||||
|
||||
const newTextarea = document.createElement('textarea');
|
||||
newTextarea.className = 'gen-text';
|
||||
newTextarea.rows = 2;
|
||||
newTextarea.value = currentText;
|
||||
newTextarea.addEventListener('mousedown', e => e.stopPropagation());
|
||||
newTextarea.addEventListener('touchstart', e => e.stopPropagation());
|
||||
|
||||
textDisplay.replaceWith(newTextarea);
|
||||
dialog.classList.remove('confirmed');
|
||||
newTextarea.focus();
|
||||
});
|
||||
|
||||
// ===== 拖动 =====
|
||||
bindDrag(dialog);
|
||||
|
||||
// 自动聚焦输入
|
||||
textarea.focus();
|
||||
}
|
||||
|
||||
// ===== 拖动逻辑 =====
|
||||
function bindDrag(element) {
|
||||
let dragging = false, ox, oy;
|
||||
|
||||
element.addEventListener('mousedown', e => {
|
||||
if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'BUTTON' || e.target.closest('.gen-delete') || e.target.closest('.gen-confirm')) return;
|
||||
dragging = true;
|
||||
element.classList.add('active-drag');
|
||||
const rect = element.getBoundingClientRect();
|
||||
ox = e.clientX - rect.left;
|
||||
oy = e.clientY - rect.top;
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
document.addEventListener('mousemove', e => {
|
||||
if (!dragging) return;
|
||||
const cr = dialogContainer.getBoundingClientRect();
|
||||
let x = e.clientX - ox - cr.left;
|
||||
let y = e.clientY - oy - cr.top;
|
||||
x = Math.max(0, Math.min(x, cr.width - element.offsetWidth));
|
||||
y = Math.max(0, Math.min(y, cr.height - element.offsetHeight));
|
||||
element.style.left = x + 'px';
|
||||
element.style.top = y + 'px';
|
||||
});
|
||||
|
||||
document.addEventListener('mouseup', () => {
|
||||
if (dragging) {
|
||||
dragging = false;
|
||||
element.classList.remove('active-drag');
|
||||
}
|
||||
});
|
||||
|
||||
// 触摸支持
|
||||
element.addEventListener('touchstart', e => {
|
||||
if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'BUTTON' || e.target.closest('.gen-delete') || e.target.closest('.gen-confirm')) return;
|
||||
dragging = true;
|
||||
element.classList.add('active-drag');
|
||||
const rect = element.getBoundingClientRect();
|
||||
const touch = e.touches[0];
|
||||
ox = touch.clientX - rect.left;
|
||||
oy = touch.clientY - rect.top;
|
||||
}, { passive: true });
|
||||
|
||||
document.addEventListener('touchmove', e => {
|
||||
if (!dragging) return;
|
||||
const touch = e.touches[0];
|
||||
const cr = dialogContainer.getBoundingClientRect();
|
||||
let x = touch.clientX - ox - cr.left;
|
||||
let y = touch.clientY - oy - cr.top;
|
||||
x = Math.max(0, Math.min(x, cr.width - element.offsetWidth));
|
||||
y = Math.max(0, Math.min(y, cr.height - element.offsetHeight));
|
||||
element.style.left = x + 'px';
|
||||
element.style.top = y + 'px';
|
||||
}, { passive: true });
|
||||
|
||||
document.addEventListener('touchend', () => {
|
||||
if (dragging) {
|
||||
dragging = false;
|
||||
element.classList.remove('active-drag');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ===== 清空 =====
|
||||
clearBtn.addEventListener('click', () => {
|
||||
dialogContainer.innerHTML = '';
|
||||
dialogCount = 0;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -102,9 +102,9 @@ function AppShell({
|
||||
"canvas",
|
||||
"scriptTokens",
|
||||
"tokenUsage",
|
||||
"community",
|
||||
"assets",
|
||||
"more",
|
||||
"assets",
|
||||
"community",
|
||||
];
|
||||
return orderedKeys
|
||||
.map((key) => navItems.find((item) => item.key === key))
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -391,6 +391,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);
|
||||
@@ -1280,7 +1282,7 @@ function CanvasPage({
|
||||
model: defaultVideoModel,
|
||||
aspectRatio: "16:9",
|
||||
resolution: getDefaultVideoQuality(defaultVideoModel),
|
||||
duration: "4",
|
||||
duration: "5",
|
||||
videoMode: "text2video",
|
||||
sourceTextNodeId: source.id,
|
||||
position: {
|
||||
@@ -1304,7 +1306,7 @@ function CanvasPage({
|
||||
model: defaultVideoModel,
|
||||
aspectRatio: "16:9",
|
||||
resolution: getDefaultVideoQuality(defaultVideoModel),
|
||||
duration: "4",
|
||||
duration: "5",
|
||||
videoMode: "text2video",
|
||||
sourceTextNodeId: "",
|
||||
position,
|
||||
@@ -1360,7 +1362,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;
|
||||
@@ -1374,6 +1376,7 @@ function CanvasPage({
|
||||
imageSize: getDefaultImageQuality(fallbackVisibleImageModel),
|
||||
fileName,
|
||||
sourceImageNodeId: options?.sourceImageNodeId,
|
||||
sourceTextNodeId: options?.sourceTextNodeId,
|
||||
position,
|
||||
size: createCanvasNodeSize("image"),
|
||||
};
|
||||
@@ -1979,6 +1982,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;
|
||||
@@ -3552,7 +3669,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}
|
||||
@@ -3560,6 +3677,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`,
|
||||
@@ -4139,7 +4260,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" },
|
||||
|
||||
@@ -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 ? (
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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="取消生成任务">
|
||||
|
||||
@@ -516,6 +516,18 @@ const formatRatioDisplayValue = (value: string) => {
|
||||
const ratio = value.match(/\d+(?:\.\d+)?\s*[:：]\s*\d+(?:\.\d+)?/u)?.[0]?.replace(/\s+/g, "").replace(/:/g, "：") ?? "";
|
||||
return size && ratio ? `${size}\u00a0\u00a0\u00a0${ratio}` : value.replace(/^套图[:：]\s*/, "");
|
||||
};
|
||||
/** Extract CSS aspect-ratio from a ratio string like "1000x1000px 1:1" -> "1 / 1" */
|
||||
const parseRatioToAspectCss = (ratioStr: string): string => {
|
||||
const match = ratioStr.match(/(\d+)\s*[:：]\s*(\d+)/u);
|
||||
if (!match) return "1 / 1";
|
||||
return `${match[1]} / ${match[2]}`;
|
||||
};
|
||||
/** Normalize ratio display string ("1000×1000px 1：1") to API format ("1:1") */
|
||||
const normalizeRatioForApi = (ratioStr: string): string => {
|
||||
const match = ratioStr.match(/(\d+)\s*[:：]\s*(\d+)/u);
|
||||
if (!match) return "1:1";
|
||||
return `${match[1]}:${match[2]}`;
|
||||
};
|
||||
const greatestCommonDivisor = (left: number, right: number): number => {
|
||||
let a = Math.abs(left);
|
||||
let b = Math.abs(right);
|
||||
@@ -866,6 +878,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
const [videoOutfitVideoFile, setVideoOutfitVideoFile] = useState<File | null>(null);
|
||||
const [videoOutfitRefFile, setVideoOutfitRefFile] = useState<File | null>(null);
|
||||
const [isCloneSettingsCollapsed, setIsCloneSettingsCollapsed] = useState(false);
|
||||
const [previewZoom, setPreviewZoom] = useState(1);
|
||||
const [requirement, setRequirement] = useState("");
|
||||
const [requirementImageMentionQuery, setRequirementImageMentionQuery] = useState<string | null>(null);
|
||||
const [cloneSettingName, setCloneSettingName] = useState("新建创作");
|
||||
@@ -1087,6 +1100,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);
|
||||
@@ -1568,6 +1607,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
const stamp = Date.now();
|
||||
|
||||
for (const countKey of cloneSetCountOptions.map((o) => o.key)) {
|
||||
if (imageAbortRef.current.current) break;
|
||||
const count = counts[countKey];
|
||||
for (let i = 0; i < count; i++) {
|
||||
if (imageAbortRef.current.current) break;
|
||||
@@ -1577,7 +1617,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
const { taskId } = await aiGenerationClient.createImageTask({
|
||||
model: IMAGE_MODEL,
|
||||
prompt: fullPrompt,
|
||||
ratio: pRatio,
|
||||
ratio: normalizeRatioForApi(pRatio),
|
||||
quality: pRatio.includes("720") ? "720P" : "1080P",
|
||||
gridMode: "single",
|
||||
referenceUrls,
|
||||
@@ -1614,7 +1654,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
return;
|
||||
}
|
||||
setResultFn(generatedUrls);
|
||||
setStatusFn(generatedUrls.some(Boolean) ? "done" : "idle");
|
||||
setStatusFn(generatedUrls.some(Boolean) ? "done" : "failed");
|
||||
} catch (err) {
|
||||
if (imageAbortRef.current.current) {
|
||||
setStatusFn("idle");
|
||||
@@ -1661,7 +1701,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
const { taskId } = await aiGenerationClient.createImageTask({
|
||||
model: IMAGE_MODEL,
|
||||
prompt,
|
||||
ratio: pRatio,
|
||||
ratio: normalizeRatioForApi(pRatio),
|
||||
quality: pRatio.includes("720") ? "720P" : "1080P",
|
||||
gridMode: "single",
|
||||
referenceUrls,
|
||||
@@ -1984,7 +2024,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
for (let i = 0; i < count; i++) {
|
||||
clonePreviewCards.push({
|
||||
id: `${countKey}-${i}`,
|
||||
src: results[cloneIndex]?.src || productSetPreviewCards[cloneIndex % productSetPreviewCards.length]?.src || "",
|
||||
src: productSetResultImages[cloneIndex] || productSetPreviewCards[cloneIndex % productSetPreviewCards.length]?.src || "",
|
||||
label: `${info.label}${count > 1 ? ` ${i + 1}` : ""}`,
|
||||
});
|
||||
cloneIndex++;
|
||||
@@ -2098,6 +2138,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}
|
||||
@@ -2281,6 +2325,11 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
<span>
|
||||
上传商品图，AI 即刻生成 <b>符合多电商平台规范</b> 的高转化率商品素材。
|
||||
</span>
|
||||
<div className="clone-ai-preview-zoom">
|
||||
<button type="button" onClick={() => setPreviewZoom((z) => Math.max(0.25, z - 0.1))} disabled={previewZoom <= 0.25} aria-label="缩小">−</button>
|
||||
<span>{Math.round(previewZoom * 100)}%</span>
|
||||
<button type="button" onClick={() => setPreviewZoom((z) => Math.min(2, z + 0.1))} disabled={previewZoom >= 2} aria-label="放大">+</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{cloneOutput === "video" ? (
|
||||
@@ -2403,8 +2452,9 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
) : (
|
||||
<>
|
||||
{status === "done" ? (
|
||||
<div className="clone-ai-preview-zoom-wrap" style={{ zoom: previewZoom }}>
|
||||
<section className="clone-ai-preview-showcase" aria-label="生成结果">
|
||||
<button type="button" className="clone-ai-main-result" onClick={() => openProductSetPreview(cloneOutput === "set" ? clonePreviewCards[0] : results[0])}>
|
||||
<button type="button" className="clone-ai-main-result" style={{ aspectRatio: parseRatioToAspectCss(ratio) }} onClick={() => openProductSetPreview(cloneOutput === "set" ? clonePreviewCards[0] : results[0])}>
|
||||
<img src={productImages[0]?.src ?? (cloneOutput === "set" ? clonePreviewCards[0].src : results[0]?.src ?? "")} alt="上传商品原图" />
|
||||
<span>原图素材</span>
|
||||
</button>
|
||||
@@ -2412,19 +2462,20 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
<div className="clone-ai-result-grid result-reveal">
|
||||
{cloneOutput === "set" ? (
|
||||
clonePreviewCards.map((card) => (
|
||||
<button key={card.id} type="button" onClick={() => openProductSetPreview(card)}>
|
||||
<button key={card.id} type="button" style={{ aspectRatio: parseRatioToAspectCss(ratio) }} onClick={() => openProductSetPreview(card)}>
|
||||
<img src={card.src} alt={card.label} />
|
||||
<span>{card.label}</span>
|
||||
</button>
|
||||
))
|
||||
) : results[0]?.src ? (
|
||||
<button type="button" onClick={() => openProductSetPreview(results[0])}>
|
||||
<button type="button" style={{ aspectRatio: parseRatioToAspectCss(ratio) }} onClick={() => openProductSetPreview(results[0])}>
|
||||
<img src={results[0].src} alt={selectedCloneOutput.label} />
|
||||
<span>{selectedCloneOutput.label}</span>
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
) : (
|
||||
<section className="clone-ai-empty-state" aria-live="polite">
|
||||
{status === "generating" ? <LoadingOutlined /> : status === "failed" ? <FrownOutlined /> : <FileImageOutlined />}
|
||||
@@ -2613,7 +2664,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
) : null}
|
||||
|
||||
{isSetTool ? setPreview : isDetail ? detailPreview : isTryOn ? tryOnPreview : isCloneTool ? (cloneOutput === "video" ? (
|
||||
<main className="product-clone-preview product-clone-preview--video" style={{ padding: 0, overflow: "hidden" }}>
|
||||
<main className="product-clone-preview product-clone-preview--video" style={{ padding: 0 }}>
|
||||
<EcommerceVideoWorkspace
|
||||
isAuthenticated={Boolean((_props as Record<string, unknown>).isAuthenticated)}
|
||||
productImageDataUrls={productImages.map((img) => img.src)}
|
||||
|
||||
@@ -119,6 +119,7 @@ export default function EcommerceVideoWorkspace({
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [actionNotice, setActionNotice] = useState<string | null>(null);
|
||||
const [previewMedia, setPreviewMedia] = useState<{ url: string; type: "image" | "video" } | null>(null);
|
||||
const [flowZoom, setFlowZoom] = useState(1);
|
||||
const abortControllerRef = useRef<AbortController | null>(null);
|
||||
const renderAbortRef = useRef({ current: false });
|
||||
const setView = useAppStore((s) => s.setView);
|
||||
@@ -600,6 +601,12 @@ export default function EcommerceVideoWorkspace({
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="ecom-video-flowbar__zoom">
|
||||
<button type="button" onClick={() => setFlowZoom((z) => Math.max(0.25, z - 0.1))} disabled={flowZoom <= 0.25} aria-label="缩小">−</button>
|
||||
<span>{Math.round(flowZoom * 100)}%</span>
|
||||
<button type="button" onClick={() => setFlowZoom((z) => Math.min(2, z + 0.1))} disabled={flowZoom >= 2} aria-label="放大">+</button>
|
||||
</div>
|
||||
|
||||
<div className="ecom-video-flowbar__actions">
|
||||
{onOpenHistory ? (
|
||||
<button type="button" className="ecom-video-flow-action ecom-video-flow-action--ghost" onClick={onOpenHistory} title="生成记录">
|
||||
@@ -644,9 +651,10 @@ export default function EcommerceVideoWorkspace({
|
||||
|
||||
{/* ── Flow canvas ──────────────────────────────────── */}
|
||||
<section className="ecom-video-flow-canvas" aria-label="视频分镜流程图">
|
||||
<div style={{ zoom: flowZoom, flexShrink: 0, display: "flex", alignItems: "flex-start", justifyContent: "center", minWidth: "max-content" }}>
|
||||
{!sourceImage ? (
|
||||
<div className="ecom-video-empty">
|
||||
<span>上传商品图并点击“一键策划”开始</span>
|
||||
<span>上传商品图并点击"一键策划"开始</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="ecom-video-tree">
|
||||
@@ -762,6 +770,7 @@ export default function EcommerceVideoWorkspace({
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Delivery dock ────────────────────────────── */}
|
||||
{primaryVideo ? (
|
||||
|
||||
@@ -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}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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";
|
||||
@@ -302,6 +303,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);
|
||||
|
||||
@@ -324,9 +326,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 });
|
||||
@@ -356,6 +356,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 = "";
|
||||
};
|
||||
|
||||
@@ -456,6 +462,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(/\.[^.]+$/, "") ?? "剧本评测";
|
||||
@@ -472,14 +502,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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -105,6 +105,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,
|
||||
@@ -337,9 +340,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;
|
||||
|
||||
@@ -395,13 +402,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) => ({
|
||||
@@ -2720,6 +2727,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
|
||||
|
||||
@@ -7,6 +7,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"
|
||||
@@ -138,6 +141,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 的创作协作助手，像一个正在一起工作的同伴一样说话。",
|
||||
`默认使用自然、简洁的中文，不要官腔，不要机械套话，不要频繁使用“首先、其次、最后”这种模板。`,
|
||||
@@ -210,13 +231,13 @@ export const MODE_OPTIONS: WorkbenchOption[] = (Object.keys(MODE_META) as Workbe
|
||||
}));
|
||||
|
||||
export const IMAGE_MODEL_OPTIONS: WorkbenchOption[] = [
|
||||
{ value: "wan2.7-image-pro", label: "wan 2.7 Pro 4K · 0.20 积分" },
|
||||
{ value: "wan2.7-image", label: "wan 2.7 · 0.20 积分" },
|
||||
{ value: "gpt-image-2", label: "GPT-Image-2 · 0.20 积分" },
|
||||
{ value: "gpt-image-2-vip", label: "GPT-Image-2 VIP · 0.20 积分" },
|
||||
{ value: "nano-banana-pro", label: "Nano Banana Pro · 0.20 积分" },
|
||||
{ value: "nano-banana-2", label: "Nano Banana 2 · 0.20 积分" },
|
||||
{ value: "nano-banana-fast", label: "Nano Banana · 0.20 积分" },
|
||||
{ value: "wan2.7-image-pro", label: "wan 2.7 Pro 4K" },
|
||||
{ value: "wan2.7-image", label: "wan 2.7" },
|
||||
{ value: "gpt-image-2", label: "GPT-Image-2" },
|
||||
{ value: "gpt-image-2-vip", label: "GPT-Image-2 VIP" },
|
||||
{ value: "nano-banana-pro", label: "Nano Banana Pro" },
|
||||
{ value: "nano-banana-2", label: "Nano Banana 2" },
|
||||
{ value: "nano-banana-fast", label: "Nano Banana" },
|
||||
];
|
||||
|
||||
export const VIDEO_MODEL_OPTIONS: WorkbenchOption[] = ENTERPRISE_VIDEO_MODEL_OPTIONS.map((option) => ({ ...option }));
|
||||
@@ -249,7 +270,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" },
|
||||
|
||||
@@ -723,6 +723,43 @@
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
/* ── Canvas drag-and-drop visual feedback ─────────────────────────── */
|
||||
.studio-canvas.is-canvas-dragging::after {
|
||||
content: "释放以上传图片";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(33, 242, 154, 0.12);
|
||||
border: 3px dashed #21f29a;
|
||||
color: #111;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.studio-canvas-text-composer.is-drag-over {
|
||||
outline: 2px dashed #21f29a;
|
||||
outline-offset: 2px;
|
||||
background: rgba(33, 242, 154, 0.06);
|
||||
}
|
||||
|
||||
.studio-canvas-text-composer.is-drag-over::after {
|
||||
content: "释放图片以创建节点";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
color: #333;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Tool Modal Overlay */
|
||||
.studio-canvas-tool-modal-overlay {
|
||||
position: fixed;
|
||||
|
||||
@@ -553,6 +553,209 @@
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* ── Generation controls ── */
|
||||
.dialog-generator-mode-switch {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dialog-generator-mode {
|
||||
min-height: 42px;
|
||||
border: 1px solid rgba(0, 255, 136, 0.16);
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: #9aa1b8;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
transition:
|
||||
border-color 180ms ease,
|
||||
background 180ms ease,
|
||||
color 180ms ease,
|
||||
transform 180ms ease;
|
||||
}
|
||||
|
||||
.dialog-generator-mode:hover {
|
||||
border-color: rgba(0, 255, 136, 0.32);
|
||||
color: #dce3ed;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.dialog-generator-mode.is-active {
|
||||
border-color: rgba(0, 255, 136, 0.42);
|
||||
background: rgba(0, 255, 136, 0.08);
|
||||
color: #00ff88;
|
||||
box-shadow: 0 0 16px rgba(0, 255, 136, 0.08);
|
||||
}
|
||||
|
||||
.dialog-generator-controls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dialog-generator-pills {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dialog-generator-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-height: 38px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: #dce3ed;
|
||||
cursor: pointer;
|
||||
padding: 0 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
transition:
|
||||
border-color 180ms ease,
|
||||
background 180ms ease,
|
||||
color 180ms ease;
|
||||
}
|
||||
|
||||
.dialog-generator-pill:hover {
|
||||
border-color: rgba(0, 255, 136, 0.28);
|
||||
color: #f6f8fb;
|
||||
}
|
||||
|
||||
.dialog-generator-pill.is-open {
|
||||
border-color: rgba(0, 255, 136, 0.38);
|
||||
background: rgba(0, 255, 136, 0.08);
|
||||
color: #00ff88;
|
||||
}
|
||||
|
||||
.dialog-generator-pill .anticon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dialog-generator-dropdown {
|
||||
position: absolute;
|
||||
z-index: 30;
|
||||
top: calc(100% + 4px);
|
||||
left: 0;
|
||||
min-width: 148px;
|
||||
border: 1px solid rgba(0, 255, 136, 0.18);
|
||||
border-radius: 8px;
|
||||
background: rgba(10, 16, 26, 0.96);
|
||||
box-shadow:
|
||||
0 12px 36px rgba(0, 0, 0, 0.42),
|
||||
0 0 0 1px rgba(0, 255, 136, 0.06);
|
||||
backdrop-filter: blur(18px);
|
||||
padding: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dialog-generator-dropdown__item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: #bcc4d6;
|
||||
cursor: pointer;
|
||||
padding: 9px 12px;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
transition:
|
||||
background 120ms ease,
|
||||
color 120ms ease;
|
||||
}
|
||||
|
||||
.dialog-generator-dropdown__item:hover {
|
||||
background: rgba(0, 255, 136, 0.08);
|
||||
color: #e8eaef;
|
||||
}
|
||||
|
||||
.dialog-generator-dropdown__item.is-active {
|
||||
background: rgba(0, 255, 136, 0.12);
|
||||
color: #00ff88;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
/* ── Video duration ── */
|
||||
.dialog-generator-duration {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dialog-generator-duration__label {
|
||||
color: #9aa1b8;
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.dialog-generator-duration__options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.dialog-generator-duration__btn {
|
||||
min-width: 42px;
|
||||
min-height: 34px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 6px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: #9aa1b8;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
transition:
|
||||
border-color 180ms ease,
|
||||
background 180ms ease,
|
||||
color 180ms ease;
|
||||
}
|
||||
|
||||
.dialog-generator-duration__btn:hover {
|
||||
border-color: rgba(0, 255, 136, 0.28);
|
||||
color: #dce3ed;
|
||||
}
|
||||
|
||||
.dialog-generator-duration__btn.is-active {
|
||||
border-color: rgba(0, 255, 136, 0.42);
|
||||
background: rgba(0, 255, 136, 0.12);
|
||||
color: #00ff88;
|
||||
}
|
||||
|
||||
/* ── Generate button ── */
|
||||
.dialog-generator-run {
|
||||
min-height: 48px;
|
||||
border: 1px solid rgba(0, 255, 136, 0.28);
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, rgba(0, 255, 136, 0.14) 0%, rgba(34, 240, 192, 0.08) 100%);
|
||||
color: #00ff88;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.04em;
|
||||
transition:
|
||||
border-color 180ms ease,
|
||||
background 180ms ease,
|
||||
transform 180ms ease,
|
||||
box-shadow 180ms ease;
|
||||
}
|
||||
|
||||
.dialog-generator-run:hover:not(:disabled) {
|
||||
border-color: rgba(0, 255, 136, 0.5);
|
||||
background: linear-gradient(135deg, rgba(0, 255, 136, 0.2) 0%, rgba(34, 240, 192, 0.12) 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 24px rgba(0, 255, 136, 0.1);
|
||||
}
|
||||
|
||||
.dialog-generator-run:disabled {
|
||||
opacity: 0.52;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.dialog-generator-shell {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@@ -6,9 +6,13 @@
|
||||
align-content: initial;
|
||||
justify-items: initial;
|
||||
gap: 0;
|
||||
overflow: hidden;
|
||||
overflow: auto;
|
||||
background: #0e1014;
|
||||
scrollbar-color: #353b45 #0e1014;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
.product-clone-page[data-tool="clone"] .product-clone-preview--video::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ecom-video-workspace {
|
||||
@@ -20,6 +24,11 @@
|
||||
overflow: hidden;
|
||||
background: #0e1014;
|
||||
color: #e5ebf4;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
.ecom-video-workspace::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ecom-video-flowbar {
|
||||
@@ -112,6 +121,42 @@
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* ── Flowbar zoom controls ─────────────────────────── */
|
||||
.ecom-video-flowbar__zoom {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
.ecom-video-flowbar__zoom button {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: 1px solid #2c3038;
|
||||
border-radius: 6px;
|
||||
background: #1a1d24;
|
||||
color: #8890a0;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
transition: border-color 150ms ease, color 150ms ease;
|
||||
}
|
||||
.ecom-video-flowbar__zoom button:hover:not(:disabled) {
|
||||
border-color: #00ff88;
|
||||
color: #00ff88;
|
||||
}
|
||||
.ecom-video-flowbar__zoom button:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.ecom-video-flowbar__zoom span {
|
||||
min-width: 38px;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #6a7282;
|
||||
}
|
||||
|
||||
.ecom-video-flowbar__error {
|
||||
max-width: min(260px, 28vw);
|
||||
overflow: hidden;
|
||||
@@ -181,8 +226,13 @@
|
||||
background: #101318;
|
||||
padding: 32px 40px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
.ecom-video-flow-canvas::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ecom-video-flow-map {
|
||||
@@ -418,22 +468,23 @@
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
place-items: center;
|
||||
border: 1px solid #3d3020;
|
||||
border-radius: 8px;
|
||||
background: #15181f;
|
||||
color: #ffe1ad;
|
||||
border: 1px solid #00cc6a;
|
||||
border-radius: 9px;
|
||||
background: #00ff88;
|
||||
color: #06130d;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 150ms ease,
|
||||
border-color 150ms ease,
|
||||
background-color 150ms ease;
|
||||
filter 150ms ease,
|
||||
box-shadow 150ms ease;
|
||||
}
|
||||
|
||||
.ecom-video-flow-dock button:hover {
|
||||
border-color: #4d3a1a;
|
||||
background: #241c12;
|
||||
transform: translateY(-1px);
|
||||
filter: brightness(1.08);
|
||||
box-shadow: 0 2px 12px rgba(0, 255, 136, 0.25);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.ecom-video-flow-notice {
|
||||
|
||||
+159
-60
@@ -990,8 +990,8 @@
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 20px 18px;
|
||||
scrollbar-color: #3a3f49 #15171c;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #3a3f49 #15171c;
|
||||
transition:
|
||||
opacity 360ms ease,
|
||||
transform var(--clone-settings-motion-duration) var(--clone-settings-motion-ease);
|
||||
@@ -1541,12 +1541,11 @@
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-panel {
|
||||
display: grid;
|
||||
flex: 0 0 272px;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
flex: 0 0 auto;
|
||||
grid-template-rows: auto auto minmax(0, 1fr);
|
||||
gap: 9px;
|
||||
height: 272px;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
overflow: visible;
|
||||
border: 1px solid #303540;
|
||||
border-radius: 14px;
|
||||
background: #1c1f26;
|
||||
@@ -1608,7 +1607,7 @@
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload {
|
||||
position: relative;
|
||||
display: grid;
|
||||
min-height: 78px;
|
||||
min-height: 96px;
|
||||
overflow: visible;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
@@ -1617,7 +1616,7 @@
|
||||
border-radius: 12px;
|
||||
background: #20242c;
|
||||
color: #eef2f6;
|
||||
padding: 8px;
|
||||
padding: 16px 12px;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
border-color 160ms ease,
|
||||
@@ -1625,15 +1624,52 @@
|
||||
transform 160ms ease;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload.has-files {
|
||||
min-height: 120px;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload:hover {
|
||||
border-color: #00ff88;
|
||||
background: #202c28;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload.is-dragging {
|
||||
border-color: #00ff88;
|
||||
background: #1a2e24;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
border-radius: 12px;
|
||||
background: rgba(0, 255, 136, 0.08);
|
||||
color: #00ff88;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload-overlay .anticon {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload-overlay span {
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload > span {
|
||||
display: inline-grid;
|
||||
grid-template-columns: auto minmax(0, max-content);
|
||||
@@ -1676,75 +1712,86 @@
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-preview {
|
||||
position: absolute;
|
||||
inset: 6px;
|
||||
/* ── Reference image file grid (inside upload button) ── */
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-files {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: minmax(0, 56px);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
|
||||
gap: 6px;
|
||||
border-radius: 10px;
|
||||
background: #20242c;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: scale(0.98);
|
||||
transition:
|
||||
opacity 160ms ease,
|
||||
transform 160ms ease;
|
||||
width: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload:hover .clone-ai-replicate-preview,
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload:focus-visible .clone-ai-replicate-preview {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-preview figure {
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-file {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 56px;
|
||||
height: 52px;
|
||||
aspect-ratio: 1;
|
||||
min-width: 0;
|
||||
overflow: visible;
|
||||
margin: 0;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-preview figure > img {
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-file > img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid #3a4555;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
background: #111720;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-preview figure:only-child {
|
||||
width: min(170px, 100%);
|
||||
height: 52px;
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-file > img:hover {
|
||||
border-color: #00ff88;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-preview figure:only-child > img {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-preview b {
|
||||
display: grid;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
place-items: center;
|
||||
border: 1px solid #3a4555;
|
||||
border-radius: 999px;
|
||||
background: #151b24;
|
||||
color: #eef2f6;
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-add-more {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
justify-self: center;
|
||||
width: fit-content;
|
||||
max-width: calc(100% - 8px);
|
||||
height: 28px;
|
||||
min-width: 0;
|
||||
border-radius: 7px;
|
||||
background: #2b3039;
|
||||
color: #9aa4b4;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
font-weight: 750;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-add-more .anticon {
|
||||
font-size: 13px;
|
||||
color: #5d84bd;
|
||||
}
|
||||
|
||||
/* ── Portal-based zoom preview (avoids overflow clipping) ── */
|
||||
.clone-ai-zoom-portal {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
width: min(280px, 52vw);
|
||||
max-height: 340px;
|
||||
border: 1px solid #3a4555;
|
||||
border-radius: 14px;
|
||||
background: #101115;
|
||||
padding: 8px;
|
||||
box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5);
|
||||
transform: translate(-50%, calc(-100% - 12px));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.clone-ai-zoom-portal img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 324px;
|
||||
border-radius: 8px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-link input {
|
||||
@@ -2745,12 +2792,18 @@
|
||||
position: relative;
|
||||
display: grid;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
align-content: center;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
align-content: safe center;
|
||||
justify-items: center;
|
||||
gap: 22px;
|
||||
background: #101115;
|
||||
padding: 92px 46px 142px;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-preview::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-preview-header {
|
||||
@@ -2781,6 +2834,50 @@
|
||||
color: #00ff88;
|
||||
}
|
||||
|
||||
/* ── Preview zoom controls ─────────────────────────── */
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-preview-zoom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-preview-zoom button {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid #2c3038;
|
||||
border-radius: 6px;
|
||||
background: #1b1d23;
|
||||
color: #a0a8b8;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
transition: border-color 150ms ease, color 150ms ease;
|
||||
}
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-preview-zoom button:hover:not(:disabled) {
|
||||
border-color: #00ff88;
|
||||
color: #00ff88;
|
||||
}
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-preview-zoom button:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-preview-zoom span {
|
||||
min-width: 42px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #758096;
|
||||
}
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-preview-zoom-wrap {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-empty-state {
|
||||
display: grid;
|
||||
width: min(100%, 600px);
|
||||
@@ -2888,7 +2985,8 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-main-result {
|
||||
height: 440px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-result-grid {
|
||||
@@ -2898,12 +2996,12 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-result-grid button {
|
||||
height: 210px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-result-grid button:first-child {
|
||||
grid-column: 1 / -1;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-main-result span,
|
||||
@@ -3510,8 +3608,8 @@
|
||||
.product-set-thumb:focus-within .uploaded-image-zoom,
|
||||
.product-clone-uploaded-thumb:hover .uploaded-image-zoom,
|
||||
.product-clone-uploaded-thumb:focus-within .uploaded-image-zoom,
|
||||
.clone-ai-replicate-preview figure:hover .uploaded-image-zoom,
|
||||
.clone-ai-replicate-preview figure:focus-within .uploaded-image-zoom {
|
||||
.clone-ai-replicate-file:hover .uploaded-image-zoom,
|
||||
.clone-ai-replicate-file:focus-within .uploaded-image-zoom {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0) scale(1);
|
||||
visibility: visible;
|
||||
@@ -9458,3 +9556,4 @@
|
||||
min-height: calc(100% - 59px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -216,14 +216,14 @@
|
||||
|
||||
.image-workbench-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr 220px;
|
||||
grid-template-columns: 280px 1fr;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-workbench-layout--inpaint {
|
||||
grid-template-columns: 260px 1fr 240px;
|
||||
grid-template-columns: 260px 1fr;
|
||||
}
|
||||
|
||||
.image-workbench-layout--camera {
|
||||
@@ -278,6 +278,27 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image-workbench-upload-shell.is-dragging {
|
||||
border-radius: var(--radius-sm);
|
||||
outline: 2px dashed var(--accent);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.image-workbench-upload-drop-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(var(--accent-rgb), 0.08);
|
||||
color: var(--accent);
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.image-workbench-upload {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -14618,6 +14618,55 @@
|
||||
background: #ddf5e2;
|
||||
}
|
||||
|
||||
.agent-tool-pill.is-open {
|
||||
background: #ddf5e2;
|
||||
box-shadow: 1px 1px 0 #111;
|
||||
}
|
||||
|
||||
.agent-tool-pills {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.agent-dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% + 4px);
|
||||
left: 0;
|
||||
z-index: 120;
|
||||
min-width: 160px;
|
||||
background: #fff;
|
||||
border: 3px solid #111;
|
||||
box-shadow: 3px 3px 0 #111;
|
||||
border-radius: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.agent-dropdown__item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 8px 14px;
|
||||
border: none;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background: #fff;
|
||||
color: #111;
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.agent-dropdown__item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.agent-dropdown__item:hover {
|
||||
background: #ddf5e2;
|
||||
}
|
||||
|
||||
.agent-dropdown__item.is-active {
|
||||
background: #c8f0d6;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.agent-run-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -142,6 +142,7 @@
|
||||
|
||||
/* Upload zone */
|
||||
.script-eval-v5-upload-zone {
|
||||
position: relative;
|
||||
border: 2px dashed var(--v5-border2);
|
||||
border-radius: 12px;
|
||||
padding: 22px 18px;
|
||||
@@ -155,6 +156,37 @@
|
||||
background: var(--v5-green-deep);
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-zone.is-dragging {
|
||||
border-color: var(--v5-green);
|
||||
border-style: solid;
|
||||
background: var(--v5-green-deep);
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-drop-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
border-radius: 12px;
|
||||
background: rgba(0, 255, 136, 0.06);
|
||||
color: var(--v5-green);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-drop-overlay .anticon {
|
||||
font-size: 40px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-drop-overlay span {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-icon {
|
||||
margin-bottom: 10px;
|
||||
font-size: 38px;
|
||||
@@ -195,10 +227,11 @@
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-done {
|
||||
position: relative;
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 14px;
|
||||
padding: 12px 28px 12px 14px;
|
||||
border-radius: 8px;
|
||||
background: var(--v5-green-deep);
|
||||
border: 1px solid var(--v5-green-border);
|
||||
@@ -208,6 +241,30 @@
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-delete {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
color: var(--v5-text3);
|
||||
cursor: pointer;
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-delete:hover {
|
||||
background: rgba(255, 77, 103, 0.5);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-done .anticon {
|
||||
font-size: 16px;
|
||||
color: var(--v5-green);
|
||||
@@ -218,7 +275,7 @@
|
||||
font-size: 13px;
|
||||
color: var(--v5-green);
|
||||
font-weight: 600;
|
||||
flex: 1;
|
||||
max-width: 16ch;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -2805,7 +2862,7 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 8em;
|
||||
max-width: 16em;
|
||||
}
|
||||
|
||||
.script-eval-v5-uf-size {
|
||||
|
||||
@@ -307,9 +307,10 @@
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(var(--accent-rgb), 0.13);
|
||||
background: rgba(var(--accent-rgb), 0.22);
|
||||
color: var(--accent);
|
||||
font-size: 26px;
|
||||
box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.08);
|
||||
}
|
||||
|
||||
.studio-canvas-ghost__title {
|
||||
|
||||
@@ -8,27 +8,27 @@ export const ENTERPRISE_WANXIANG_I2V_MODEL = "wan2.7-i2v";
|
||||
export const ENTERPRISE_VIDEO_MODEL_OPTIONS = [
|
||||
{
|
||||
value: HAPPY_HORSE_UI_MODEL,
|
||||
label: "HappyHorse 1.0 · 0.72 积分/秒起",
|
||||
label: "HappyHorse 1.0",
|
||||
description: "自动匹配文生视频、首帧图生视频或参考图生视频",
|
||||
},
|
||||
{
|
||||
value: VIDU_UI_MODEL,
|
||||
label: "Vidu Q3 Turbo · 0.40 积分/秒起",
|
||||
label: "Vidu Q3 Turbo",
|
||||
description: "自动匹配文生视频或图生视频，支持16秒",
|
||||
},
|
||||
{
|
||||
value: PIXVERSE_UI_MODEL,
|
||||
label: "PixVerse V6 · 0.40 积分/秒起",
|
||||
label: "PixVerse V6",
|
||||
description: "自动匹配文生视频或图生视频，擅长动作特效",
|
||||
},
|
||||
{
|
||||
value: ENTERPRISE_WANXIANG_I2V_MODEL,
|
||||
label: "万相 图生视频 · 0.60 积分/秒起",
|
||||
label: "万相 图生视频",
|
||||
description: "图生视频模型，支持首帧图驱动",
|
||||
},
|
||||
{
|
||||
value: ENTERPRISE_KLING_MODEL,
|
||||
label: "Kling V3 Omni · 0.60 积分/秒起",
|
||||
label: "Kling V3 Omni",
|
||||
description: "支持文生视频、图生视频及多模态参考生成",
|
||||
},
|
||||
] as const;
|
||||
|
||||
Reference in New Issue
Block a user