Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 OmniAI Developer
|
192be0e701 | ||
 stringadmin
|
f817e31366 | ||
|
OmniAI Developer
|
0384d7f2a3 | ||
|
OmniAI Developer
|
f920630160 | ||
|
stringadmin
|
c1266169d7 | ||
 ludan
|
4530058648 | ||
|
OmniAI Developer
|
2e52101b37 | ||
|
stringadmin
|
5bdeac20fb | ||
|
OmniAI Developer
|
5b87594e36 |
@@ -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>
|
||||
+5
-2
@@ -183,7 +183,7 @@ function createWorkflowFromResult(payload: WorkbenchResultActionPayload): WebCan
|
||||
description: payload.prompt || "从生成结果进入画布继续创作。",
|
||||
source: "blank",
|
||||
settings: {
|
||||
model: payload.resultType === "video" ? "Seedance 2.0" : "Nano Banana Pro",
|
||||
model: payload.resultType === "video" ? "Seedance 2.0" : "omni-水果 Pro",
|
||||
ratio: payload.resultType === "video" ? "16:9" : "1:1",
|
||||
duration: payload.resultType === "video" ? "6s" : "0s",
|
||||
resolution: payload.resultType === "video" ? "720p" : "2K",
|
||||
@@ -263,6 +263,7 @@ function App() {
|
||||
|
||||
// Task store
|
||||
const tasks = useTaskStore((s) => s.tasks);
|
||||
const setTasks = useTaskStore((s) => s.setTasks);
|
||||
const appendTask = useTaskStore((s) => s.appendTask);
|
||||
const mergeServerTasks = useTaskStore((s) => s.mergeServerTasks);
|
||||
const clearTasks = useTaskStore((s) => s.clearTasks);
|
||||
@@ -922,7 +923,7 @@ function App() {
|
||||
previewUrl: payload.resultUrl,
|
||||
params: payload.resultType === "video"
|
||||
? { model: "Kling V3 Omni", aspectRatio: "16:9", resolution: "720p", duration: "6s", videoMode: "text-to-video" }
|
||||
: { model: "Nano Banana Pro", aspectRatio: "1:1", imageSize: "2K" },
|
||||
: { model: "omni-水果 Pro", aspectRatio: "1:1", imageSize: "2K" },
|
||||
assetRef: payload.resultOssKey ? { url: payload.resultUrl, ossKey: payload.resultOssKey, mediaType: payload.resultType === "video" ? "video/mp4" : "image/png", sourceTaskId: payload.taskId } : undefined,
|
||||
},
|
||||
];
|
||||
@@ -1042,6 +1043,8 @@ function App() {
|
||||
onOpenWorkbench={() => handleSetView("workbench")}
|
||||
onOpenCommunity={() => handleSetView("community")}
|
||||
onDeleteProject={handleDeleteProject}
|
||||
onOpenProject={handleOpenProject}
|
||||
onRemoveWork={(task) => setTasks(tasks.filter((item) => item.id !== task.id))}
|
||||
/>
|
||||
);
|
||||
case "community":
|
||||
|
||||
@@ -475,7 +475,7 @@ function migrateLegacyWorkflowData(old: Record<string, unknown>, wrapper: Record
|
||||
description: String(wrapper.description || ""),
|
||||
source: (wrapper.source as WebCanvasWorkflow["source"]) || "blank",
|
||||
settings: {
|
||||
model: String(isRecord(old.settings) ? old.settings.model || "Nano Banana Pro" : "Nano Banana Pro"),
|
||||
model: String(isRecord(old.settings) ? old.settings.model || "omni-水果 Pro" : "omni-水果 Pro"),
|
||||
ratio: String(isRecord(old.settings) ? old.settings.ratio || "1:1" : "1:1"),
|
||||
duration: String(isRecord(old.settings) ? old.settings.duration || "0s" : "0s"),
|
||||
resolution: String(isRecord(old.settings) ? old.settings.resolution || "2K" : "2K"),
|
||||
|
||||
@@ -19,6 +19,7 @@ import { ossAssets } from "../data/ossAssets";
|
||||
import { canManageCommunityCases, canReviewCommunity } from "../features/community-review/communityPermissions";
|
||||
import type { WebNavItem, WebNotification, WebUsageSummary, WebUserSession, WebViewKey } from "../types";
|
||||
import NotificationCenter from "./NotificationCenter";
|
||||
import BetaApplicationModal from "./BetaApplicationModal";
|
||||
import { RechargeModal } from "./RechargeModal/RechargeModal";
|
||||
import { AnimatedPanel } from "./AnimatedPanel";
|
||||
import AdminMonitor from "./AdminMonitor";
|
||||
@@ -68,6 +69,7 @@ function AppShell({
|
||||
const [profileOpen, setProfileOpen] = useState(false);
|
||||
const [rechargeOpen, setRechargeOpen] = useState(false);
|
||||
const [infoOpen, setInfoOpen] = useState(false);
|
||||
const [betaOpen, setBetaOpen] = useState(false);
|
||||
const infoRef = useRef<HTMLDivElement>(null);
|
||||
const [openSubmenuKey, setOpenSubmenuKey] = useState<WebViewKey | null>(null);
|
||||
const [publicConfig, setPublicConfig] = useState<WebPublicConfig>({});
|
||||
@@ -102,9 +104,9 @@ function AppShell({
|
||||
"canvas",
|
||||
"scriptTokens",
|
||||
"tokenUsage",
|
||||
"community",
|
||||
"assets",
|
||||
"more",
|
||||
"assets",
|
||||
"community",
|
||||
];
|
||||
return orderedKeys
|
||||
.map((key) => navItems.find((item) => item.key === key))
|
||||
@@ -335,6 +337,15 @@ function AppShell({
|
||||
<span className="brand-lockup__name">OmniAI</span>
|
||||
</button>
|
||||
<div className="web-topbar__actions">
|
||||
<button
|
||||
type="button"
|
||||
className="beta-apply-button"
|
||||
title="内测申请"
|
||||
aria-label="内测申请"
|
||||
onClick={() => setBetaOpen(true)}
|
||||
>
|
||||
内测申请
|
||||
</button>
|
||||
{session && (
|
||||
<NotificationCenter
|
||||
items={notifications}
|
||||
@@ -491,6 +502,7 @@ function AppShell({
|
||||
</div>
|
||||
{session?.user.role === "admin" ? <AdminMonitor /> : null}
|
||||
<RechargeModal open={rechargeOpen} onClose={() => setRechargeOpen(false)} currentBalance={displayedBalanceCents} />
|
||||
<BetaApplicationModal open={betaOpen} onClose={() => setBetaOpen(false)} />
|
||||
<CookieConsentBanner />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,283 @@
|
||||
import { CloseOutlined, ExperimentOutlined } from "@ant-design/icons";
|
||||
import { useState } from "react";
|
||||
|
||||
interface BetaApplicationModalProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
/* ── Form state ── */
|
||||
interface BetaFormData {
|
||||
name: string;
|
||||
phone: string;
|
||||
wechat: string;
|
||||
industry: string;
|
||||
company: string;
|
||||
city: string;
|
||||
aiTools: string;
|
||||
aiDuration: string;
|
||||
aiTrack: string;
|
||||
aiDirection: string[];
|
||||
weeklyUsage: string;
|
||||
feedbackWilling: string;
|
||||
wantFeature: string[];
|
||||
selfStatement: string;
|
||||
signature: string;
|
||||
agreeRules: boolean;
|
||||
}
|
||||
|
||||
const INITIAL_FORM: BetaFormData = {
|
||||
name: "",
|
||||
phone: "",
|
||||
wechat: "",
|
||||
industry: "",
|
||||
company: "",
|
||||
city: "",
|
||||
aiTools: "",
|
||||
aiDuration: "",
|
||||
aiTrack: "",
|
||||
aiDirection: [],
|
||||
weeklyUsage: "",
|
||||
feedbackWilling: "",
|
||||
wantFeature: [],
|
||||
selfStatement: "",
|
||||
signature: "",
|
||||
agreeRules: false,
|
||||
};
|
||||
|
||||
/* ── Option groups (from the docx) ── */
|
||||
const AI_DURATION_OPTIONS = ["1年以内", "1-3年", "3-5年", "5年以上"];
|
||||
const AI_TRACK_OPTIONS = ["是，长期承接相关业务", "业余创作", "新手学习"];
|
||||
const AI_DIRECTION_OPTIONS = [
|
||||
"AI短剧批量制作", "漫剧剧情生成", "自媒体短视频", "电商图文及视频素材",
|
||||
"MCN商业内容", "企业宣传视频", "个人兴趣创作", "其他",
|
||||
];
|
||||
const WEEKLY_USAGE_OPTIONS = ["7次及以上", "1-3次", "空闲时间使用"];
|
||||
const FEEDBACK_OPTIONS = ["全力配合深度反馈", "简单体验留言", "仅使用不反馈"];
|
||||
const WANT_FEATURE_OPTIONS = [
|
||||
"一站式短剧漫剧完整AIGC工作流", "电商素材自动化创作流程",
|
||||
"多模态智能中枢全能创作", "批量自动化创作流程", "全新未公开AI创作玩法",
|
||||
];
|
||||
|
||||
/* ── Helper: single-select radio group ── */
|
||||
function RadioGroup({
|
||||
name, options, value, onChange,
|
||||
}: {
|
||||
name: string;
|
||||
options: string[];
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="beta-radio-group">
|
||||
{options.map((opt) => (
|
||||
<label key={opt} className="beta-radio">
|
||||
<input
|
||||
type="radio"
|
||||
name={name}
|
||||
checked={value === opt}
|
||||
onChange={() => onChange(opt)}
|
||||
/>
|
||||
<span>{opt}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Helper: multi-select checkbox group ── */
|
||||
function CheckboxGroup({
|
||||
options, value, onChange,
|
||||
}: {
|
||||
options: string[];
|
||||
value: string[];
|
||||
onChange: (v: string[]) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="beta-checkbox-group">
|
||||
{options.map((opt) => (
|
||||
<label key={opt} className="beta-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={value.includes(opt)}
|
||||
onChange={() => {
|
||||
if (value.includes(opt)) {
|
||||
onChange(value.filter((item) => item !== opt));
|
||||
} else {
|
||||
onChange([...value, opt]);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<span>{opt}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Helper: text field ── */
|
||||
function TextField({
|
||||
label, value, onChange, placeholder,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
placeholder?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="beta-text-field">
|
||||
<span className="beta-text-field__label">{label}</span>
|
||||
<input
|
||||
type="text"
|
||||
className="beta-text-field__input"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder ?? "请填写"}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const BetaApplicationModal = ({ open, onClose }: BetaApplicationModalProps) => {
|
||||
const [form, setForm] = useState<BetaFormData>(INITIAL_FORM);
|
||||
|
||||
const update = <K extends keyof BetaFormData>(key: K, value: BetaFormData[K]) => {
|
||||
setForm((prev) => ({ ...prev, [key]: value }));
|
||||
};
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
return (
|
||||
<div className="beta-application-modal" role="dialog" aria-modal="true" aria-labelledby="beta-modal-title">
|
||||
<button type="button" className="beta-application-modal__backdrop" onClick={onClose} aria-label="关闭内测申请弹窗" />
|
||||
|
||||
<section className="beta-application-modal__panel">
|
||||
{/* ── Header ── */}
|
||||
<header className="beta-modal-header">
|
||||
<div className="beta-modal-header__left">
|
||||
<ExperimentOutlined className="beta-modal-header__icon" />
|
||||
<div>
|
||||
<h2 id="beta-modal-title">OmniAI 内测体验官申请表</h2>
|
||||
<p className="beta-modal-header__subtitle">封闭限量内测 · 仅限 <strong>30 人</strong> · 赠送 <strong>500 元</strong> 通用调用积分</p>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" className="beta-modal-header__close" onClick={onClose} aria-label="关闭">
|
||||
<CloseOutlined />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{/* ── Body (scrollable document) ── */}
|
||||
<div className="beta-modal-body">
|
||||
|
||||
{/* 一、个人基础信息 */}
|
||||
<section className="beta-doc-section">
|
||||
<h3 className="beta-doc-section__title">一、个人基础信息</h3>
|
||||
<div className="beta-doc-grid">
|
||||
<TextField label="姓名 / 常用昵称" value={form.name} onChange={(v) => update("name", v)} />
|
||||
<TextField label="联系手机号码" value={form.phone} onChange={(v) => update("phone", v)} />
|
||||
<TextField label="微信账号" value={form.wechat} onChange={(v) => update("wechat", v)} />
|
||||
<TextField label="所在行业 / 职业" value={form.industry} onChange={(v) => update("industry", v)} />
|
||||
<TextField label="所属公司 / 机构" value={form.company} onChange={(v) => update("company", v)} />
|
||||
<TextField label="所在城市" value={form.city} onChange={(v) => update("city", v)} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 二、AI从业与使用经历 */}
|
||||
<section className="beta-doc-section">
|
||||
<h3 className="beta-doc-section__title">二、AI 从业与使用经历</h3>
|
||||
<div className="beta-doc-grid">
|
||||
<TextField label="日常常用 AI 创作工具有哪些" value={form.aiTools} onChange={(v) => update("aiTools", v)} placeholder="例如：Midjourney / Stable Diffusion / ChatGPT 等" />
|
||||
<div className="beta-form-group">
|
||||
<span className="beta-form-group__label">AI 内容创作从业时长</span>
|
||||
<RadioGroup name="aiDuration" options={AI_DURATION_OPTIONS} value={form.aiDuration} onChange={(v) => update("aiDuration", v)} />
|
||||
</div>
|
||||
<div className="beta-form-group">
|
||||
<span className="beta-form-group__label">是否深耕 AI 短剧、漫剧、数字视频、电商赛道</span>
|
||||
<RadioGroup name="aiTrack" options={AI_TRACK_OPTIONS} value={form.aiTrack} onChange={(v) => update("aiTrack", v)} />
|
||||
</div>
|
||||
<div className="beta-form-group beta-form-group--full">
|
||||
<span className="beta-form-group__label">日常主要创作方向（可多选）</span>
|
||||
<CheckboxGroup options={AI_DIRECTION_OPTIONS} value={form.aiDirection} onChange={(v) => update("aiDirection", v)} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 三、内测使用意向调研 */}
|
||||
<section className="beta-doc-section">
|
||||
<h3 className="beta-doc-section__title">三、内测使用意向调研</h3>
|
||||
<div className="beta-doc-grid">
|
||||
<div className="beta-form-group">
|
||||
<span className="beta-form-group__label">每周可稳定登录使用内测平台次数</span>
|
||||
<RadioGroup name="weeklyUsage" options={WEEKLY_USAGE_OPTIONS} value={form.weeklyUsage} onChange={(v) => update("weeklyUsage", v)} />
|
||||
</div>
|
||||
<div className="beta-form-group">
|
||||
<span className="beta-form-group__label">是否愿意积极反馈产品 BUG、优化建议、功能需求</span>
|
||||
<RadioGroup name="feedback" options={FEEDBACK_OPTIONS} value={form.feedbackWilling} onChange={(v) => update("feedbackWilling", v)} />
|
||||
</div>
|
||||
<div className="beta-form-group beta-form-group--full">
|
||||
<span className="beta-form-group__label">本次最想体验 OmniAI 核心功能（可多选）</span>
|
||||
<CheckboxGroup options={WANT_FEATURE_OPTIONS} value={form.wantFeature} onChange={(v) => update("wantFeature", v)} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 四、申请自述 */}
|
||||
<section className="beta-doc-section">
|
||||
<h3 className="beta-doc-section__title">四、申请自述 <em className="beta-required">（必填）</em></h3>
|
||||
<p className="beta-doc-section__desc">请简述自身 AI 创作优势、业务需求，以及加入本次封闭内测的理由：</p>
|
||||
<textarea
|
||||
className="beta-textarea"
|
||||
value={form.selfStatement}
|
||||
onChange={(e) => update("selfStatement", e.target.value)}
|
||||
placeholder="请在此填写您的申请自述（必填）…"
|
||||
rows={6}
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* 五、内测规则知情同意书 */}
|
||||
<section className="beta-doc-section">
|
||||
<h3 className="beta-doc-section__title">五、内测规则知情同意书</h3>
|
||||
<ol className="beta-rules-list">
|
||||
<li>本次为封闭限量内测，仅限 <strong>30 人</strong>，按照资质匹配度 + 申请顺序筛选；</li>
|
||||
<li>内测赠送 <strong>500 元</strong> 通用调用积分，仅限内测期间使用，不可提现、不可转让、不可兑换现金；</li>
|
||||
<li>内测版本含未上线测试功能，存在功能不稳定、界面调整、参数优化等情况，申请人自愿理解包容；</li>
|
||||
<li>严禁私自泄露内测专属工作流、内部功能、测试接口、未发布技术方案等内部资料；</li>
|
||||
<li>审核通过后，官方将在 <strong>48 小时</strong> 内发放内测账号、登录权限及免费积分；</li>
|
||||
<li>正式版上线后，优质内测体验官可享受专属永久优惠权限与平台荣誉称号。</li>
|
||||
</ol>
|
||||
|
||||
<label className="beta-agree-row">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={form.agreeRules}
|
||||
onChange={(e) => update("agreeRules", e.target.checked)}
|
||||
/>
|
||||
<span>本人已完整阅读并同意以上全部内测规则，自愿遵守内测所有管理要求。</span>
|
||||
</label>
|
||||
|
||||
<div className="beta-doc-grid beta-doc-grid--two">
|
||||
<TextField label="申请人确认签字" value={form.signature} onChange={(v) => update("signature", v)} placeholder="请签署姓名" />
|
||||
<div className="beta-text-field">
|
||||
<span className="beta-text-field__label">申请填写日期</span>
|
||||
<input type="text" className="beta-text-field__input" value="2026年 月 日" readOnly />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
{/* ── Footer ── */}
|
||||
<footer className="beta-modal-footer">
|
||||
<button type="button" className="beta-modal-footer__btn beta-modal-footer__btn--secondary" onClick={onClose}>
|
||||
关闭
|
||||
</button>
|
||||
<button type="button" className="beta-modal-footer__btn beta-modal-footer__btn--primary" onClick={onClose}>
|
||||
提交申请
|
||||
</button>
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BetaApplicationModal;
|
||||
@@ -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}
|
||||
|
||||
@@ -58,13 +58,13 @@ export const defaultTextModelId = textModelOptions[0].id;
|
||||
|
||||
// --- Image model options ---
|
||||
export const imageModelOptions: CanvasOption[] = [
|
||||
{ value: "wan2.7-image", label: "wan 2.7 · 0.20 积分" },
|
||||
{ value: "wan2.7-image-pro", label: "wan 2.7 Pro · 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", label: "wan 2.7" },
|
||||
{ value: "wan2.7-image-pro", label: "wan 2.7 Pro" },
|
||||
{ value: "gpt-image-2", label: "omni-GPT" },
|
||||
{ value: "gpt-image-2-vip", label: "omni-GPT VIP" },
|
||||
{ value: "nano-banana-pro", label: "omni-水果 Pro" },
|
||||
{ value: "nano-banana-2", label: "omni-水果 2" },
|
||||
{ value: "nano-banana-fast", label: "omni-水果" },
|
||||
];
|
||||
|
||||
export const imageRatioOptions: CanvasOption[] = [
|
||||
@@ -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);
|
||||
@@ -827,6 +839,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
const skipInitialCloneAutoSaveRef = useRef(true);
|
||||
const skipNextCloneAutoSaveRef = useRef(false);
|
||||
const [activeTool, setActiveTool] = useState<ProductKitToolKey>("clone");
|
||||
useEffect(() => { setPreviewZoom(1); }, [activeTool]);
|
||||
const [setImages, setSetImages] = useState<CloneImageItem[]>([]);
|
||||
const [productSetPlatform, setProductSetPlatform] = useState(platformOptions[0]);
|
||||
const [productSetMarket, setProductSetMarket] = useState(marketOptions[0]);
|
||||
@@ -866,6 +879,31 @@ 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 handlePreviewWheel = (event: React.WheelEvent<HTMLElement>) => {
|
||||
if (!event.currentTarget) return;
|
||||
event.preventDefault();
|
||||
const container = event.currentTarget as HTMLElement;
|
||||
const rect = container.getBoundingClientRect();
|
||||
const cursorX = event.clientX - rect.left;
|
||||
const cursorY = event.clientY - rect.top;
|
||||
const zoomDelta = event.deltaY < 0 ? 1.08 : 0.92;
|
||||
|
||||
const nextZoom = Math.min(2, Math.max(0.25, previewZoom * zoomDelta));
|
||||
if (nextZoom === previewZoom) return;
|
||||
|
||||
const contentX = (cursorX + container.scrollLeft) / previewZoom;
|
||||
const contentY = (cursorY + container.scrollTop) / previewZoom;
|
||||
|
||||
setPreviewZoom(nextZoom);
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
container.scrollLeft = contentX * nextZoom - cursorX;
|
||||
container.scrollTop = contentY * nextZoom - cursorY;
|
||||
});
|
||||
};
|
||||
|
||||
const [requirement, setRequirement] = useState("");
|
||||
const [requirementImageMentionQuery, setRequirementImageMentionQuery] = useState<string | null>(null);
|
||||
const [cloneSettingName, setCloneSettingName] = useState("新建创作");
|
||||
@@ -1087,6 +1125,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 +1632,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 +1642,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 +1679,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 +1726,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 +2049,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 +2163,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}
|
||||
@@ -2207,7 +2276,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
);
|
||||
|
||||
const setPreview = (
|
||||
<main className="product-clone-preview product-clone-preview--set" aria-label="AI商品套图预览">
|
||||
<main className="product-clone-preview product-clone-preview--set" aria-label="AI商品套图预览" onWheel={handlePreviewWheel}>
|
||||
<div className="product-clone-preview__headline">
|
||||
<h1>预览</h1>
|
||||
<p>
|
||||
@@ -2275,12 +2344,17 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
);
|
||||
|
||||
const clonePreview = (
|
||||
<main className="product-clone-preview clone-ai-preview" aria-label="电商AI作图预览">
|
||||
<main className="product-clone-preview clone-ai-preview" aria-label="电商AI作图预览" onWheel={handlePreviewWheel}>
|
||||
<header className="clone-ai-preview-header">
|
||||
<strong>预览</strong>
|
||||
<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 +2477,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 +2487,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 />}
|
||||
@@ -2478,7 +2554,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
);
|
||||
|
||||
const detailPreview = (
|
||||
<main className="product-clone-preview product-clone-preview--detail" aria-label="A+详情预览">
|
||||
<main className="product-clone-preview product-clone-preview--detail" aria-label="A+详情预览" onWheel={handlePreviewWheel}>
|
||||
<div className="product-clone-preview__headline">
|
||||
<h1>A+/详情页</h1>
|
||||
<p>
|
||||
@@ -2515,7 +2591,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
);
|
||||
|
||||
const tryOnPreview = (
|
||||
<main className="product-clone-preview product-clone-preview--try-on" aria-label="服饰穿戴预览">
|
||||
<main className="product-clone-preview product-clone-preview--try-on" aria-label="服饰穿戴预览" onWheel={handlePreviewWheel}>
|
||||
<div className="product-clone-preview__headline">
|
||||
<h1>AI服饰穿戴</h1>
|
||||
<p>上传服装图，定制专属模特，即刻生成多种场景不同姿势套图。</p>
|
||||
@@ -2613,7 +2689,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>
|
||||
)}
|
||||
|
||||
|
||||
+153
-31
@@ -12,7 +12,7 @@ import {
|
||||
ThunderboltOutlined,
|
||||
VideoCameraOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import type { ReactNode } from "react";
|
||||
import type { CSSProperties, ReactNode } from "react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import type { WebImageWorkbenchTool, WebViewKey } from "../../types";
|
||||
|
||||
@@ -28,6 +28,8 @@ interface MoreTool {
|
||||
id: string;
|
||||
title: string;
|
||||
text: string;
|
||||
useCase: string;
|
||||
tags: string[];
|
||||
icon: ReactNode;
|
||||
category: ToolCategory;
|
||||
target?: WebViewKey;
|
||||
@@ -37,23 +39,77 @@ interface MoreTool {
|
||||
featured?: boolean;
|
||||
}
|
||||
|
||||
type CompareScene =
|
||||
| "workbench"
|
||||
| "inpaint"
|
||||
| "camera"
|
||||
| "upscale"
|
||||
| "watermark"
|
||||
| "dialog"
|
||||
| "subtitle"
|
||||
| "digital-human"
|
||||
| "character"
|
||||
| "avatar";
|
||||
|
||||
const toolCompareScenes: Record<string, CompareScene> = {
|
||||
workbench: "workbench",
|
||||
inpaint: "inpaint",
|
||||
camera: "camera",
|
||||
upscale: "upscale",
|
||||
watermarkRemoval: "watermark",
|
||||
dialogGenerator: "dialog",
|
||||
subtitleRemoval: "subtitle",
|
||||
digitalHuman: "digital-human",
|
||||
characterMix: "character",
|
||||
avatarConsole: "avatar",
|
||||
};
|
||||
|
||||
function ToolComparePanel({ scene }: { scene: CompareScene }) {
|
||||
return (
|
||||
<span className={`more-card__compare more-card__compare--${scene}`} aria-hidden="true">
|
||||
<span className="more-card__compare-labels">
|
||||
<span>Before</span>
|
||||
<span>After</span>
|
||||
</span>
|
||||
<span className="more-card__compare-stage">
|
||||
<span className="more-card__compare-side more-card__compare-side--before">
|
||||
<span className="more-card__scene-subject" />
|
||||
<span className="more-card__scene-detail" />
|
||||
<span className="more-card__scene-overlay" />
|
||||
</span>
|
||||
<span className="more-card__compare-divider">
|
||||
<span />
|
||||
</span>
|
||||
<span className="more-card__compare-side more-card__compare-side--after">
|
||||
<span className="more-card__scene-subject" />
|
||||
<span className="more-card__scene-detail" />
|
||||
<span className="more-card__scene-overlay" />
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const tools: MoreTool[] = [
|
||||
{ id: "workbench", title: "图片工作台", text: "融合、修复、局部增强", icon: <EditOutlined />, category: "image", imageTool: "workbench", ready: true, featured: true },
|
||||
{ id: "inpaint", title: "局部重绘", text: "遮罩区域重新生成", icon: <HighlightOutlined />, category: "image", imageTool: "inpaint", ready: true },
|
||||
{ id: "camera", title: "镜头实验室", text: "角度、焦段和机位控制", icon: <CameraOutlined />, category: "image", imageTool: "camera", ready: true },
|
||||
{ id: "upscale", title: "分辨率提升", text: "图片与视频高清超分", icon: <ColumnWidthOutlined />, category: "image", target: "resolutionUpscale", ready: true },
|
||||
{ id: "watermarkRemoval", title: "去水印", text: "AI 智能去除图片水印和文字", icon: <DeleteOutlined />, category: "image", target: "watermarkRemoval", ready: true },
|
||||
{ id: "dialogGenerator", title: "交互式对话框生成器", text: "上传背景图，添加可拖拽编辑的对话框", icon: <MessageOutlined />, category: "image", target: "dialogGenerator", ready: true },
|
||||
{ id: "subtitleRemoval", title: "字幕去除", text: "AI 智能擦除视频字幕", icon: <DeleteOutlined />, category: "video", target: "subtitleRemoval", ready: true },
|
||||
{ id: "digitalHuman", title: "数字人", text: "参考人像与音频生成口播视频", icon: <CustomerServiceOutlined />, category: "video", target: "digitalHuman", ready: true, featured: true },
|
||||
{ id: "characterMix", title: "角色迁移", text: "人物图迁移到参考视频动作", icon: <SwapOutlined />, category: "video", target: "characterMix", ready: true },
|
||||
{ id: "avatarConsole", title: "数字人控制台", text: "形象、播报、互动与接入配置", icon: <DashboardOutlined />, category: "video", target: "avatarConsole", ready: true },
|
||||
{ id: "workbench", title: "图片工作台", text: "融合、修复、局部增强", useCase: "适合商品图精修、创意合成和局部画面重做", tags: ["热门", "一站式", "商品图"], icon: <EditOutlined />, category: "image", imageTool: "workbench", ready: true, featured: true },
|
||||
{ id: "inpaint", title: "局部重绘", text: "修掉瑕疵、替换物体、重做局部画面", useCase: "适合快速处理商品瑕疵、人物细节和背景杂物", tags: ["新手推荐", "精修"], icon: <HighlightOutlined />, category: "image", imageTool: "inpaint", ready: true },
|
||||
{ id: "camera", title: "镜头实验室", text: "快速生成俯拍、特写、广角等商业镜头", useCase: "适合做产品主图、种草图和不同机位方案", tags: ["电商常用", "镜头"], icon: <CameraOutlined />, category: "image", imageTool: "camera", ready: true },
|
||||
{ id: "upscale", title: "分辨率提升", text: "把低清图片或视频提升到可交付质感", useCase: "适合修复旧素材、放大商品图和增强短视频清晰度", tags: ["高清", "交付前"], icon: <ColumnWidthOutlined />, category: "image", target: "resolutionUpscale", ready: true },
|
||||
{ id: "watermarkRemoval", title: "去水印", text: "智能去除图片水印、文字和遮挡元素", useCase: "适合整理素材、清理参考图和恢复画面干净度", tags: ["素材清理", "高频"], icon: <DeleteOutlined />, category: "image", target: "watermarkRemoval", ready: true },
|
||||
{ id: "dialogGenerator", title: "交互式对话框生成器", text: "上传背景图，快速制作可拖拽编辑的对话框", useCase: "适合剧情海报、社媒截图和角色对白设计", tags: ["内容创作", "可编辑"], icon: <MessageOutlined />, category: "image", target: "dialogGenerator", ready: true },
|
||||
{ id: "subtitleRemoval", title: "字幕去除", text: "擦除视频字幕，让画面重新变干净", useCase: "适合二创前素材整理、短视频重剪和画面修复", tags: ["视频增强", "素材清理"], icon: <DeleteOutlined />, category: "video", target: "subtitleRemoval", ready: true },
|
||||
{ id: "digitalHuman", title: "数字人", text: "用一张人像和音频生成口播视频", useCase: "适合品牌讲解、课程口播和带货短视频", tags: ["热门", "口播", "视频"], icon: <CustomerServiceOutlined />, category: "video", target: "digitalHuman", ready: true, featured: true },
|
||||
{ id: "characterMix", title: "角色迁移", text: "把人物图迁移到参考视频的动作里", useCase: "适合角色短片、动作复刻和虚拟人内容生产", tags: ["角色视频", "动作"], icon: <SwapOutlined />, category: "video", target: "characterMix", ready: true },
|
||||
{ id: "avatarConsole", title: "数字人控制台", text: "管理形象、播报、互动与接入配置", useCase: "适合持续运营数字人、配置品牌形象和复用口播模板", tags: ["运营台", "企业"], icon: <DashboardOutlined />, category: "video", target: "avatarConsole", ready: true },
|
||||
];
|
||||
|
||||
interface FeaturedTool {
|
||||
id: string;
|
||||
title: string;
|
||||
desc: string;
|
||||
kicker: string;
|
||||
steps: string[];
|
||||
outcome: string;
|
||||
icon: ReactNode;
|
||||
imageTool?: WebImageWorkbenchTool;
|
||||
target?: WebViewKey;
|
||||
@@ -65,7 +121,10 @@ const featuredTools: FeaturedTool[] = [
|
||||
{
|
||||
id: "workbench",
|
||||
title: "图片工作台",
|
||||
desc: "融合、修复、局部增强 — 一站式图片创作",
|
||||
desc: "从一张素材开始，完成精修、合成和二次创作。",
|
||||
kicker: "图片精修工作流",
|
||||
steps: ["上传素材", "局部修复", "高清导出"],
|
||||
outcome: "适合商品图、海报图和创意视觉",
|
||||
icon: <EditOutlined />,
|
||||
imageTool: "workbench",
|
||||
category: "image",
|
||||
@@ -74,7 +133,10 @@ const featuredTools: FeaturedTool[] = [
|
||||
{
|
||||
id: "digitalHuman",
|
||||
title: "数字人",
|
||||
desc: "参考人像与音频，一键生成口播视频",
|
||||
desc: "用参考人像和音频，快速生成可交付口播视频。",
|
||||
kicker: "口播视频工作流",
|
||||
steps: ["选择人像", "上传音频", "生成视频"],
|
||||
outcome: "适合品牌讲解、课程和带货短视频",
|
||||
icon: <CustomerServiceOutlined />,
|
||||
target: "digitalHuman",
|
||||
category: "video",
|
||||
@@ -136,6 +198,18 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
|
||||
}
|
||||
}, [onOpenImageTool, onSelectView]);
|
||||
|
||||
const openFeaturedTool = useCallback((tool: FeaturedTool) => {
|
||||
pushRecentToolId(tool.id);
|
||||
setRecentIds(getRecentToolIds());
|
||||
if (tool.imageTool && onOpenImageTool) {
|
||||
onOpenImageTool(tool.imageTool);
|
||||
return;
|
||||
}
|
||||
if (tool.target && onSelectView) {
|
||||
onSelectView(tool.target);
|
||||
}
|
||||
}, [onOpenImageTool, onSelectView]);
|
||||
|
||||
const filteredTools = tools.filter((t) => {
|
||||
if (t.featured) return false;
|
||||
if (filter === "all") return true;
|
||||
@@ -143,6 +217,13 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
|
||||
return t.category === filter;
|
||||
});
|
||||
|
||||
const filterCounts: Record<FilterKey, number> = {
|
||||
all: tools.filter((t) => !t.featured).length,
|
||||
image: tools.filter((t) => !t.featured && t.category === "image").length,
|
||||
video: tools.filter((t) => !t.featured && t.category === "video").length,
|
||||
upcoming: tools.filter((t) => !t.featured && !t.ready).length,
|
||||
};
|
||||
|
||||
const recentTools = recentIds
|
||||
.map((id) => tools.find((t) => t.id === id))
|
||||
.filter((t): t is MoreTool => Boolean(t) && (t?.ready ?? false));
|
||||
@@ -153,19 +234,31 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
|
||||
return acc;
|
||||
}, {} as Record<ToolCategory, MoreTool[]>);
|
||||
|
||||
const activeFilterLabel = filters.find((item) => item.key === filter)?.label ?? "全部";
|
||||
const hasGroupedTools = (["image", "video"] as ToolCategory[]).some((cat) => groupedTools[cat]?.length);
|
||||
|
||||
return (
|
||||
<div className="more-page-v2">
|
||||
<header className="more-page-v2__header">
|
||||
<h1>工具盒</h1>
|
||||
<nav className="more-page-v2__filters">
|
||||
<div className="more-page-v2__title-group">
|
||||
<span className="more-page-v2__eyebrow">AI Tool Hub</span>
|
||||
<h1>工具盒</h1>
|
||||
</div>
|
||||
<div className="more-page-v2__header-meta" aria-label="工具盒概览">
|
||||
<span>{tools.filter((tool) => tool.ready).length} 个可用工具</span>
|
||||
<span>{featuredTools.length} 个核心入口</span>
|
||||
</div>
|
||||
<nav className="more-page-v2__filters" aria-label="工具分类筛选">
|
||||
{filters.map((f) => (
|
||||
<button
|
||||
key={f.key}
|
||||
type="button"
|
||||
className={filter === f.key ? "is-active" : ""}
|
||||
aria-pressed={filter === f.key}
|
||||
onClick={() => setFilter(f.key)}
|
||||
>
|
||||
{f.label}
|
||||
<span>{f.label}</span>
|
||||
<em>{filterCounts[f.key]}</em>
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
@@ -176,6 +269,7 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
|
||||
<section className="more-page-v2__section">
|
||||
<h2 className="more-page-v2__section-title">
|
||||
<ClockCircleOutlined /> 最近使用
|
||||
<span>继续使用</span>
|
||||
</h2>
|
||||
<div className="more-page-v2__recent-row">
|
||||
{recentTools.map((tool) => (
|
||||
@@ -183,10 +277,14 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
|
||||
key={tool.id}
|
||||
type="button"
|
||||
className="more-card more-card--recent"
|
||||
aria-label={`打开最近使用工具：${tool.title}`}
|
||||
onClick={() => openTool(tool)}
|
||||
>
|
||||
<span className="more-card__icon">{tool.icon}</span>
|
||||
<strong>{tool.title}</strong>
|
||||
<span className="more-card__recent-body">
|
||||
<strong>{tool.title}</strong>
|
||||
<small>{categoryLabels[tool.category]}</small>
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
@@ -204,23 +302,22 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
|
||||
key={tool.id}
|
||||
type="button"
|
||||
className="more-card more-card--featured"
|
||||
style={{ "--card-gradient": tool.gradient } as React.CSSProperties}
|
||||
onClick={() => {
|
||||
pushRecentToolId(tool.id);
|
||||
setRecentIds(getRecentToolIds());
|
||||
if (tool.imageTool && onOpenImageTool) {
|
||||
onOpenImageTool(tool.imageTool);
|
||||
return;
|
||||
}
|
||||
if (tool.target && onSelectView) {
|
||||
onSelectView(tool.target);
|
||||
}
|
||||
}}
|
||||
style={{ "--card-gradient": tool.gradient } as CSSProperties}
|
||||
aria-label={`打开核心工具：${tool.title}，${tool.desc}`}
|
||||
onClick={() => openFeaturedTool(tool)}
|
||||
>
|
||||
<span className="more-card__featured-icon">{tool.icon}</span>
|
||||
<div className="more-card__featured-body">
|
||||
<span className="more-card__featured-kicker">{tool.kicker}</span>
|
||||
<strong>{tool.title}</strong>
|
||||
<span>{tool.desc}</span>
|
||||
<ToolComparePanel scene={toolCompareScenes[tool.id]} />
|
||||
<span className="more-card__featured-desc">{tool.desc}</span>
|
||||
<span className="more-card__steps" aria-hidden="true">
|
||||
{tool.steps.map((step) => (
|
||||
<span key={step}>{step}</span>
|
||||
))}
|
||||
</span>
|
||||
<span className="more-card__outcome">{tool.outcome}</span>
|
||||
<span className="more-card__cta">开始使用 →</span>
|
||||
</div>
|
||||
</button>
|
||||
@@ -229,13 +326,14 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
|
||||
</section>
|
||||
)}
|
||||
|
||||
{(["image", "video", "template"] as ToolCategory[]).map((cat) => {
|
||||
{(["image", "video"] as ToolCategory[]).map((cat) => {
|
||||
const group = groupedTools[cat];
|
||||
if (!group || group.length === 0) return null;
|
||||
return (
|
||||
<section key={cat} className="more-page-v2__section">
|
||||
<h2 className="more-page-v2__section-title">
|
||||
{categoryIcons[cat]} {categoryLabels[cat]}
|
||||
<span>{group.length}</span>
|
||||
</h2>
|
||||
<div className="more-page-v2__grid">
|
||||
{group.map((tool) => (
|
||||
@@ -243,12 +341,21 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
|
||||
key={tool.id}
|
||||
type="button"
|
||||
className={`more-card${tool.ready ? " more-card--ready" : " more-card--pending"}`}
|
||||
aria-label={tool.ready ? `打开工具：${tool.title}，${tool.text}` : `${tool.title}暂未开放`}
|
||||
onClick={() => openTool(tool)}
|
||||
disabled={!tool.ready}
|
||||
>
|
||||
<span className="more-card__icon">{tool.icon}</span>
|
||||
<span className="more-card__topline">
|
||||
{tool.tags.slice(0, 2).map((tag) => (
|
||||
<span key={tag}>{tag}</span>
|
||||
))}
|
||||
</span>
|
||||
<strong>{tool.title}</strong>
|
||||
<ToolComparePanel scene={toolCompareScenes[tool.id]} />
|
||||
<span className="more-card__desc">{tool.text}</span>
|
||||
<span className="more-card__use-case">{tool.useCase}</span>
|
||||
<span className="more-card__action">打开工具 →</span>
|
||||
{tool.badge && <span className="more-card__badge">{tool.badge}</span>}
|
||||
</button>
|
||||
))}
|
||||
@@ -256,6 +363,21 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
|
||||
</section>
|
||||
);
|
||||
})}
|
||||
|
||||
{!hasGroupedTools && (
|
||||
<section className="more-page-v2__section">
|
||||
<div className="more-page-v2__empty">
|
||||
<span className="more-page-v2__empty-icon">
|
||||
<ClockCircleOutlined />
|
||||
</span>
|
||||
<strong>{activeFilterLabel}工具正在整理中</strong>
|
||||
<p>当前分类暂无可展示入口，后续能力上线后会在这里集中呈现。</p>
|
||||
<button type="button" className="more-page-v2__empty-action" onClick={() => setFilter("all")}>
|
||||
查看全部可用工具
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -4,6 +4,7 @@ import {
|
||||
CheckCircleFilled,
|
||||
CloseOutlined,
|
||||
DeleteOutlined,
|
||||
DownloadOutlined,
|
||||
EditOutlined,
|
||||
FileImageOutlined,
|
||||
FolderOpenOutlined,
|
||||
@@ -17,7 +18,8 @@ import {
|
||||
ShareAltOutlined,
|
||||
UserOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { useEffect, useRef, useState, type ChangeEvent, type FormEvent } from "react";
|
||||
import { useEffect, useRef, useState, type ChangeEvent, type FormEvent, type KeyboardEvent } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { aiGenerationClient } from "../../api/aiGenerationClient";
|
||||
import { assetClient } from "../../api/assetClient";
|
||||
import { communityClient, type ServerCommunityCase } from "../../api/communityClient";
|
||||
@@ -26,6 +28,7 @@ import { isServerRequestError } from "../../api/serverConnection";
|
||||
import { ossAssets } from "../../data/ossAssets";
|
||||
import type { WebAuthMode, WebGenerationPreviewTask, WebProjectSummary, WebUsageSummary, WebUserSession } from "../../types";
|
||||
import type { SavedAssetItem } from "../assets/localAssetStore";
|
||||
import { downloadResultAsset } from "../workbench/workbenchDownload";
|
||||
|
||||
interface ProfilePageProps {
|
||||
session: WebUserSession | null;
|
||||
@@ -41,11 +44,16 @@ interface ProfilePageProps {
|
||||
onOpenWorkbench: () => void;
|
||||
onOpenCommunity: () => void;
|
||||
onDeleteProject?: (project: WebProjectSummary) => void;
|
||||
onOpenProject?: (project: WebProjectSummary) => void;
|
||||
onRemoveWork?: (task: WebGenerationPreviewTask) => void;
|
||||
}
|
||||
|
||||
type AuthTab = "password" | "email" | "phone";
|
||||
type ProfilePanel = "works" | "projects" | "assets" | "community";
|
||||
type AccountPanel = "credits" | "tasks";
|
||||
type ProfileDetailSelection =
|
||||
| { kind: "work"; item: WebGenerationPreviewTask }
|
||||
| { kind: "asset"; item: SavedAssetItem };
|
||||
|
||||
const PROFILE_LOCAL_STORAGE_PREFIX = "omniai-web-profile-ui";
|
||||
const AUTH_LOGO_URL = ossAssets.brand.logo;
|
||||
@@ -210,6 +218,8 @@ function ProfilePage({
|
||||
onOpenWorkbench,
|
||||
onOpenCommunity,
|
||||
onDeleteProject,
|
||||
onOpenProject,
|
||||
onRemoveWork,
|
||||
}: ProfilePageProps) {
|
||||
const isLoggedIn = Boolean(session);
|
||||
const userId = session?.user.id;
|
||||
@@ -253,6 +263,10 @@ function ProfilePage({
|
||||
const [bioEditBackup, setBioEditBackup] = useState("");
|
||||
const [bioStatusNotice, setBioStatusNotice] = useState<string | null>(null);
|
||||
const [bannerUrl, setBannerUrl] = useState(() => session?.user.backgroundUrl || readLocalProfileValue(userId, "background"));
|
||||
const [detailSelection, setDetailSelection] = useState<ProfileDetailSelection | null>(null);
|
||||
const [detailNotice, setDetailNotice] = useState<string | null>(null);
|
||||
const [isDeletingDetail, setIsDeletingDetail] = useState(false);
|
||||
const [isDownloadingDetail, setIsDownloadingDetail] = useState(false);
|
||||
|
||||
const completedTasks = tasks.filter((task) => task.status === "completed");
|
||||
const visibleWorks = completedTasks.length ? completedTasks : tasks.slice(0, 6);
|
||||
@@ -635,6 +649,213 @@ function ProfilePage({
|
||||
setBioStatusNotice(null);
|
||||
};
|
||||
|
||||
const handleInteractiveCardKeyDown = (event: KeyboardEvent<HTMLElement>, action: () => void) => {
|
||||
if (event.target !== event.currentTarget) return;
|
||||
if (event.key !== "Enter" && event.key !== " ") return;
|
||||
event.preventDefault();
|
||||
action();
|
||||
};
|
||||
|
||||
const openDetailSelection = (selection: ProfileDetailSelection) => {
|
||||
setDetailNotice(null);
|
||||
setIsDeletingDetail(false);
|
||||
setIsDownloadingDetail(false);
|
||||
setDetailSelection(selection);
|
||||
};
|
||||
|
||||
const closeDetailSelection = () => {
|
||||
if (isDeletingDetail || isDownloadingDetail) return;
|
||||
setDetailSelection(null);
|
||||
setDetailNotice(null);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!detailSelection) return undefined;
|
||||
const handleKeyDown = (event: globalThis.KeyboardEvent) => {
|
||||
if (event.key === "Escape") closeDetailSelection();
|
||||
};
|
||||
window.addEventListener("keydown", handleKeyDown);
|
||||
return () => window.removeEventListener("keydown", handleKeyDown);
|
||||
}, [detailSelection, isDeletingDetail, isDownloadingDetail]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!detailSelection || typeof document === "undefined") return undefined;
|
||||
|
||||
const { body, documentElement } = document;
|
||||
const previousBodyOverflow = body.style.overflow;
|
||||
const previousRootOverscroll = documentElement.style.overscrollBehavior;
|
||||
|
||||
body.style.overflow = "hidden";
|
||||
documentElement.style.overscrollBehavior = "contain";
|
||||
|
||||
return () => {
|
||||
body.style.overflow = previousBodyOverflow;
|
||||
documentElement.style.overscrollBehavior = previousRootOverscroll;
|
||||
};
|
||||
}, [detailSelection]);
|
||||
|
||||
const handleDownloadSelectedDetail = async () => {
|
||||
if (!detailSelection || isDownloadingDetail) return;
|
||||
|
||||
const isWork = detailSelection.kind === "work";
|
||||
const item = detailSelection.item;
|
||||
const url = isWork ? item.outputUrl : item.imageUrl || item.url || "";
|
||||
if (!url) {
|
||||
setDetailNotice("暂无可下载的媒体文件");
|
||||
return;
|
||||
}
|
||||
|
||||
const isVideo = isWork ? item.type === "video" : item.type === "video" || /\.(mp4|webm|mov|m4v)(\?|#|$)/i.test(url);
|
||||
const taskId = isWork ? item.id : item.sourceTaskId || undefined;
|
||||
const name = isWork ? item.title : item.name;
|
||||
|
||||
setIsDownloadingDetail(true);
|
||||
setDetailNotice("正在准备下载...");
|
||||
try {
|
||||
const status = await downloadResultAsset(url, name, isVideo, taskId);
|
||||
setDetailNotice(status === "saved" ? "已保存到本地" : "已开始保存到本地");
|
||||
} catch (error) {
|
||||
if (error instanceof DOMException && error.name === "AbortError") {
|
||||
setDetailNotice("已取消下载");
|
||||
} else {
|
||||
setDetailNotice(error instanceof Error ? error.message : "下载失败，请稍后重试");
|
||||
}
|
||||
} finally {
|
||||
setIsDownloadingDetail(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteSelectedDetail = async () => {
|
||||
if (!detailSelection || isDeletingDetail) return;
|
||||
|
||||
if (detailSelection.kind === "work") {
|
||||
onRemoveWork?.(detailSelection.item);
|
||||
setDetailNotice("已从当前代表作列表移除");
|
||||
setDetailSelection(null);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsDeletingDetail(true);
|
||||
setDetailNotice(null);
|
||||
try {
|
||||
await assetClient.delete(detailSelection.item.id, { cleanupUserData: true });
|
||||
setSavedAssets((current) => current.filter((asset) => asset.id !== detailSelection.item.id));
|
||||
setDetailSelection(null);
|
||||
setAssetNotice(`已删除 ${detailSelection.item.name}`);
|
||||
} catch (error) {
|
||||
setDetailNotice(formatProfileLoadError(error, "资产删除失败"));
|
||||
} finally {
|
||||
setIsDeletingDetail(false);
|
||||
}
|
||||
};
|
||||
|
||||
const renderDetailMedia = (url: string | null | undefined, type: "image" | "video" | "asset") => {
|
||||
const mediaUrl = typeof url === "string" ? url.trim() : "";
|
||||
const isVideoPreview = type === "video" || /\.(mp4|webm|mov|m4v)(\?|#|$)/i.test(mediaUrl);
|
||||
|
||||
if (!mediaUrl) {
|
||||
return (
|
||||
<div className="profile-page__detail-placeholder">
|
||||
{type === "video" ? <PlayCircleOutlined /> : <FileImageOutlined />}
|
||||
<span>暂无可预览内容</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return isVideoPreview ? (
|
||||
<video className="profile-page__detail-media" src={mediaUrl} controls playsInline />
|
||||
) : (
|
||||
<img className="profile-page__detail-media" src={mediaUrl} alt="" />
|
||||
);
|
||||
};
|
||||
|
||||
const renderDetailModal = () => {
|
||||
if (!detailSelection) return null;
|
||||
const modalTarget = typeof document === "undefined" ? null : document.querySelector(".web-shell") || document.body;
|
||||
if (!modalTarget) return null;
|
||||
|
||||
const isWork = detailSelection.kind === "work";
|
||||
const title = isWork ? detailSelection.item.title : detailSelection.item.name;
|
||||
const description = isWork ? detailSelection.item.prompt : detailSelection.item.description;
|
||||
const mediaUrl = isWork ? detailSelection.item.outputUrl : detailSelection.item.imageUrl || detailSelection.item.url;
|
||||
const mediaType = isWork
|
||||
? detailSelection.item.type === "video" ? "video" : "image"
|
||||
: detailSelection.item.type === "video" ? "video" : "asset";
|
||||
|
||||
return createPortal(
|
||||
<div className="profile-page__detail-overlay" role="dialog" aria-modal="true" aria-labelledby="profile-detail-title">
|
||||
<button type="button" className="profile-page__detail-backdrop" aria-label="关闭详情" onClick={closeDetailSelection} />
|
||||
<section className="profile-page__detail-panel">
|
||||
<header className="profile-page__detail-head">
|
||||
<div>
|
||||
<span className="profile-page__detail-eyebrow">{isWork ? "代表作详情" : "资产详情"}</span>
|
||||
<h2 id="profile-detail-title">{title}</h2>
|
||||
</div>
|
||||
<button type="button" className="profile-page__detail-close" aria-label="关闭详情" onClick={closeDetailSelection}>
|
||||
<CloseOutlined />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div className="profile-page__detail-body">
|
||||
<div className="profile-page__detail-preview">
|
||||
{renderDetailMedia(mediaUrl, mediaType)}
|
||||
</div>
|
||||
<div className="profile-page__detail-info">
|
||||
<p>{description || "暂无描述"}</p>
|
||||
<dl>
|
||||
<div>
|
||||
<dt>{isWork ? "类型" : "资产类型"}</dt>
|
||||
<dd>{isWork ? formatTaskType(detailSelection.item.type) : formatAssetType(detailSelection.item.type)}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>状态</dt>
|
||||
<dd>{isWork ? formatTaskStatus(detailSelection.item.status) : formatAssetStatus(detailSelection.item.status)}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>{isWork ? "创建时间" : "更新时间"}</dt>
|
||||
<dd>{formatProfileDate(isWork ? detailSelection.item.createdAt : detailSelection.item.updatedAt)}</dd>
|
||||
</div>
|
||||
{!isWork ? (
|
||||
<div>
|
||||
<dt>标签</dt>
|
||||
<dd>{detailSelection.item.tags?.length ? detailSelection.item.tags.join(" / ") : "服务器素材"}</dd>
|
||||
</div>
|
||||
) : null}
|
||||
</dl>
|
||||
{detailNotice ? <span className="profile-page__detail-notice">{detailNotice}</span> : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer className="profile-page__detail-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="profile-page__detail-action profile-page__detail-action--primary"
|
||||
onClick={() => void handleDownloadSelectedDetail()}
|
||||
disabled={isDownloadingDetail}
|
||||
>
|
||||
<DownloadOutlined />
|
||||
{isDownloadingDetail ? "下载中..." : "下载"}
|
||||
</button>
|
||||
<button type="button" className="profile-page__detail-action profile-page__detail-action--secondary" onClick={onOpenWorkbench}>
|
||||
<EditOutlined />
|
||||
{isWork ? "继续编辑" : "使用素材"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="profile-page__detail-action profile-page__detail-action--danger"
|
||||
onClick={() => void handleDeleteSelectedDetail()}
|
||||
disabled={isDeletingDetail}
|
||||
>
|
||||
<DeleteOutlined />
|
||||
{isDeletingDetail ? "删除中..." : isWork ? "移除代表作" : "删除资产"}
|
||||
</button>
|
||||
</footer>
|
||||
</section>
|
||||
</div>,
|
||||
modalTarget,
|
||||
);
|
||||
};
|
||||
|
||||
const renderEmptyState = (text: string, actionLabel: string, action: () => void) => (
|
||||
<div className="profile-page__empty-state">
|
||||
<span className="profile-page__empty-mark" aria-hidden="true">
|
||||
@@ -680,7 +901,15 @@ function ProfilePage({
|
||||
<div className="profile-page__works-scroll">
|
||||
<div className="profile-page__list-grid motion-stagger">
|
||||
{visibleWorks.map((task) => (
|
||||
<article key={task.id} className="profile-page__list-card profile-page__media-card">
|
||||
<article
|
||||
key={task.id}
|
||||
className="profile-page__list-card profile-page__media-card profile-page__interactive-card"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`查看代表作 ${task.title}`}
|
||||
onClick={() => openDetailSelection({ kind: "work", item: task })}
|
||||
onKeyDown={(event) => handleInteractiveCardKeyDown(event, () => openDetailSelection({ kind: "work", item: task }))}
|
||||
>
|
||||
{renderCardPreview(task.outputUrl, task.type === "video" ? "video" : "image", formatTaskType(task.type))}
|
||||
<div className="profile-page__list-card-body">
|
||||
<div className="profile-page__list-card-head">
|
||||
@@ -705,7 +934,17 @@ function ProfilePage({
|
||||
return projects.length ? (
|
||||
<div className="profile-page__list-grid motion-stagger">
|
||||
{projects.map((project) => (
|
||||
<article key={project.id} className="profile-page__list-card profile-page__media-card">
|
||||
<article
|
||||
key={project.id}
|
||||
className="profile-page__list-card profile-page__media-card profile-page__interactive-card"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`打开项目 ${project.name}`}
|
||||
onClick={() => (onOpenProject ? onOpenProject(project) : onOpenWorkbench())}
|
||||
onKeyDown={(event) =>
|
||||
handleInteractiveCardKeyDown(event, () => (onOpenProject ? onOpenProject(project) : onOpenWorkbench()))
|
||||
}
|
||||
>
|
||||
{renderCardPreview(project.thumbnailUrl, "project", "项目")}
|
||||
<div className="profile-page__list-card-body">
|
||||
<div className="profile-page__list-card-head">
|
||||
@@ -715,7 +954,10 @@ function ProfilePage({
|
||||
type="button"
|
||||
className="profile-page__delete-project"
|
||||
aria-label={`删除项目 ${project.name}`}
|
||||
onClick={() => onDeleteProject(project)}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
onDeleteProject(project);
|
||||
}}
|
||||
>
|
||||
<DeleteOutlined />
|
||||
</button>
|
||||
@@ -739,7 +981,15 @@ function ProfilePage({
|
||||
return savedAssets.length ? (
|
||||
<div className="profile-page__list-grid">
|
||||
{savedAssets.map((asset) => (
|
||||
<article key={asset.id} className="profile-page__list-card profile-page__media-card">
|
||||
<article
|
||||
key={asset.id}
|
||||
className="profile-page__list-card profile-page__media-card profile-page__interactive-card"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`查看资产 ${asset.name}`}
|
||||
onClick={() => openDetailSelection({ kind: "asset", item: asset })}
|
||||
onKeyDown={(event) => handleInteractiveCardKeyDown(event, () => openDetailSelection({ kind: "asset", item: asset }))}
|
||||
>
|
||||
{renderCardPreview(asset.imageUrl || asset.url, asset.type === "video" ? "video" : "asset", formatAssetType(asset.type))}
|
||||
<div className="profile-page__list-card-body">
|
||||
<div className="profile-page__list-card-head">
|
||||
@@ -959,6 +1209,7 @@ function ProfilePage({
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
{renderDetailModal()}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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: "omni-GPT" },
|
||||
{ value: "gpt-image-2-vip", label: "omni-GPT VIP" },
|
||||
{ value: "nano-banana-pro", label: "omni-水果 Pro" },
|
||||
{ value: "nano-banana-2", label: "omni-水果 2" },
|
||||
{ value: "nano-banana-fast", label: "omni-水果" },
|
||||
];
|
||||
|
||||
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" },
|
||||
|
||||
@@ -0,0 +1,449 @@
|
||||
/* ── Beta Application Modal ── */
|
||||
/* Word-document style: paper-white panel, larger serif-ish typography, clear form fields */
|
||||
|
||||
.beta-application-modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.beta-application-modal__backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: 0;
|
||||
background: rgba(0, 0, 0, 0.58);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ── Panel: paper-like document ── */
|
||||
.beta-application-modal__panel {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: min(800px, 94vw);
|
||||
max-height: 90vh;
|
||||
overflow: hidden;
|
||||
border: 1px solid #d9d5cf;
|
||||
border-radius: 4px;
|
||||
background: #faf8f4;
|
||||
color: #1e1e1e;
|
||||
box-shadow:
|
||||
0 2px 0 #e8e4dc,
|
||||
0 4px 0 #d9d5cf,
|
||||
0 8px 32px rgba(0, 0, 0, 0.2),
|
||||
0 24px 80px rgba(0, 0, 0, 0.12);
|
||||
font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* ── Header ── */
|
||||
.beta-modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 28px 36px 20px;
|
||||
border-bottom: 2px solid #1e1e1e;
|
||||
flex-shrink: 0;
|
||||
background: #f5f1ea;
|
||||
}
|
||||
|
||||
.beta-modal-header__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.beta-modal-header__icon {
|
||||
font-size: 28px;
|
||||
color: #166534;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.beta-modal-header h2 {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
color: #1e1e1e;
|
||||
letter-spacing: 1px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.beta-modal-header__subtitle {
|
||||
margin: 2px 0 0;
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.beta-modal-header__subtitle strong {
|
||||
color: #166534;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.beta-modal-header__close {
|
||||
display: grid;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
place-items: center;
|
||||
border: 1px solid #d5cfc4;
|
||||
border-radius: 4px;
|
||||
background: #f5f1ea;
|
||||
color: #8c8276;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
transition: background 120ms ease, color 120ms ease;
|
||||
}
|
||||
|
||||
.beta-modal-header__close:hover {
|
||||
background: #ede6da;
|
||||
color: #1e1e1e;
|
||||
}
|
||||
|
||||
/* ── Scrollable body ── */
|
||||
.beta-modal-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 32px 40px;
|
||||
background: #faf8f4;
|
||||
}
|
||||
|
||||
/* ── Document sections ── */
|
||||
.beta-doc-section {
|
||||
margin-bottom: 28px;
|
||||
padding-bottom: 28px;
|
||||
border-bottom: 1px dashed #d9d2c5;
|
||||
}
|
||||
|
||||
.beta-doc-section:last-of-type {
|
||||
border-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.beta-doc-section__title {
|
||||
margin: 0 0 18px;
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
color: #1e1e1e;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.beta-required {
|
||||
color: #dc2626;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.beta-doc-section__desc {
|
||||
margin: 0 0 12px;
|
||||
font-size: 14px;
|
||||
color: #4b5563;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* ── Single-column grid for form fields ── */
|
||||
.beta-doc-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.beta-doc-grid--two {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
/* ── Text field (Word underline style) ── */
|
||||
.beta-text-field {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.beta-text-field__label {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #1e1e1e;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.beta-text-field__label::after {
|
||||
content: "：";
|
||||
}
|
||||
|
||||
.beta-text-field__input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #c5beb2;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
padding: 2px 0;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
color: #1e1e1e;
|
||||
line-height: 1.8;
|
||||
transition: border-color 140ms ease;
|
||||
}
|
||||
|
||||
.beta-text-field__input::placeholder {
|
||||
color: #c4c4c4;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.beta-text-field__input:focus {
|
||||
border-bottom-color: #166534;
|
||||
border-bottom-width: 2px;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.beta-text-field__input[readonly] {
|
||||
color: #6b7280;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* ── Form group (spans full row when needed) ── */
|
||||
.beta-form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.beta-form-group--full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.beta-form-group__label {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #1e1e1e;
|
||||
}
|
||||
|
||||
.beta-form-group__label::after {
|
||||
content: "：";
|
||||
}
|
||||
|
||||
/* ── Radio group ── */
|
||||
.beta-radio-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px 14px;
|
||||
}
|
||||
|
||||
.beta-radio {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #374151;
|
||||
padding: 3px 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.beta-radio input[type="radio"] {
|
||||
appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid #b8b0a4;
|
||||
border-radius: 50%;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: border-color 120ms ease, background 120ms ease;
|
||||
}
|
||||
|
||||
.beta-radio input[type="radio"]:checked {
|
||||
border-color: #166534;
|
||||
background: #166534;
|
||||
box-shadow: inset 0 0 0 3px #ffffff;
|
||||
}
|
||||
|
||||
.beta-radio:hover input[type="radio"] {
|
||||
border-color: #166534;
|
||||
}
|
||||
|
||||
.beta-radio span {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ── Checkbox group ── */
|
||||
.beta-checkbox-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px 14px;
|
||||
}
|
||||
|
||||
.beta-checkbox {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #374151;
|
||||
padding: 3px 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.beta-checkbox input[type="checkbox"] {
|
||||
appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid #b8b0a4;
|
||||
border-radius: 3px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: border-color 120ms ease, background 120ms ease;
|
||||
}
|
||||
|
||||
.beta-checkbox input[type="checkbox"]:checked {
|
||||
border-color: #166534;
|
||||
background: #166534;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-size: 10px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.beta-checkbox:hover input[type="checkbox"] {
|
||||
border-color: #166534;
|
||||
}
|
||||
|
||||
.beta-checkbox span {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ── Textarea ── */
|
||||
.beta-textarea {
|
||||
width: 100%;
|
||||
min-height: 140px;
|
||||
resize: vertical;
|
||||
border: 1px solid #c5beb2;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
background: #ffffff;
|
||||
padding: 12px 14px;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
color: #1e1e1e;
|
||||
line-height: 1.8;
|
||||
transition: border-color 140ms ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.beta-textarea::placeholder {
|
||||
color: #c4c4c4;
|
||||
}
|
||||
|
||||
.beta-textarea:focus {
|
||||
border-color: #166534;
|
||||
box-shadow: 0 0 0 2px rgba(22, 101, 52, 0.1);
|
||||
}
|
||||
|
||||
/* ── Rules list ── */
|
||||
.beta-rules-list {
|
||||
margin: 0 0 18px;
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
.beta-rules-list li {
|
||||
font-size: 14px;
|
||||
color: #374151;
|
||||
line-height: 1.9;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.beta-rules-list li strong {
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
/* ── Agreement checkbox row ── */
|
||||
.beta-agree-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
margin-bottom: 18px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #166534;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.beta-agree-row input[type="checkbox"] {
|
||||
appearance: none;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid #b8b0a4;
|
||||
border-radius: 3px;
|
||||
margin-top: 2px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: border-color 120ms ease, background 120ms ease;
|
||||
}
|
||||
|
||||
.beta-agree-row input[type="checkbox"]:checked {
|
||||
border-color: #166534;
|
||||
background: #166534;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-size: 12px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* ── Footer ── */
|
||||
.beta-modal-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding: 16px 36px 20px;
|
||||
border-top: 1px solid #e0dbd2;
|
||||
flex-shrink: 0;
|
||||
background: #f5f1ea;
|
||||
}
|
||||
|
||||
.beta-modal-footer__btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
padding: 0 24px;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: opacity 120ms ease, transform 120ms ease;
|
||||
}
|
||||
|
||||
.beta-modal-footer__btn:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.beta-modal-footer__btn--secondary {
|
||||
background: #e8e3d9;
|
||||
color: #5c5348;
|
||||
}
|
||||
|
||||
.beta-modal-footer__btn--secondary:hover {
|
||||
background: #dbd4c7;
|
||||
}
|
||||
|
||||
.beta-modal-footer__btn--primary {
|
||||
background: #166534;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.beta-modal-footer__btn--primary:hover {
|
||||
background: #14532d;
|
||||
}
|
||||
@@ -32,6 +32,7 @@
|
||||
@import "./pages/legacy-pages.css";
|
||||
@import "./pages/not-found.css";
|
||||
@import "./components/recharge-modal.css";
|
||||
@import "./components/beta-application-modal.css";
|
||||
@import "./components/dropzone.css";
|
||||
@import "./components/skeleton.css";
|
||||
@import "./components/toast.css";
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+47
-47
@@ -480,7 +480,7 @@
|
||||
.omni-home__feature-page.is-script,
|
||||
.omni-home__feature-page.is-model,
|
||||
.omni-home__feature-page.is-ecommerce {
|
||||
--home-showcase-page-pad-y: clamp(10px, 1.8vw, 24px);
|
||||
--home-showcase-page-pad-y: clamp(4px, 0.8vw, 12px);
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 0;
|
||||
@@ -965,11 +965,12 @@
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: inherit;
|
||||
gap: clamp(30px, 2.6cqw, 56px);
|
||||
padding: clamp(24px, 2.2cqw, 46px) clamp(36px, 3.7cqw, 72px);
|
||||
padding: clamp(12px, 1.2cqw, 24px) clamp(24px, 2.4cqw, 48px);
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-matrix .left-panel,
|
||||
@@ -981,10 +982,10 @@
|
||||
|
||||
.omni-home-ecommerce-matrix .left-panel {
|
||||
display: flex;
|
||||
flex: 0 0 clamp(320px, 24cqw, 450px);
|
||||
flex: 0 0 clamp(360px, 29cqw, 540px);
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: clamp(16px, 1.1cqw, 26px);
|
||||
gap: clamp(22px, 1.6cqw, 34px);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@@ -997,7 +998,7 @@
|
||||
|
||||
.omni-home-ecommerce-matrix .hero-title {
|
||||
color: var(--matrix-text-primary);
|
||||
font-size: clamp(40px, 3cqw, 58px);
|
||||
font-size: clamp(48px, 3.6cqw, 72px);
|
||||
font-weight: 900;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.08;
|
||||
@@ -1009,7 +1010,7 @@
|
||||
|
||||
.omni-home-ecommerce-matrix .hero-desc {
|
||||
color: var(--matrix-text-secondary);
|
||||
font-size: clamp(16px, 1.2cqw, 22px);
|
||||
font-size: clamp(19px, 1.4cqw, 26px);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2px;
|
||||
line-height: 1.55;
|
||||
@@ -1018,20 +1019,20 @@
|
||||
.omni-home-ecommerce-matrix .features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: clamp(12px, 0.95cqw, 18px);
|
||||
gap: clamp(16px, 1.2cqw, 24px);
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-matrix .feature-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
gap: 14px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--matrix-border-subtle);
|
||||
border-radius: var(--matrix-radius);
|
||||
background: var(--matrix-card-surface);
|
||||
min-height: clamp(70px, 4.6cqw, 92px);
|
||||
padding: clamp(16px, 1.2cqw, 24px);
|
||||
min-height: clamp(88px, 5.8cqw, 114px);
|
||||
padding: clamp(20px, 1.5cqw, 30px);
|
||||
box-shadow: var(--matrix-shadow-card);
|
||||
backdrop-filter: var(--matrix-glass-blur);
|
||||
-webkit-backdrop-filter: var(--matrix-glass-blur);
|
||||
@@ -1064,15 +1065,15 @@
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex: 0 0 clamp(44px, 2.8cqw, 56px);
|
||||
width: clamp(44px, 2.8cqw, 56px);
|
||||
height: clamp(44px, 2.8cqw, 56px);
|
||||
flex: 0 0 clamp(50px, 3.4cqw, 64px);
|
||||
width: clamp(50px, 3.4cqw, 64px);
|
||||
height: clamp(50px, 3.4cqw, 64px);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid rgba(0, 255, 136, 0.2);
|
||||
border-radius: var(--matrix-radius);
|
||||
background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(168, 85, 247, 0.15));
|
||||
font-size: clamp(20px, 1.4cqw, 28px);
|
||||
font-size: clamp(24px, 1.6cqw, 32px);
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-matrix .feature-text {
|
||||
@@ -1082,15 +1083,15 @@
|
||||
|
||||
.omni-home-ecommerce-matrix .feature-text h4 {
|
||||
color: var(--matrix-text-primary);
|
||||
font-size: clamp(18px, 1.2cqw, 24px);
|
||||
font-size: clamp(20px, 1.4cqw, 26px);
|
||||
font-weight: 750;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-matrix .feature-text p {
|
||||
margin-top: 6px;
|
||||
margin-top: 8px;
|
||||
color: var(--matrix-text-dim);
|
||||
font-size: clamp(13px, 0.9cqw, 17px);
|
||||
font-size: clamp(15px, 1cqw, 19px);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1px;
|
||||
line-height: 1.5;
|
||||
@@ -1100,12 +1101,11 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
margin-top: auto;
|
||||
border: 1px solid var(--matrix-border-subtle);
|
||||
border-radius: var(--matrix-radius);
|
||||
background: var(--matrix-card-surface);
|
||||
min-height: clamp(72px, 4.6cqw, 92px);
|
||||
padding: clamp(14px, 1.1cqw, 22px) clamp(16px, 1.4cqw, 26px);
|
||||
min-height: clamp(88px, 5.8cqw, 114px);
|
||||
padding: clamp(18px, 1.4cqw, 28px) clamp(20px, 1.7cqw, 34px);
|
||||
box-shadow: var(--matrix-shadow-card);
|
||||
backdrop-filter: var(--matrix-glass-blur);
|
||||
-webkit-backdrop-filter: var(--matrix-glass-blur);
|
||||
@@ -1117,18 +1117,18 @@
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-matrix .step-icon {
|
||||
font-size: clamp(18px, 1.2cqw, 24px);
|
||||
font-size: clamp(22px, 1.4cqw, 28px);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-matrix .step-label {
|
||||
color: var(--matrix-text-secondary);
|
||||
font-size: clamp(12px, 0.82cqw, 16px);
|
||||
font-size: clamp(14px, 0.95cqw, 18px);
|
||||
font-weight: 650;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
@@ -1136,7 +1136,7 @@
|
||||
|
||||
.omni-home-ecommerce-matrix .step-sub {
|
||||
color: var(--matrix-text-dim);
|
||||
font-size: clamp(10px, 0.7cqw, 13px);
|
||||
font-size: clamp(11px, 0.78cqw, 14px);
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
@@ -1171,22 +1171,22 @@
|
||||
|
||||
.omni-home-ecommerce-matrix .center-panel {
|
||||
display: flex;
|
||||
flex: 0 0 clamp(310px, 22cqw, 430px);
|
||||
flex: 0 0 clamp(350px, 26cqw, 500px);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
gap: 20px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-matrix .input-card {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
width: min(100%, clamp(310px, 21cqw, 420px));
|
||||
width: min(100%, clamp(350px, 24cqw, 480px));
|
||||
border: 1px solid var(--matrix-border-default);
|
||||
border-radius: var(--matrix-radius);
|
||||
background: var(--matrix-card-elevated);
|
||||
padding: clamp(20px, 1.45cqw, 30px);
|
||||
padding: clamp(24px, 1.7cqw, 36px);
|
||||
box-shadow: var(--matrix-shadow-elevated), 0 0 60px rgba(0, 255, 136, 0.08);
|
||||
backdrop-filter: var(--matrix-glass-blur);
|
||||
-webkit-backdrop-filter: var(--matrix-glass-blur);
|
||||
@@ -1218,12 +1218,12 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-bottom: clamp(16px, 1.1cqw, 24px);
|
||||
margin-bottom: clamp(20px, 1.4cqw, 30px);
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-matrix .input-card-label {
|
||||
color: var(--matrix-cyan);
|
||||
font-size: clamp(14px, 1cqw, 18px);
|
||||
font-size: clamp(16px, 1.15cqw, 22px);
|
||||
font-weight: 800;
|
||||
letter-spacing: 1.2px;
|
||||
text-transform: uppercase;
|
||||
@@ -1235,7 +1235,7 @@
|
||||
border-radius: 6px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--matrix-text-dim);
|
||||
font-size: clamp(12px, 0.9cqw, 16px);
|
||||
font-size: clamp(13px, 0.95cqw, 17px);
|
||||
letter-spacing: 0.5px;
|
||||
padding: 6px 12px;
|
||||
white-space: nowrap;
|
||||
@@ -1408,9 +1408,9 @@
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: clamp(16px, 1.35cqw, 28px);
|
||||
gap: clamp(22px, 1.6cqw, 34px);
|
||||
min-width: 0;
|
||||
padding-left: clamp(34px, 3.4cqw, 78px);
|
||||
padding-left: clamp(8px, 0.8cqw, 24px);
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-matrix .ai-node {
|
||||
@@ -1418,13 +1418,13 @@
|
||||
z-index: 4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: clamp(12px, 1cqw, 18px);
|
||||
gap: clamp(14px, 1.15cqw, 22px);
|
||||
width: 100%;
|
||||
border: 1px solid var(--matrix-border-default);
|
||||
border-radius: var(--matrix-radius);
|
||||
background: var(--matrix-card-highlight);
|
||||
min-height: clamp(54px, 3.8cqw, 72px);
|
||||
padding: 12px clamp(16px, 1.4cqw, 26px);
|
||||
min-height: clamp(62px, 4.4cqw, 82px);
|
||||
padding: 14px clamp(18px, 1.6cqw, 30px);
|
||||
box-shadow: var(--matrix-shadow-card), var(--matrix-shadow-glow-purple);
|
||||
backdrop-filter: var(--matrix-glass-blur);
|
||||
-webkit-backdrop-filter: var(--matrix-glass-blur);
|
||||
@@ -1443,7 +1443,7 @@
|
||||
.omni-home-ecommerce-matrix .ai-node-title {
|
||||
flex-shrink: 0;
|
||||
color: var(--matrix-cyan);
|
||||
font-size: clamp(12px, 0.82cqw, 16px);
|
||||
font-size: clamp(14px, 0.95cqw, 18px);
|
||||
font-weight: 850;
|
||||
letter-spacing: 1.6px;
|
||||
text-transform: uppercase;
|
||||
@@ -1457,7 +1457,7 @@
|
||||
.omni-home-ecommerce-matrix .ai-node-list {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: clamp(8px, 0.75cqw, 14px);
|
||||
gap: clamp(10px, 0.85cqw, 16px);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@@ -1467,10 +1467,10 @@
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: var(--matrix-text-secondary);
|
||||
font-size: clamp(11px, 0.78cqw, 15px);
|
||||
font-size: clamp(12px, 0.85cqw, 16px);
|
||||
letter-spacing: 0.2px;
|
||||
line-height: 1.3;
|
||||
padding: 7px clamp(10px, 0.9cqw, 16px);
|
||||
padding: 8px clamp(12px, 1cqw, 18px);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -1478,28 +1478,28 @@
|
||||
.omni-home-ecommerce-matrix .output-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: clamp(14px, 1.1cqw, 22px);
|
||||
gap: clamp(16px, 1.3cqw, 26px);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-matrix .output-label {
|
||||
flex: 0 0 clamp(96px, 6.5cqw, 132px);
|
||||
flex: 0 0 clamp(72px, 5cqw, 100px);
|
||||
padding-right: 4px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-matrix .output-label h4 {
|
||||
color: var(--matrix-text-primary);
|
||||
font-size: clamp(18px, 1.3cqw, 25px);
|
||||
font-size: clamp(20px, 1.45cqw, 28px);
|
||||
font-weight: 850;
|
||||
letter-spacing: 0.3px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-matrix .output-label p {
|
||||
margin-top: 6px;
|
||||
margin-top: 8px;
|
||||
color: var(--matrix-text-dim);
|
||||
font-size: clamp(11px, 0.82cqw, 15px);
|
||||
font-size: clamp(12px, 0.9cqw, 16px);
|
||||
letter-spacing: 0.8px;
|
||||
line-height: 1.2;
|
||||
text-transform: uppercase;
|
||||
@@ -1516,14 +1516,14 @@
|
||||
.omni-home-ecommerce-matrix .output-cards {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: clamp(14px, 1.15cqw, 24px);
|
||||
gap: clamp(10px, 0.85cqw, 18px);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-matrix .output-card {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-width: clamp(80px, 7cqw, 140px);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--matrix-border-subtle);
|
||||
border-radius: var(--matrix-radius);
|
||||
|
||||
@@ -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;
|
||||
|
||||
+891
-75
File diff suppressed because it is too large
Load Diff
@@ -22,3 +22,431 @@
|
||||
overflow: visible;
|
||||
scrollbar-width: auto;
|
||||
}
|
||||
|
||||
.profile-page__interactive-card {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.profile-page__interactive-card:focus-visible {
|
||||
outline: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.profile-page__detail-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 120;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: clamp(18px, 3vw, 32px);
|
||||
isolation: isolate;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.profile-page__detail-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: 0;
|
||||
background: rgba(0, 0, 0, 0.62);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.profile-page__detail-panel {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
gap: 16px;
|
||||
width: min(1080px, calc(100vw - 48px));
|
||||
max-height: min(820px, calc(100dvh - 48px));
|
||||
overflow: hidden;
|
||||
padding: clamp(16px, 2vw, 22px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 18px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
|
||||
color-mix(in srgb, var(--bg-panel) 94%, #000);
|
||||
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
|
||||
}
|
||||
|
||||
.profile-page__detail-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
min-width: 0;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.profile-page__detail-head h2 {
|
||||
max-width: 760px;
|
||||
margin: 5px 0 0;
|
||||
color: var(--text);
|
||||
font-size: clamp(18px, 2vw, 25px);
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.profile-page__detail-eyebrow {
|
||||
color: var(--accent);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.profile-page__detail-close {
|
||||
display: inline-grid;
|
||||
flex: 0 0 38px;
|
||||
place-items: center;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.profile-page__detail-close:hover,
|
||||
.profile-page__detail-close:focus-visible {
|
||||
border-color: rgba(255, 255, 255, 0.22);
|
||||
background: rgba(255, 255, 255, 0.075);
|
||||
color: var(--text);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.profile-page__detail-body {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.42fr) minmax(300px, 0.78fr);
|
||||
gap: 18px;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.profile-page__detail-preview {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
align-self: stretch;
|
||||
min-height: min(500px, 54dvh);
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(var(--accent-rgb), 0.055), transparent 58%),
|
||||
rgba(255, 255, 255, 0.024);
|
||||
}
|
||||
|
||||
.profile-page__detail-media {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: min(640px, 56dvh);
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
video.profile-page__detail-media {
|
||||
height: 100%;
|
||||
min-height: 320px;
|
||||
background: #050607;
|
||||
}
|
||||
|
||||
.profile-page__detail-placeholder {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 10px;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.profile-page__detail-placeholder .anticon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.2);
|
||||
border-radius: 16px;
|
||||
background: rgba(var(--accent-rgb), 0.08);
|
||||
color: var(--accent);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.profile-page__detail-info {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 14px;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
padding-right: 4px;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.profile-page__detail-info p {
|
||||
margin: 0;
|
||||
max-height: min(230px, 28dvh);
|
||||
overflow: auto;
|
||||
padding: 13px 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 13px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
word-break: break-word;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.profile-page__detail-info dl {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.profile-page__detail-info dl div {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 13px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.profile-page__detail-info dt {
|
||||
color: var(--text-soft);
|
||||
font-size: 11px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.profile-page__detail-info dd {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.profile-page__detail-notice {
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid rgba(243, 170, 38, 0.28);
|
||||
border-radius: 999px;
|
||||
background: rgba(243, 170, 38, 0.08);
|
||||
color: var(--warning);
|
||||
font-size: 12px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.profile-page__detail-actions {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
align-items: center;
|
||||
justify-content: stretch;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.profile-page__detail-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
min-height: 40px;
|
||||
padding: 0 16px;
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.36);
|
||||
border-radius: 12px;
|
||||
background: rgba(var(--accent-rgb), 0.11);
|
||||
color: var(--accent);
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.profile-page__detail-action--primary {
|
||||
justify-self: start;
|
||||
min-width: 132px;
|
||||
}
|
||||
|
||||
.profile-page__detail-action--secondary,
|
||||
.profile-page__detail-action--danger {
|
||||
min-width: 118px;
|
||||
}
|
||||
|
||||
.profile-page__detail-action:hover,
|
||||
.profile-page__detail-action:focus-visible {
|
||||
border-color: rgba(var(--accent-rgb), 0.54);
|
||||
background: rgba(var(--accent-rgb), 0.16);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.profile-page__detail-action--danger {
|
||||
border-color: rgba(255, 90, 95, 0.24);
|
||||
background: rgba(255, 90, 95, 0.08);
|
||||
color: #ffadb0;
|
||||
}
|
||||
|
||||
.profile-page__detail-action--danger:hover,
|
||||
.profile-page__detail-action--danger:focus-visible {
|
||||
border-color: rgba(255, 90, 95, 0.42);
|
||||
background: rgba(255, 90, 95, 0.13);
|
||||
}
|
||||
|
||||
.profile-page__detail-action:disabled {
|
||||
cursor: wait;
|
||||
opacity: 0.62;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.profile-page__detail-overlay {
|
||||
align-items: end;
|
||||
padding: 10px 10px 0;
|
||||
}
|
||||
|
||||
.profile-page__detail-panel {
|
||||
width: 100%;
|
||||
max-height: calc(100dvh - 10px);
|
||||
padding: 16px;
|
||||
border-radius: 18px 18px 0 0;
|
||||
}
|
||||
|
||||
.profile-page__detail-body {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 14px;
|
||||
overflow: auto;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.profile-page__detail-preview {
|
||||
align-items: start;
|
||||
min-height: 260px;
|
||||
max-height: 42dvh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.profile-page__detail-media {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
video.profile-page__detail-media {
|
||||
align-self: center;
|
||||
height: auto;
|
||||
min-height: 220px;
|
||||
max-height: 42dvh;
|
||||
}
|
||||
|
||||
.profile-page__detail-info {
|
||||
overflow: auto;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.profile-page__detail-info p {
|
||||
min-height: 96px;
|
||||
max-height: 30dvh;
|
||||
}
|
||||
|
||||
.profile-page__detail-info dl {
|
||||
grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.profile-page__detail-info dl div {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
min-height: 40px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.profile-page__detail-info dt {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.profile-page__detail-info dd {
|
||||
min-width: 0;
|
||||
color: var(--text);
|
||||
font-weight: 800;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.profile-page__detail-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.profile-page__detail-action--primary {
|
||||
grid-column: 1 / -1;
|
||||
justify-self: stretch;
|
||||
}
|
||||
|
||||
.profile-page__detail-action--secondary,
|
||||
.profile-page__detail-action--danger {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.profile-page__detail-overlay {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.profile-page__detail-panel {
|
||||
max-height: 94dvh;
|
||||
padding: 14px;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
border-radius: 18px 18px 0 0;
|
||||
}
|
||||
|
||||
.profile-page__detail-head {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.profile-page__detail-head h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.profile-page__detail-close {
|
||||
flex-basis: 36px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.profile-page__detail-info dl {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.profile-page__detail-info p {
|
||||
min-height: 108px;
|
||||
}
|
||||
|
||||
.profile-page__detail-preview {
|
||||
min-height: 240px;
|
||||
max-height: 40dvh;
|
||||
}
|
||||
|
||||
.profile-page__detail-info dl {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.profile-page__detail-actions {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.profile-page__detail-action--primary {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.profile-page__detail-action {
|
||||
min-height: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -236,6 +236,43 @@
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.beta-apply-button {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
height: 36px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.3);
|
||||
border-radius: 12px;
|
||||
background: rgba(var(--accent-rgb), 0.1);
|
||||
color: var(--accent);
|
||||
font-size: 12px;
|
||||
font-weight: 850;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 160ms ease,
|
||||
border-color 160ms ease,
|
||||
background 160ms ease;
|
||||
animation: beta-pulse 2.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.beta-apply-button:hover {
|
||||
border-color: var(--accent);
|
||||
background: rgba(var(--accent-rgb), 0.18);
|
||||
}
|
||||
|
||||
.beta-apply-button:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
@keyframes beta-pulse {
|
||||
0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.25); }
|
||||
50% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0); }
|
||||
}
|
||||
|
||||
.member-button {
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
|
||||
@@ -8516,6 +8516,789 @@
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
/* Personal center design-taste pass: keep the black-green product language, but unify spacing, surfaces, and responsive behavior. */
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard {
|
||||
--profile-page: #08090b;
|
||||
--profile-panel: #121416;
|
||||
--profile-panel-soft: #16191b;
|
||||
--profile-control: #181b1e;
|
||||
--profile-control-strong: #1d2124;
|
||||
--profile-border: rgba(255, 255, 255, 0.085);
|
||||
--profile-border-strong: rgba(255, 255, 255, 0.15);
|
||||
--profile-text: #f4f7f5;
|
||||
--profile-muted: rgba(225, 235, 231, 0.64);
|
||||
--profile-soft: rgba(225, 235, 231, 0.42);
|
||||
--profile-accent: #00ff88;
|
||||
--profile-accent-soft: rgba(0, 255, 136, 0.12);
|
||||
--profile-accent-border: rgba(0, 255, 136, 0.34);
|
||||
--profile-radius-lg: 18px;
|
||||
--profile-radius-md: 14px;
|
||||
--profile-radius-sm: 10px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 260px),
|
||||
var(--profile-page);
|
||||
color: var(--profile-text);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__banner {
|
||||
height: clamp(148px, 18vw, 210px);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
|
||||
var(--profile-panel);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__banner-overlay {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(8, 9, 11, 0.24) 0%, rgba(8, 9, 11, 0.7) 68%, var(--profile-page) 100%),
|
||||
linear-gradient(90deg, rgba(8, 9, 11, 0.76), rgba(8, 9, 11, 0.28) 48%, rgba(8, 9, 11, 0.68));
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__body {
|
||||
grid-template-columns: minmax(272px, 304px) minmax(0, 1fr);
|
||||
gap: clamp(18px, 2.2vw, 28px);
|
||||
width: min(1220px, calc(100% - 48px));
|
||||
margin-top: -54px;
|
||||
padding-bottom: clamp(44px, 5vw, 72px);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard :is(
|
||||
.profile-page__sidebar,
|
||||
.profile-page__account-card,
|
||||
.profile-page__main-tabs,
|
||||
.profile-page__section,
|
||||
.profile-page__list-card,
|
||||
.profile-page__review-item,
|
||||
.profile-page__empty-state
|
||||
) {
|
||||
border: 1px solid var(--profile-border);
|
||||
border-radius: var(--profile-radius-lg);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.012)),
|
||||
var(--profile-panel);
|
||||
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar {
|
||||
gap: 16px;
|
||||
padding: clamp(16px, 1.8vw, 22px);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar {
|
||||
position: sticky;
|
||||
top: 18px;
|
||||
align-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar-head {
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar-ring {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
padding: 3px;
|
||||
border-color: var(--profile-accent-border);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
|
||||
var(--profile-accent-soft);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar-ring .profile-page__avatar,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar {
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
border-color: rgba(5, 8, 13, 0.94);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__username {
|
||||
color: var(--profile-text);
|
||||
font-size: clamp(19px, 1.5vw, 22px);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__bio-display {
|
||||
width: min(268px, 100%);
|
||||
min-height: 38px;
|
||||
border-color: var(--profile-border);
|
||||
background: rgba(255, 255, 255, 0.035);
|
||||
color: var(--profile-muted);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__bio-display:hover,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__bio-display:focus-visible {
|
||||
border-color: var(--profile-accent-border);
|
||||
background: var(--profile-accent-soft);
|
||||
color: var(--profile-text);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__counts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__count {
|
||||
min-width: 0;
|
||||
padding: 12px 8px;
|
||||
border: 1px solid var(--profile-border);
|
||||
border-radius: var(--profile-radius-sm);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
|
||||
var(--profile-control);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__count strong {
|
||||
color: var(--profile-text);
|
||||
font-size: 20px;
|
||||
font-weight: 850;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__count span {
|
||||
color: var(--profile-muted);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card {
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border-radius: var(--profile-radius-md);
|
||||
background:
|
||||
radial-gradient(circle at 14% 0%, rgba(0, 255, 136, 0.11), transparent 32%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.016)),
|
||||
rgba(10, 14, 13, 0.72);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__list-tabs {
|
||||
gap: 5px;
|
||||
padding: 5px;
|
||||
border: 1px solid var(--profile-border);
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.026);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__list-tabs button {
|
||||
min-height: 44px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__list-tabs button.is-active,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs button.is-active {
|
||||
border-color: var(--profile-accent-border);
|
||||
background: var(--profile-accent-soft);
|
||||
color: var(--profile-accent);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
padding: 12px;
|
||||
border-color: var(--profile-border);
|
||||
border-radius: 13px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(0, 255, 136, 0.06), transparent 60%),
|
||||
rgba(255, 255, 255, 0.026);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary small,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary em {
|
||||
color: var(--profile-soft);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary strong {
|
||||
color: var(--profile-text);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary-metric strong {
|
||||
color: var(--profile-accent);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__actions {
|
||||
display: grid;
|
||||
gap: 9px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__share-btn {
|
||||
min-height: 42px;
|
||||
border-color: var(--profile-border);
|
||||
border-radius: var(--profile-radius-sm);
|
||||
background: var(--profile-control);
|
||||
color: var(--profile-muted);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__share-btn:hover,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__share-btn:focus-visible {
|
||||
border-color: var(--profile-border-strong);
|
||||
background: var(--profile-control-strong);
|
||||
color: var(--profile-text);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__actions .profile-page__share-btn.profile-page__share-btn--primary {
|
||||
border-color: rgba(0, 255, 136, 0.74);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(88, 255, 172, 0.98), rgba(0, 216, 116, 0.92));
|
||||
color: #061014;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__actions .profile-page__share-btn.profile-page__share-btn--primary:hover,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__actions .profile-page__share-btn.profile-page__share-btn--primary:focus-visible {
|
||||
border-color: #35ffa2;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(115, 255, 187, 1), rgba(0, 216, 116, 0.96));
|
||||
color: #061014;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__share-btn--plan {
|
||||
min-height: 34px;
|
||||
border-color: var(--profile-accent-border);
|
||||
border-style: dashed;
|
||||
background: var(--profile-accent-soft);
|
||||
color: var(--profile-accent);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__share-btn--danger {
|
||||
border-color: rgba(255, 90, 95, 0.18);
|
||||
background: rgba(255, 90, 95, 0.045);
|
||||
color: rgba(255, 165, 168, 0.84);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main {
|
||||
gap: 16px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 6px;
|
||||
min-height: 52px;
|
||||
margin: 0;
|
||||
padding: 6px;
|
||||
border-radius: var(--profile-radius-lg);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs button {
|
||||
min-width: 0;
|
||||
min-height: 40px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 12px;
|
||||
background: transparent;
|
||||
color: var(--profile-muted);
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
padding: clamp(14px, 1.8vw, 20px);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section-head {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
grid-template-areas:
|
||||
"title meta"
|
||||
"desc meta";
|
||||
row-gap: 4px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section-label {
|
||||
color: var(--profile-text);
|
||||
font-size: 16px;
|
||||
font-weight: 820;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section-desc {
|
||||
color: var(--profile-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section-meta {
|
||||
border-color: var(--profile-accent-border);
|
||||
background: var(--profile-accent-soft);
|
||||
color: var(--profile-accent);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__review-list {
|
||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card {
|
||||
border-radius: var(--profile-radius-md);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.034), transparent),
|
||||
rgba(255, 255, 255, 0.018);
|
||||
transition:
|
||||
border-color var(--transition-fast),
|
||||
background var(--transition-fast),
|
||||
transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__interactive-card:hover,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__interactive-card:focus-visible {
|
||||
border-color: rgba(0, 255, 136, 0.28);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(0, 255, 136, 0.046), transparent),
|
||||
rgba(255, 255, 255, 0.024);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card {
|
||||
grid-template-columns: 94px minmax(0, 1fr);
|
||||
height: auto;
|
||||
min-height: 128px;
|
||||
max-height: none;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview {
|
||||
width: 94px;
|
||||
height: 98px;
|
||||
min-height: 98px;
|
||||
max-height: 98px;
|
||||
border-color: var(--profile-border);
|
||||
border-radius: 12px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(0, 255, 136, 0.06), transparent 64%),
|
||||
var(--profile-control);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview img,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview video {
|
||||
height: 98px;
|
||||
min-height: 98px;
|
||||
max-height: 98px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-badge {
|
||||
border-color: rgba(0, 255, 136, 0.24);
|
||||
background: rgba(5, 10, 8, 0.78);
|
||||
color: var(--profile-accent);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-body {
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
gap: 7px;
|
||||
height: 98px;
|
||||
min-height: 98px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-head {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-head strong {
|
||||
color: var(--profile-text);
|
||||
font-size: 14px;
|
||||
line-height: 1.28;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-head span {
|
||||
max-width: 76px;
|
||||
overflow: hidden;
|
||||
padding: 3px 7px;
|
||||
border: 1px solid rgba(0, 255, 136, 0.22);
|
||||
border-radius: 999px;
|
||||
background: var(--profile-accent-soft);
|
||||
color: var(--profile-accent);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card p {
|
||||
display: -webkit-box;
|
||||
min-height: 0;
|
||||
max-height: none;
|
||||
overflow: hidden;
|
||||
color: var(--profile-muted);
|
||||
line-height: 1.45;
|
||||
white-space: normal;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-meta {
|
||||
min-height: 0;
|
||||
color: var(--profile-soft);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__empty-state {
|
||||
min-height: 240px;
|
||||
border-style: dashed;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.026), transparent),
|
||||
rgba(255, 255, 255, 0.014);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__empty-mark,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__empty-btn {
|
||||
border-color: var(--profile-accent-border);
|
||||
background: var(--profile-accent-soft);
|
||||
color: var(--profile-accent);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__detail-overlay {
|
||||
--profile-page: #08090b;
|
||||
--profile-panel: #121416;
|
||||
--profile-control: #181b1e;
|
||||
--profile-border: rgba(255, 255, 255, 0.085);
|
||||
--profile-border-strong: rgba(255, 255, 255, 0.15);
|
||||
--profile-text: #f4f7f5;
|
||||
--profile-muted: rgba(225, 235, 231, 0.64);
|
||||
--profile-accent: #00ff88;
|
||||
--profile-accent-soft: rgba(0, 255, 136, 0.12);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__detail-backdrop {
|
||||
background: rgba(0, 0, 0, 0.72);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__detail-panel {
|
||||
border-color: var(--profile-border-strong);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.014)),
|
||||
var(--profile-panel);
|
||||
box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__detail-eyebrow,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__detail-action {
|
||||
color: var(--profile-accent);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__detail-head h2 {
|
||||
color: var(--profile-text);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__detail-preview,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__detail-info p,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__detail-info dl div,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__detail-close,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__detail-action {
|
||||
border-color: var(--profile-border);
|
||||
background: var(--profile-control);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__detail-actions {
|
||||
border-top-color: var(--profile-border);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.006)),
|
||||
var(--profile-panel);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__detail-action--primary {
|
||||
border-color: rgba(0, 255, 136, 0.62);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(0, 255, 136, 0.18), rgba(0, 255, 136, 0.11)),
|
||||
var(--profile-control);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__detail-action--secondary {
|
||||
color: var(--profile-text);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__detail-info p,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__detail-info dt {
|
||||
color: var(--profile-muted);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__detail-info dd {
|
||||
color: var(--profile-text);
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__body {
|
||||
grid-template-columns: 1fr;
|
||||
width: min(760px, calc(100% - 32px));
|
||||
margin-top: -42px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.05fr) minmax(220px, 0.95fr);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar-head {
|
||||
grid-row: span 4;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__banner {
|
||||
height: 138px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__body {
|
||||
width: min(100% - 22px, 560px);
|
||||
gap: 14px;
|
||||
margin-top: -28px;
|
||||
padding-bottom: 84px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar-head {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar-ring {
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar-ring .profile-page__avatar,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar {
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary-metric {
|
||||
justify-items: start;
|
||||
padding-top: 10px;
|
||||
padding-left: 0;
|
||||
border-top: 1px solid var(--profile-border);
|
||||
border-left: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs {
|
||||
display: flex;
|
||||
min-height: 48px;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x proximity;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs button {
|
||||
flex: 0 0 auto;
|
||||
min-width: 92px;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section {
|
||||
padding: 13px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section-head {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-areas:
|
||||
"title"
|
||||
"desc"
|
||||
"meta";
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section-desc {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-grid,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__review-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card {
|
||||
grid-template-columns: 84px minmax(0, 1fr);
|
||||
min-height: 112px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview {
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
min-height: 84px;
|
||||
max-height: 84px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview img,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview video {
|
||||
height: 84px;
|
||||
min-height: 84px;
|
||||
max-height: 84px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-body {
|
||||
height: 84px;
|
||||
min-height: 84px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__body {
|
||||
width: min(100% - 16px, 380px);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__counts {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__count {
|
||||
padding: 9px 4px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card {
|
||||
grid-template-columns: 74px minmax(0, 1fr);
|
||||
gap: 9px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
min-height: 74px;
|
||||
max-height: 74px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview img,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview video {
|
||||
height: 74px;
|
||||
min-height: 74px;
|
||||
max-height: 74px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-body {
|
||||
gap: 5px;
|
||||
height: 74px;
|
||||
min-height: 74px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Personal center mobile comfort pass: compact account controls and keep library navigation reachable. */
|
||||
@media (max-width: 640px) {
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(0, 255, 136, 0.035), transparent 180px),
|
||||
var(--profile-page);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__body {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__username {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__bio-display {
|
||||
min-height: 34px;
|
||||
padding: 7px 11px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__count {
|
||||
min-height: 58px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card {
|
||||
gap: 9px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__list-tabs button {
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__actions {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__actions .profile-page__share-btn {
|
||||
min-height: 40px;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__actions .profile-page__share-btn--plan,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__actions .profile-page__share-btn--primary {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 12;
|
||||
margin-top: -1px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-color: rgba(255, 255, 255, 0.11);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
|
||||
rgba(18, 20, 22, 0.96);
|
||||
box-shadow:
|
||||
0 1px 0 rgba(0, 255, 136, 0.1) inset,
|
||||
0 16px 34px rgba(0, 0, 0, 0.32);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section-label {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card {
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-head strong {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-meta {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__actions {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__actions .profile-page__share-btn--plan,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__actions .profile-page__share-btn--primary {
|
||||
grid-column: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ecommerce generation page: keep its carousel and composer independent from
|
||||
the community carousel rules that share class names. */
|
||||
.web-shell[data-ui-theme="dark-green"] .ecommerce-landing-page {
|
||||
|
||||
@@ -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