feat: refine generation workspace experience
This commit is contained in:
@@ -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>
|
||||
@@ -0,0 +1,301 @@
|
||||
/**
|
||||
* Dynamic analysis without Playwright - uses Node.js to analyze module structure,
|
||||
* dependency graph, import patterns, and potential runtime costs.
|
||||
*/
|
||||
import { readFileSync, readdirSync, statSync } from 'fs';
|
||||
import { join, relative, basename } from 'path';
|
||||
|
||||
const SRC = join(import.meta.dirname, '..', 'src');
|
||||
const DIST = join(import.meta.dirname, '..', 'dist');
|
||||
|
||||
const results = [];
|
||||
function walk(dir) {
|
||||
for (const entry of readdirSync(dir, { withFileTypes: true })) {
|
||||
const full = join(dir, entry.name);
|
||||
if (entry.isDirectory() && entry.name !== 'node_modules') walk(full);
|
||||
else if (/\.(tsx?|jsx?)$/.test(entry.name)) {
|
||||
const content = readFileSync(full, 'utf-8');
|
||||
results.push({ file: relative(join(SRC, '..'), full), content, lines: content.split('\n').length });
|
||||
}
|
||||
}
|
||||
}
|
||||
walk(SRC);
|
||||
|
||||
// ─── 1. Dependency Graph Analysis ───
|
||||
console.log('═══════════════════════════════════════════════');
|
||||
console.log(' 1. MODULE DEPENDENCY GRAPH ANALYSIS');
|
||||
console.log('═══════════════════════════════════════════════');
|
||||
|
||||
const importMap = new Map(); // file -> [imports]
|
||||
const importedBy = new Map(); // file -> [importers]
|
||||
|
||||
for (const r of results) {
|
||||
const imports = [];
|
||||
// Match import statements
|
||||
const importRe = /import\s+(?:.*?\s+from\s+)?['"]([^'"]+)['"]/g;
|
||||
let m;
|
||||
while ((m = importRe.exec(r.content)) !== null) {
|
||||
imports.push(m[1]);
|
||||
}
|
||||
// Match dynamic imports
|
||||
const dynRe = /import\s*\(\s*['"]([^'"]+)['"]\s*\)/g;
|
||||
while ((m = dynRe.exec(r.content)) !== null) {
|
||||
imports.push(`[dynamic]${m[1]}`);
|
||||
}
|
||||
importMap.set(r.file, imports);
|
||||
}
|
||||
|
||||
// Find circular dependencies
|
||||
console.log('\n--- Circular Dependency Detection ---');
|
||||
function findCircular(file, visited = new Set(), path = []) {
|
||||
if (visited.has(file)) {
|
||||
if (path.includes(file)) {
|
||||
console.log(` [CIRCULAR] ${path.slice(path.indexOf(file)).join(' -> ')} -> ${file}`);
|
||||
}
|
||||
return;
|
||||
}
|
||||
visited.add(file);
|
||||
path.push(file);
|
||||
const deps = importMap.get(file) || [];
|
||||
for (const dep of deps) {
|
||||
if (dep.startsWith('.') || dep.startsWith('/')) {
|
||||
// Resolve relative path
|
||||
const dir = file.split('/').slice(0, -1).join('/');
|
||||
const resolved = dep.replace(/^\.\//, dir + '/').replace(/^\.\.\//, '');
|
||||
// Find matching file
|
||||
for (const r of results) {
|
||||
if (r.file.includes(resolved) || r.file.includes(basename(resolved))) {
|
||||
findCircular(r.file, new Set(visited), [...path]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Check high-fanin files (imported by many)
|
||||
const fanIn = new Map();
|
||||
for (const [file, imports] of importMap) {
|
||||
for (const imp of imports) {
|
||||
const key = imp.replace(/\[dynamic\]/, '');
|
||||
fanIn.set(key, (fanIn.get(key) || 0) + 1);
|
||||
}
|
||||
}
|
||||
|
||||
console.log('\n--- High Fan-In Modules (most imported) ---');
|
||||
const sortedFanIn = [...fanIn.entries()].sort((a, b) => b[1] - a[1]).slice(0, 15);
|
||||
for (const [mod, count] of sortedFanIn) {
|
||||
const bar = '█'.repeat(Math.min(30, count));
|
||||
console.log(` ${mod.padEnd(50)} ${String(count).padStart(3)}x ${bar}`);
|
||||
}
|
||||
|
||||
// Check high-fanout files (import many)
|
||||
console.log('\n--- High Fan-Out Modules (import most) ---');
|
||||
const sortedFanOut = [...importMap.entries()]
|
||||
.map(([f, imps]) => [f, imps.length])
|
||||
.sort((a, b) => b[1] - a[1]).slice(0, 15);
|
||||
for (const [file, count] of sortedFanOut) {
|
||||
const bar = '█'.repeat(Math.min(30, count));
|
||||
console.log(` ${file.padEnd(50)} ${String(count).padStart(3)} deps ${bar}`);
|
||||
}
|
||||
|
||||
// Dynamic imports analysis (lazy loading effectiveness)
|
||||
console.log('\n--- Lazy Loading (Dynamic Imports) ---');
|
||||
let dynamicImports = 0, staticImports = 0;
|
||||
for (const [file, imports] of importMap) {
|
||||
for (const imp of imports) {
|
||||
if (imp.startsWith('[dynamic]')) dynamicImports++;
|
||||
else staticImports++;
|
||||
}
|
||||
}
|
||||
console.log(` Static imports: ${staticImports}`);
|
||||
console.log(` Dynamic imports: ${dynamicImports}`);
|
||||
console.log(` Lazy load ratio: ${((dynamicImports / (staticImports + dynamicImports)) * 100).toFixed(1)}%`);
|
||||
|
||||
// Find files that should be lazy loaded but aren't
|
||||
const largePages = results.filter(r => r.lines > 500 && r.file.includes('Page'));
|
||||
for (const r of largePages) {
|
||||
const isLazyImported = [...importMap.values()].some(imps =>
|
||||
imps.some(i => i.startsWith('[dynamic]') && i.includes(basename(r.file, '.tsx')))
|
||||
);
|
||||
if (!isLazyImported && !r.file.includes('App')) {
|
||||
// Check if it's referenced in App.tsx
|
||||
const appContent = results.find(x => x.file === 'src/App.tsx')?.content || '';
|
||||
if (appContent.includes(basename(r.file, '.tsx'))) {
|
||||
console.log(` [INFO] ${r.file} (${r.lines} lines) - loaded via App.tsx`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ─── 2. React Rendering Cost Analysis ───
|
||||
console.log('\n═══════════════════════════════════════════════');
|
||||
console.log(' 2. REACT RENDERING COST ANALYSIS');
|
||||
console.log('═══════════════════════════════════════════════');
|
||||
|
||||
// Count useState/useReducer per component (state update triggers re-render)
|
||||
console.log('\n--- State Hook Density ---');
|
||||
for (const r of results) {
|
||||
if (!r.file.endsWith('.tsx')) continue;
|
||||
const stateHooks = (r.content.match(/useState\s*[<(]/g) || []).length;
|
||||
const reducers = (r.content.match(/useReducer\s*[<(]/g) || []).length;
|
||||
const effects = (r.content.match(/useEffect\s*\(/g) || []).length;
|
||||
const memos = (r.content.match(/useMemo\s*\(/g) || []).length;
|
||||
const callbacks = (r.content.match(/useCallback\s*[<(]/g) || []).length;
|
||||
const refs = (r.content.match(/useRef\s*[<(]/g) || []).length;
|
||||
|
||||
const totalHooks = stateHooks + reducers + effects + memos + callbacks + refs;
|
||||
if (totalHooks > 15) {
|
||||
const risk = totalHooks > 30 ? '🔴 HIGH' : totalHooks > 20 ? '🟡 MEDIUM' : '🟢 LOW';
|
||||
console.log(` ${risk} ${r.file}`);
|
||||
console.log(` useState:${stateHooks} useReducer:${reducers} useEffect:${effects} useMemo:${memos} useCallback:${callbacks} useRef:${refs} (total:${totalHooks})`);
|
||||
|
||||
// Check if there are many state updates that could be batched
|
||||
const setters = r.content.match(/set\w+\(/g) || [];
|
||||
if (setters.length > 20) {
|
||||
console.log(` ⚠️ ${setters.length} state setter calls — potential for excessive re-renders`);
|
||||
}
|
||||
|
||||
// Check for missing useMemo on expensive computations
|
||||
const expensiveInRender = (r.content.match(/\.map\(|\.filter\(|\.reduce\(|\.sort\(/g) || []).length;
|
||||
if (expensiveInRender > 5 && memos === 0) {
|
||||
console.log(` ⚠️ ${expensiveInRender} array operations in render body with 0 useMemo`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ─── 3. useEffect Dependency Analysis ───
|
||||
console.log('\n═══════════════════════════════════════════════');
|
||||
console.log(' 3. useEffect DEPENDENCY ANALYSIS');
|
||||
console.log('═══════════════════════════════════════════════');
|
||||
|
||||
for (const r of results) {
|
||||
if (!r.file.endsWith('.tsx')) continue;
|
||||
// Find useEffect with no dependency array (runs every render)
|
||||
const noDeps = (r.content.match(/useEffect\s*\(\s*\(\)\s*=>\s*\{[\s\S]*?\}\s*\)/g) || []).length;
|
||||
// Find useEffect with empty deps
|
||||
const emptyDeps = (r.content.match(/useEffect\s*\(\s*\(\)\s*=>\s*\{[\s\S]*?\}\s*,\s*\[\s*\]\s*\)/g) || []).length;
|
||||
|
||||
if (noDeps > 0) {
|
||||
console.log(` [RENDER-COST] ${r.file}: ${noDeps} useEffect(s) run EVERY render`);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── 4. Zustand Store Analysis ───
|
||||
console.log('\n═══════════════════════════════════════════════');
|
||||
console.log(' 4. ZUSTAND STORE ANALYSIS');
|
||||
console.log('═══════════════════════════════════════════════');
|
||||
|
||||
const storeFiles = results.filter(r => r.file.includes('store') || r.file.includes('Store'));
|
||||
for (const r of storeFiles) {
|
||||
const stateFields = (r.content.match(/^\s+\w+:/gm) || []).length;
|
||||
const actions = (r.content.match(/^\s+\w+\s*:\s*(\(|function|\w+\s*=>)/gm) || []).length;
|
||||
const subscribers = (r.content.match(/subscribe\s*\(/g) || []).length;
|
||||
|
||||
console.log(`\n ${r.file}`);
|
||||
console.log(` State fields: ~${stateFields}`);
|
||||
console.log(` Actions: ~${actions}`);
|
||||
console.log(` Subscribers: ${subscribers}`);
|
||||
|
||||
// Check for selector usage patterns
|
||||
if (r.content.includes('set(') && !r.content.includes('useShallow')) {
|
||||
console.log(` ⚠️ Uses set() without useShallow — may cause unnecessary re-renders`);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── 5. Bundle Composition Analysis ───
|
||||
console.log('\n═══════════════════════════════════════════════');
|
||||
console.log(' 5. BUNDLE COMPOSITION ANALYSIS');
|
||||
console.log('═══════════════════════════════════════════════');
|
||||
|
||||
if (readdirSync(DIST).includes('assets')) {
|
||||
const assets = readdirSync(join(DIST, 'assets'));
|
||||
const jsFiles = assets.filter(f => f.endsWith('.js') && !f.endsWith('.br'));
|
||||
const cssFiles = assets.filter(f => f.endsWith('.css') && !f.endsWith('.br'));
|
||||
|
||||
let totalJs = 0, totalCss = 0;
|
||||
const chunks = [];
|
||||
for (const f of jsFiles) {
|
||||
const size = statSync(join(DIST, 'assets', f)).size;
|
||||
totalJs += size;
|
||||
chunks.push({ name: f, sizeKB: size / 1024, type: 'js' });
|
||||
}
|
||||
for (const f of cssFiles) {
|
||||
const size = statSync(join(DIST, 'assets', f)).size;
|
||||
totalCss += size;
|
||||
chunks.push({ name: f, sizeKB: size / 1024, type: 'css' });
|
||||
}
|
||||
|
||||
chunks.sort((a, b) => b.sizeKB - a.sizeKB);
|
||||
|
||||
console.log(`\n Total JS: ${(totalJs / 1024).toFixed(1)} KB (${(totalJs / 1024 / 1024).toFixed(2)} MB)`);
|
||||
console.log(` Total CSS: ${(totalCss / 1024).toFixed(1)} KB (${(totalCss / 1024 / 1024).toFixed(2)} MB)`);
|
||||
console.log(` Total: ${((totalJs + totalCss) / 1024).toFixed(1)} KB`);
|
||||
|
||||
// CSS is suspiciously large
|
||||
const cssRatio = totalCss / totalJs;
|
||||
if (cssRatio > 0.5) {
|
||||
console.log(`\n ⚠️ CSS/JS ratio: ${(cssRatio * 100).toFixed(0)}% — CSS bundle may contain unused styles`);
|
||||
console.log(` Consider: PurgeCSS, CSS Modules, or extracting to separate loads`);
|
||||
}
|
||||
|
||||
// Check initial load budget
|
||||
const initialChunks = chunks.filter(c =>
|
||||
c.name.includes('index') || c.name.includes('vendor-react') || c.name.includes('vendor-antd')
|
||||
);
|
||||
const initialLoad = initialChunks.reduce((s, c) => s + c.sizeKB, 0);
|
||||
console.log(`\n Critical path (initial load):`);
|
||||
for (const c of initialChunks) {
|
||||
console.log(` ${c.name.padEnd(45)} ${c.sizeKB.toFixed(1).padStart(8)} KB`);
|
||||
}
|
||||
console.log(` ${'TOTAL'.padEnd(45)} ${initialLoad.toFixed(1).padStart(8)} KB`);
|
||||
|
||||
if (initialLoad > 300) {
|
||||
console.log(`\n ⚠️ Initial load > 300KB — consider code splitting or tree-shaking`);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── 6. API Client Efficiency ───
|
||||
console.log('\n═══════════════════════════════════════════════');
|
||||
console.log(' 6. API CLIENT EFFICIENCY');
|
||||
console.log('═══════════════════════════════════════════════');
|
||||
|
||||
const apiFiles = results.filter(r => r.file.includes('src/api/'));
|
||||
for (const r of apiFiles) {
|
||||
const fetchCalls = (r.content.match(/fetch\s*\(/g) || []).length;
|
||||
const retries = (r.content.match(/retry|Retry|RETRY/g) || []).length;
|
||||
const abortSignals = (r.content.match(/AbortSignal|AbortController/g) || []).length;
|
||||
const timeouts = (r.content.match(/timeout|Timeout|setTimeout/g) || []).length;
|
||||
|
||||
if (fetchCalls > 0) {
|
||||
console.log(`\n ${r.file}`);
|
||||
console.log(` fetch calls: ${fetchCalls}`);
|
||||
console.log(` retry logic: ${retries > 0 ? '✅' : '❌ none'}`);
|
||||
console.log(` abort signals: ${abortSignals > 0 ? '✅' : '❌ none'}`);
|
||||
console.log(` timeouts: ${timeouts}`);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── 7. TypeScript Compilation Metrics ───
|
||||
console.log('\n═══════════════════════════════════════════════');
|
||||
console.log(' 7. TYPE COMPLEXITY');
|
||||
console.log('═══════════════════════════════════════════════');
|
||||
|
||||
let totalTypes = 0, totalInterfaces = 0, totalEnums = 0, totalGenerics = 0;
|
||||
for (const r of results) {
|
||||
totalTypes += (r.content.match(/^export\s+type\s+/gm) || []).length;
|
||||
totalTypes += (r.content.match(/^type\s+/gm) || []).length;
|
||||
totalInterfaces += (r.content.match(/^export\s+interface\s+/gm) || []).length;
|
||||
totalInterfaces += (r.content.match(/^interface\s+/gm) || []).length;
|
||||
totalEnums += (r.content.match(/enum\s+\w+/g) || []).length;
|
||||
totalGenerics += (r.content.match(/<\w+(?:\s*,\s*\w+)*>/g) || []).length;
|
||||
}
|
||||
|
||||
console.log(` Type aliases: ${totalTypes}`);
|
||||
console.log(` Interfaces: ${totalInterfaces}`);
|
||||
console.log(` Enums: ${totalEnums}`);
|
||||
console.log(` Generic usages: ${totalGenerics}`);
|
||||
console.log(` Total TS files: ${results.length}`);
|
||||
|
||||
// ─── Final Summary ───
|
||||
console.log('\n═══════════════════════════════════════════════');
|
||||
console.log(' ANALYSIS COMPLETE');
|
||||
console.log('═══════════════════════════════════════════════');
|
||||
@@ -0,0 +1,305 @@
|
||||
/**
|
||||
* Dynamic performance analysis using Playwright.
|
||||
* Measures: page load, bundle sizes, memory, rendering, network.
|
||||
*/
|
||||
import { chromium } from 'playwright';
|
||||
import { readFileSync, readdirSync, statSync } from 'fs';
|
||||
import { join } from 'path';
|
||||
|
||||
const DIST = join(import.meta.dirname, '..', 'dist');
|
||||
const PORT = 4174;
|
||||
|
||||
// ─── Bundle analysis from dist ───
|
||||
function analyzeBundles() {
|
||||
const assets = readdirSync(join(DIST, 'assets'));
|
||||
const jsFiles = assets.filter(f => f.endsWith('.js'));
|
||||
const cssFiles = assets.filter(f => f.endsWith('.css'));
|
||||
const brFiles = assets.filter(f => f.endsWith('.js.br'));
|
||||
|
||||
let totalJsSize = 0, totalCssSize = 0, totalBrSize = 0;
|
||||
const bundles = [];
|
||||
|
||||
for (const f of jsFiles) {
|
||||
const size = statSync(join(DIST, 'assets', f)).size;
|
||||
totalJsSize += size;
|
||||
bundles.push({ name: f, sizeKB: (size / 1024).toFixed(2), type: 'js' });
|
||||
}
|
||||
for (const f of cssFiles) {
|
||||
const size = statSync(join(DIST, 'assets', f)).size;
|
||||
totalCssSize += size;
|
||||
bundles.push({ name: f, sizeKB: (size / 1024).toFixed(2), type: 'css' });
|
||||
}
|
||||
for (const f of brFiles) {
|
||||
const size = statSync(join(DIST, 'assets', f)).size;
|
||||
totalBrSize += size;
|
||||
}
|
||||
|
||||
bundles.sort((a, b) => parseFloat(b.sizeKB) - parseFloat(a.sizeKB));
|
||||
|
||||
console.log('\n═══════════════════════════════════════════════');
|
||||
console.log(' BUNDLE SIZE ANALYSIS');
|
||||
console.log('═══════════════════════════════════════════════');
|
||||
console.log(`\nTotal JS (raw): ${(totalJsSize / 1024).toFixed(1)} KB`);
|
||||
console.log(`Total CSS (raw): ${(totalCssSize / 1024).toFixed(1)} KB`);
|
||||
console.log(`Total JS (brotli): ${(totalBrSize / 1024).toFixed(1)} KB`);
|
||||
console.log(`\nTop 15 bundles by raw size:`);
|
||||
for (const b of bundles.slice(0, 15)) {
|
||||
const bar = '█'.repeat(Math.min(40, Math.round(parseFloat(b.sizeKB) / 5)));
|
||||
console.log(` ${b.name.padEnd(45)} ${String(b.sizeKB).padStart(8)} KB ${bar}`);
|
||||
}
|
||||
|
||||
// Identify oversized chunks
|
||||
console.log('\n⚠️ Oversized chunks (>50KB raw):');
|
||||
for (const b of bundles.filter(b => parseFloat(b.sizeKB) > 50)) {
|
||||
console.log(` [WARN] ${b.name} = ${b.sizeKB} KB`);
|
||||
}
|
||||
|
||||
return { totalJsSize, totalCssSize, totalBrSize, bundles };
|
||||
}
|
||||
|
||||
// ─── Runtime performance with Playwright ───
|
||||
async function runtimeAnalysis() {
|
||||
console.log('\n═══════════════════════════════════════════════');
|
||||
console.log(' RUNTIME PERFORMANCE ANALYSIS');
|
||||
console.log('═══════════════════════════════════════════════');
|
||||
|
||||
const browser = await chromium.launch({ headless: true });
|
||||
const context = await browser.newContext({ viewport: { width: 1920, height: 1080 } });
|
||||
const page = await context.newPage();
|
||||
|
||||
// Collect performance metrics
|
||||
const perfEntries = [];
|
||||
page.on('console', msg => {
|
||||
if (msg.type() === 'info' && msg.text().startsWith('[PERF]')) {
|
||||
perfEntries.push(msg.text());
|
||||
}
|
||||
});
|
||||
|
||||
// Track network requests
|
||||
const networkRequests = [];
|
||||
page.on('request', req => {
|
||||
networkRequests.push({
|
||||
url: req.url(),
|
||||
method: req.method(),
|
||||
startTime: Date.now()
|
||||
});
|
||||
});
|
||||
|
||||
const networkResponses = [];
|
||||
page.on('response', res => {
|
||||
networkResponses.push({
|
||||
url: res.url(),
|
||||
status: res.status(),
|
||||
size: res.headers()['content-length'] || '0',
|
||||
endTime: Date.now()
|
||||
});
|
||||
});
|
||||
|
||||
// Measure page load
|
||||
console.log('\n--- Page Load Performance ---');
|
||||
const navStart = Date.now();
|
||||
|
||||
try {
|
||||
const response = await page.goto(`http://127.0.0.1:${PORT}/`, {
|
||||
waitUntil: 'networkidle',
|
||||
timeout: 30000
|
||||
});
|
||||
const loadTime = Date.now() - navStart;
|
||||
console.log(` Initial page load: ${loadTime}ms`);
|
||||
console.log(` HTTP status: ${response.status()}`);
|
||||
|
||||
// Get navigation timing from the browser
|
||||
const navTiming = await page.evaluate(() => {
|
||||
const perf = performance.getEntriesByType('navigation')[0];
|
||||
if (!perf) return null;
|
||||
return {
|
||||
dns: Math.round(perf.domainLookupEnd - perf.domainLookupStart),
|
||||
tcp: Math.round(perf.connectEnd - perf.connectStart),
|
||||
ttfb: Math.round(perf.responseStart - perf.requestStart),
|
||||
download: Math.round(perf.responseEnd - perf.responseStart),
|
||||
domInteractive: Math.round(perf.domInteractive),
|
||||
domComplete: Math.round(perf.domComplete),
|
||||
loadEvent: Math.round(perf.loadEventEnd),
|
||||
transferSize: perf.transferSize,
|
||||
};
|
||||
});
|
||||
|
||||
if (navTiming) {
|
||||
console.log(`\n Navigation Timing:`);
|
||||
console.log(` DNS lookup: ${navTiming.dns}ms`);
|
||||
console.log(` TCP connect: ${navTiming.tcp}ms`);
|
||||
console.log(` TTFB: ${navTiming.ttfb}ms`);
|
||||
console.log(` Download: ${navTiming.download}ms`);
|
||||
console.log(` DOM interactive: ${navTiming.domInteractive}ms`);
|
||||
console.log(` DOM complete: ${navTiming.domComplete}ms`);
|
||||
console.log(` Load event end: ${navTiming.loadEvent}ms`);
|
||||
console.log(` Transfer size: ${(navTiming.transferSize / 1024).toFixed(1)} KB`);
|
||||
}
|
||||
|
||||
// Resource timing
|
||||
const resources = await page.evaluate(() => {
|
||||
return performance.getEntriesByType('resource').map(r => ({
|
||||
name: r.name.split('/').pop(),
|
||||
type: r.initiatorType,
|
||||
duration: Math.round(r.duration),
|
||||
size: r.transferSize,
|
||||
}));
|
||||
});
|
||||
|
||||
console.log(`\n--- Resource Loading ---`);
|
||||
console.log(` Total resources: ${resources.length}`);
|
||||
const totalTransfer = resources.reduce((s, r) => s + r.size, 0);
|
||||
console.log(` Total transfer: ${(totalTransfer / 1024).toFixed(1)} KB`);
|
||||
|
||||
const slowResources = resources.filter(r => r.duration > 100).sort((a, b) => b.duration - a.duration);
|
||||
if (slowResources.length > 0) {
|
||||
console.log(`\n Slow resources (>100ms):`);
|
||||
for (const r of slowResources.slice(0, 10)) {
|
||||
console.log(` [SLOW] ${r.name.padEnd(40)} ${r.duration}ms (${(r.size/1024).toFixed(1)}KB)`);
|
||||
}
|
||||
}
|
||||
|
||||
// Memory analysis
|
||||
console.log(`\n--- Memory Analysis ---`);
|
||||
const memory = await page.evaluate(() => {
|
||||
if (performance.memory) {
|
||||
return {
|
||||
usedJSHeap: performance.memory.usedJSHeapSize,
|
||||
totalJSHeap: performance.memory.totalJSHeapSize,
|
||||
heapLimit: performance.memory.jsHeapSizeLimit,
|
||||
};
|
||||
}
|
||||
return null;
|
||||
});
|
||||
|
||||
if (memory) {
|
||||
console.log(` Used JS heap: ${(memory.usedJSHeap / 1024 / 1024).toFixed(1)} MB`);
|
||||
console.log(` Total JS heap: ${(memory.totalJSHeap / 1024 / 1024).toFixed(1)} MB`);
|
||||
console.log(` Heap limit: ${(memory.heapLimit / 1024 / 1024).toFixed(1)} MB`);
|
||||
console.log(` Heap utilization: ${((memory.usedJSHeap / memory.heapLimit) * 100).toFixed(1)}%`);
|
||||
} else {
|
||||
console.log(' Memory API not available (Chromium flag needed: --enable-precise-memory-info)');
|
||||
}
|
||||
|
||||
// DOM complexity
|
||||
console.log(`\n--- DOM Complexity ---`);
|
||||
const domStats = await page.evaluate(() => {
|
||||
const allElements = document.querySelectorAll('*');
|
||||
const tagCounts = {};
|
||||
let maxDepth = 0;
|
||||
let totalNodes = allElements.length;
|
||||
|
||||
allElements.forEach(el => {
|
||||
const tag = el.tagName.toLowerCase();
|
||||
tagCounts[tag] = (tagCounts[tag] || 0) + 1;
|
||||
let depth = 0, parent = el.parentElement;
|
||||
while (parent) { depth++; parent = parent.parentElement; }
|
||||
if (depth > maxDepth) maxDepth = depth;
|
||||
});
|
||||
|
||||
return { totalNodes, maxDepth, tagCounts };
|
||||
});
|
||||
|
||||
console.log(` Total DOM nodes: ${domStats.totalNodes}`);
|
||||
console.log(` Max DOM depth: ${domStats.maxDepth}`);
|
||||
console.log(` Top 10 tags:`);
|
||||
const sortedTags = Object.entries(domStats.tagCounts).sort((a, b) => b[1] - a[1]);
|
||||
for (const [tag, count] of sortedTags.slice(0, 10)) {
|
||||
console.log(` <${tag}>: ${count}`);
|
||||
}
|
||||
|
||||
// DOM warnings
|
||||
if (domStats.totalNodes > 1500) {
|
||||
console.log(` ⚠️ DOM nodes > 1500 — may cause sluggish rendering`);
|
||||
}
|
||||
if (domStats.maxDepth > 15) {
|
||||
console.log(` ⚠️ DOM depth > 15 — may slow style/layout calculations`);
|
||||
}
|
||||
|
||||
// React-specific analysis: check for unnecessary re-renders
|
||||
console.log(`\n--- Render Performance ---`);
|
||||
const renderMetrics = await page.evaluate(() => {
|
||||
// Check if React DevTools hook exists
|
||||
const hasReact = !!window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
return {
|
||||
hasReact,
|
||||
eventListeners: typeof getEventListeners !== 'undefined' ? 'available' : 'not-in-page-context',
|
||||
};
|
||||
});
|
||||
console.log(` React DevTools: ${renderMetrics.hasReact ? 'detected' : 'not detected'}`);
|
||||
|
||||
// Measure interaction performance - simulate scroll
|
||||
console.log(`\n--- Interaction Performance ---`);
|
||||
const scrollStart = Date.now();
|
||||
await page.evaluate(() => {
|
||||
const container = document.querySelector('.app-shell-content') || document.documentElement;
|
||||
for (let i = 0; i < 10; i++) {
|
||||
container.scrollTop = i * 100;
|
||||
}
|
||||
container.scrollTop = 0;
|
||||
});
|
||||
const scrollTime = Date.now() - scrollStart;
|
||||
console.log(` 10x scroll ops: ${scrollTime}ms`);
|
||||
|
||||
// Navigate to different routes to test lazy loading
|
||||
const routes = ['#/', '#/canvas', '#/workbench', '#/ecommerce', '#/image-workbench', '#/home'];
|
||||
console.log(`\n--- Route Navigation (Lazy Loading) ---`);
|
||||
for (const route of routes) {
|
||||
const routeStart = Date.now();
|
||||
await page.goto(`http://127.0.0.1:${PORT}/${route}`, { waitUntil: 'domcontentloaded', timeout: 15000 });
|
||||
const routeTime = Date.now() - routeStart;
|
||||
console.log(` ${route.padEnd(30)} ${routeTime}ms`);
|
||||
}
|
||||
|
||||
// Memory after navigation
|
||||
const memoryAfter = await page.evaluate(() => {
|
||||
if (performance.memory) {
|
||||
return {
|
||||
usedJSHeap: performance.memory.usedJSHeapSize,
|
||||
totalJSHeap: performance.memory.totalJSHeapSize,
|
||||
};
|
||||
}
|
||||
return null;
|
||||
});
|
||||
|
||||
if (memoryAfter) {
|
||||
console.log(`\n--- Memory After Route Navigation ---`);
|
||||
console.log(` Used JS heap: ${(memoryAfter.usedJSHeap / 1024 / 1024).toFixed(1)} MB`);
|
||||
console.log(` Total JS heap: ${(memoryAfter.totalJSHeap / 1024 / 1024).toFixed(1)} MB`);
|
||||
if (memory) {
|
||||
const delta = memoryAfter.usedJSHeap - memory.usedJSHeap;
|
||||
console.log(` Heap delta: ${(delta > 0 ? '+' : '')}${(delta / 1024 / 1024).toFixed(1)} MB`);
|
||||
}
|
||||
}
|
||||
|
||||
// Network summary
|
||||
console.log(`\n--- Network Summary ---`);
|
||||
console.log(` Total requests: ${networkResponses.length}`);
|
||||
const totalNetworkSize = networkResponses.reduce((s, r) => s + parseInt(r.size || '0'), 0);
|
||||
console.log(` Total response: ${(totalNetworkSize / 1024).toFixed(1)} KB`);
|
||||
const failedRequests = networkResponses.filter(r => r.status >= 400);
|
||||
if (failedRequests.length > 0) {
|
||||
console.log(` Failed requests: ${failedRequests.length}`);
|
||||
for (const r of failedRequests) {
|
||||
console.log(` [${r.status}] ${r.url}`);
|
||||
}
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.log(`\n ❌ Error during runtime analysis: ${err.message}`);
|
||||
} finally {
|
||||
await browser.close();
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Main ───
|
||||
console.log('╔═══════════════════════════════════════════════╗');
|
||||
console.log('║ OmniAI Web Preview - Performance Analysis ║');
|
||||
console.log('╚═══════════════════════════════════════════════╝');
|
||||
|
||||
const bundleResult = analyzeBundles();
|
||||
await runtimeAnalysis();
|
||||
|
||||
console.log('\n═══════════════════════════════════════════════');
|
||||
console.log(' ANALYSIS COMPLETE');
|
||||
console.log('═══════════════════════════════════════════════');
|
||||
@@ -0,0 +1,148 @@
|
||||
import { readdirSync, readFileSync, statSync } from 'fs';
|
||||
import { join, relative } from 'path';
|
||||
|
||||
const SRC = join(import.meta.dirname, '..', 'src');
|
||||
const results = [];
|
||||
|
||||
function walk(dir) {
|
||||
for (const entry of readdirSync(dir, { withFileTypes: true })) {
|
||||
const full = join(dir, entry.name);
|
||||
if (entry.isDirectory() && entry.name !== 'node_modules') walk(full);
|
||||
else if (/\.(tsx?|jsx?)$/.test(entry.name)) {
|
||||
const content = readFileSync(full, 'utf-8');
|
||||
const lines = content.split('\n').length;
|
||||
results.push({ file: relative(join(SRC, '..'), full), lines, content });
|
||||
}
|
||||
}
|
||||
}
|
||||
walk(SRC);
|
||||
results.sort((a, b) => b.lines - a.lines);
|
||||
|
||||
console.log('=== TOP 30 FILES BY LINE COUNT ===');
|
||||
for (const r of results.slice(0, 30)) {
|
||||
console.log(`${String(r.lines).padStart(5)} ${r.file}`);
|
||||
}
|
||||
|
||||
// Detect nested loops (3+ levels)
|
||||
console.log('\n=== NESTED LOOP DETECTION (3+ levels) ===');
|
||||
const loopPatterns = [
|
||||
/for\s*\(/g, /while\s*\(/g, /\.forEach\s*\(/g, /\.map\s*\(/g,
|
||||
/\.filter\s*\(/g, /\.reduce\s*\(/g, /\.some\s*\(/g, /\.every\s*\(/g,
|
||||
/\.flatMap\s*\(/g, /\.find\s*\(/g
|
||||
];
|
||||
|
||||
for (const r of results) {
|
||||
const lines = r.content.split('\n');
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const line = lines[i];
|
||||
let loopCount = 0;
|
||||
for (const p of loopPatterns) {
|
||||
p.lastIndex = 0;
|
||||
if (p.test(line)) loopCount++;
|
||||
}
|
||||
// Check surrounding context for nesting
|
||||
if (loopCount > 0 || /for\s*\(/.test(line) || /\.map\(/.test(line) || /\.forEach\(/.test(line) || /\.filter\(/.test(line) || /\.reduce\(/.test(line)) {
|
||||
// Count loop keywords on this single line
|
||||
let singleLineLoops = 0;
|
||||
for (const p of loopPatterns) {
|
||||
p.lastIndex = 0;
|
||||
const matches = line.match(new RegExp(p.source, 'g'));
|
||||
if (matches) singleLineLoops += matches.length;
|
||||
}
|
||||
if (singleLineLoops >= 2) {
|
||||
console.log(` [NESTED] ${r.file}:${i + 1} (${singleLineLoops} loops on one line)`);
|
||||
console.log(` ${line.trim().substring(0, 120)}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Detect missing cleanup in useEffect
|
||||
console.log('\n=== MEMORY LEAK RISK: useEffect without cleanup ===');
|
||||
for (const r of results) {
|
||||
if (!r.file.endsWith('.tsx') && !r.file.endsWith('.ts')) continue;
|
||||
const content = r.content;
|
||||
// Find useEffect blocks that contain setInterval/setTimeout/addEventListener but no return
|
||||
const useEffectRegex = /useEffect\s*\(\s*\(\)\s*=>\s*\{([\s\S]*?)\}\s*,/g;
|
||||
let match;
|
||||
while ((match = useEffectRegex.exec(content)) !== null) {
|
||||
const body = match[1];
|
||||
const hasTimer = /setInterval|setTimeout/.test(body);
|
||||
const hasListener = /addEventListener/.test(body);
|
||||
const hasSubscribe = /\.subscribe\(/.test(body);
|
||||
const hasCleanup = /return\s*\(\)\s*=>|return\s*function|return\s*\(\{/.test(body);
|
||||
|
||||
if ((hasTimer || hasListener || hasSubscribe) && !hasCleanup) {
|
||||
const lineNum = content.substring(0, match.index).split('\n').length;
|
||||
console.log(` [RISK] ${r.file}:${lineNum}`);
|
||||
if (hasTimer) console.log(` - Has setInterval/setTimeout without cleanup`);
|
||||
if (hasListener) console.log(` - Has addEventListener without cleanup`);
|
||||
if (hasSubscribe) console.log(` - Has subscribe without cleanup`);
|
||||
console.log(` ${body.trim().substring(0, 200)}`);
|
||||
console.log('');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Detect objects/arrays/functions created in render body (not memoized)
|
||||
console.log('\n=== REDUNDANT COMPUTATION: Non-memoized values in components ===');
|
||||
for (const r of results) {
|
||||
if (!r.file.endsWith('.tsx')) continue;
|
||||
const lines = r.content.split('\n');
|
||||
// Look for const x = [...], const x = {...}, const x = (...) => patterns outside useMemo
|
||||
let inUseMemo = 0;
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
if (/useMemo\s*\(/.test(lines[i])) inUseMemo++;
|
||||
if (inUseMemo > 0 && /\)/.test(lines[i])) {
|
||||
// Rough heuristic - not perfect
|
||||
}
|
||||
if (inUseMemo === 0) {
|
||||
// Expensive operations in render
|
||||
if (/\.map\s*\(.*\.map\s*\(/.test(lines[i])) {
|
||||
console.log(` [PERF] ${r.file}:${i + 1} - Chained .map calls in render`);
|
||||
console.log(` ${lines[i].trim().substring(0, 120)}`);
|
||||
}
|
||||
if (/\.filter\s*\(.*\.map\s*\(/.test(lines[i]) || /\.map\s*\(.*\.filter\s*\(/.test(lines[i])) {
|
||||
console.log(` [PERF] ${r.file}:${i + 1} - filter+map chain in render`);
|
||||
console.log(` ${lines[i].trim().substring(0, 120)}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Detect deeply nested conditionals (4+ levels)
|
||||
console.log('\n=== HIGH COMPLEXITY: Deep nesting ===');
|
||||
for (const r of results) {
|
||||
const lines = r.content.split('\n');
|
||||
let maxIndent = 0;
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const line = lines[i];
|
||||
if (line.trim() === '') continue;
|
||||
const indent = line.match(/^(\s*)/)[1].length;
|
||||
// Only flag if inside if/else/switch/ternary
|
||||
if (indent >= 16 && /if\s*\(|else|switch\s*\(|case\s+/.test(line.trim())) {
|
||||
console.log(` [DEEP] ${r.file}:${i + 1} (indent=${indent})`);
|
||||
console.log(` ${line.trim().substring(0, 120)}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Detect inline style objects in JSX (recreated every render)
|
||||
console.log('\n=== REDUNDANT: Inline style objects in JSX ===');
|
||||
for (const r of results) {
|
||||
if (!r.file.endsWith('.tsx')) continue;
|
||||
const lines = r.content.split('\n');
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
if (/style\s*=\s*\{\s*\{/.test(lines[i]) && !/useMemo/.test(lines[i])) {
|
||||
console.log(` [INLINE] ${r.file}:${i + 1}`);
|
||||
console.log(` ${lines[i].trim().substring(0, 120)}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Total stats
|
||||
console.log('\n=== SUMMARY ===');
|
||||
console.log(`Total files: ${results.length}`);
|
||||
console.log(`Total lines: ${results.reduce((s, r) => s + r.lines, 0)}`);
|
||||
console.log(`Files > 500 lines: ${results.filter(r => r.lines > 500).length}`);
|
||||
console.log(`Files > 1000 lines: ${results.filter(r => r.lines > 1000).length}`);
|
||||
@@ -308,11 +308,13 @@ function App() {
|
||||
// Task store
|
||||
const {
|
||||
tasks,
|
||||
setTasks,
|
||||
appendTask,
|
||||
mergeServerTasks,
|
||||
clearTasks,
|
||||
} = useTaskStore(useShallow((s) => ({
|
||||
tasks: s.tasks,
|
||||
setTasks: s.setTasks,
|
||||
appendTask: s.appendTask,
|
||||
mergeServerTasks: s.mergeServerTasks,
|
||||
clearTasks: s.clearTasks,
|
||||
@@ -1122,6 +1124,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":
|
||||
|
||||
@@ -53,9 +53,9 @@ const PRIMARY_NAV_ORDER: WebViewKey[] = [
|
||||
"canvas",
|
||||
"scriptTokens",
|
||||
"tokenUsage",
|
||||
"community",
|
||||
"assets",
|
||||
"more",
|
||||
"assets",
|
||||
"community",
|
||||
];
|
||||
|
||||
function formatBalance(cents: number): string {
|
||||
|
||||
@@ -13,7 +13,7 @@ import {
|
||||
SendOutlined,
|
||||
ThunderboltOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { useRef, useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import "../../styles/pages/agent.css";
|
||||
import WorkspacePageShell from "../../components/WorkspacePageShell";
|
||||
import type { WebGenerationPreviewTask } from "../../types";
|
||||
@@ -73,6 +73,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 {
|
||||
@@ -94,6 +112,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);
|
||||
@@ -204,15 +237,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 />
|
||||
自动模式
|
||||
<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>
|
||||
|
||||
@@ -398,6 +398,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);
|
||||
@@ -1335,7 +1337,7 @@ function CanvasPage({
|
||||
model: defaultVideoModel,
|
||||
aspectRatio: "16:9",
|
||||
resolution: getDefaultVideoQuality(defaultVideoModel),
|
||||
duration: "4",
|
||||
duration: "5",
|
||||
videoMode: "text2video",
|
||||
sourceTextNodeId: source.id,
|
||||
position: {
|
||||
@@ -1359,7 +1361,7 @@ function CanvasPage({
|
||||
model: defaultVideoModel,
|
||||
aspectRatio: "16:9",
|
||||
resolution: getDefaultVideoQuality(defaultVideoModel),
|
||||
duration: "4",
|
||||
duration: "5",
|
||||
videoMode: "text2video",
|
||||
sourceTextNodeId: "",
|
||||
position,
|
||||
@@ -1415,7 +1417,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;
|
||||
@@ -1429,6 +1431,7 @@ function CanvasPage({
|
||||
imageSize: getDefaultImageQuality(fallbackVisibleImageModel),
|
||||
fileName,
|
||||
sourceImageNodeId: options?.sourceImageNodeId,
|
||||
sourceTextNodeId: options?.sourceTextNodeId,
|
||||
position,
|
||||
size: createCanvasNodeSize("image"),
|
||||
};
|
||||
@@ -2034,6 +2037,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;
|
||||
@@ -3632,7 +3749,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}
|
||||
@@ -3640,6 +3757,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`,
|
||||
|
||||
@@ -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 "../../styles/pages/more-tools.css";
|
||||
import "../../styles/pages/image-workbench.css";
|
||||
import StudioToolLayout from "../../components/StudioToolLayout";
|
||||
@@ -60,6 +60,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 () => {
|
||||
@@ -235,6 +236,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">
|
||||
@@ -294,7 +321,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>
|
||||
@@ -372,7 +409,7 @@ function CharacterMixPage({
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
}
|
||||
canvas={
|
||||
isCreating ? (
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
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";
|
||||
import "../../styles/pages/dialog-generator.css";
|
||||
|
||||
type DialogStyle = "style1" | "style2" | "style3" | "style4";
|
||||
type GenerationMode = "dialog" | "video";
|
||||
|
||||
interface DialogItem {
|
||||
id: number;
|
||||
@@ -40,16 +42,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();
|
||||
@@ -195,6 +249,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 "../../styles/pages/more-tools.css";
|
||||
import "../../styles/pages/image-workbench.css";
|
||||
import { aiGenerationClient } from "../../api/aiGenerationClient";
|
||||
@@ -97,6 +97,7 @@ function DigitalHumanPage({
|
||||
const activeTaskIdRef = useRef(activeTaskId);
|
||||
activeTaskIdRef.current = activeTaskId;
|
||||
const keepaliveRestoredRef = useRef(false);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
@@ -148,6 +149,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);
|
||||
@@ -419,7 +442,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>
|
||||
@@ -492,7 +525,7 @@ function DigitalHumanPage({
|
||||
{audioPreview ? <audio src={audioPreview} controls className="studio-audio-preview" /> : null}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
}
|
||||
canvas={
|
||||
resultVideoUrl ? (
|
||||
@@ -560,7 +593,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="取消生成任务">
|
||||
|
||||
@@ -518,6 +518,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);
|
||||
@@ -869,6 +881,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
const [videoOutfitVideoFile, setVideoOutfitVideoFile] = useState<File | null>(null);
|
||||
const [videoOutfitRefFile, setVideoOutfitRefFile] = useState<File | null>(null);
|
||||
const [isCloneSettingsCollapsed, setIsCloneSettingsCollapsed] = useState(false);
|
||||
const [previewZoom, setPreviewZoom] = useState(1);
|
||||
const [requirement, setRequirement] = useState("");
|
||||
const [requirementImageMentionQuery, setRequirementImageMentionQuery] = useState<string | null>(null);
|
||||
const [cloneSettingName, setCloneSettingName] = useState("新建创作");
|
||||
@@ -1126,6 +1139,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);
|
||||
@@ -1637,6 +1676,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
const stamp = Date.now();
|
||||
|
||||
for (const countKey of cloneSetCountKeys) {
|
||||
if (imageAbortRef.current.current) break;
|
||||
const count = counts[countKey];
|
||||
for (let i = 0; i < count; i++) {
|
||||
if (imageAbortRef.current.current) break;
|
||||
@@ -1646,7 +1686,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,
|
||||
@@ -1683,7 +1723,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");
|
||||
@@ -1730,7 +1770,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,
|
||||
@@ -2059,7 +2099,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++;
|
||||
@@ -2179,6 +2219,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}
|
||||
@@ -2362,6 +2406,11 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
<span>
|
||||
上传商品图，AI 即刻生成 <b>符合多电商平台规范</b> 的高转化率商品素材。
|
||||
</span>
|
||||
<div className="clone-ai-preview-zoom">
|
||||
<button type="button" onClick={() => setPreviewZoom((z) => Math.max(0.25, z - 0.1))} disabled={previewZoom <= 0.25} aria-label="缩小">−</button>
|
||||
<span>{Math.round(previewZoom * 100)}%</span>
|
||||
<button type="button" onClick={() => setPreviewZoom((z) => Math.min(2, z + 0.1))} disabled={previewZoom >= 2} aria-label="放大">+</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{cloneOutput === "video" ? (
|
||||
@@ -2484,8 +2533,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>
|
||||
@@ -2493,19 +2543,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 />}
|
||||
@@ -2694,7 +2745,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={ecommerceVideoImageDataUrls}
|
||||
|
||||
@@ -120,6 +120,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 actionNoticeTimerRef = useRef<number | null>(null);
|
||||
@@ -616,6 +617,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="生成记录">
|
||||
@@ -660,9 +667,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">
|
||||
@@ -778,6 +786,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}>
|
||||
<>
|
||||
<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 className="uploaded-image-zoom">
|
||||
<img src={item.src} alt="" />
|
||||
</span>
|
||||
</figure>
|
||||
))}
|
||||
{cloneReferenceImages.length > 4 ? <b>+{cloneReferenceImages.length - 4}</b> : null}
|
||||
</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 "../../styles/pages/more-tools.css";
|
||||
import "../../styles/pages/image-workbench.css";
|
||||
import type { WebImageWorkbenchTool, WebViewKey } from "../../types";
|
||||
@@ -157,6 +157,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);
|
||||
@@ -249,6 +251,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;
|
||||
@@ -281,9 +314,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<HTMLElement>) => { e.preventDefault(); e.stopPropagation(); if (e.dataTransfer.types.includes("Files")) setIsInpaintDragging(true); };
|
||||
const handleInpaintDragLeave = (e: DragEvent<HTMLElement>) => { e.preventDefault(); e.stopPropagation(); if (e.currentTarget === e.target || !e.currentTarget.contains(e.relatedTarget as Node)) setIsInpaintDragging(false); };
|
||||
const handleInpaintDrop = (e: DragEvent<HTMLElement>) => {
|
||||
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 = () => {
|
||||
@@ -322,7 +361,7 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
|
||||
return;
|
||||
}
|
||||
if (!hasMask) {
|
||||
setStatus("请先编辑遮罩，涂抹需要重绘的区域");
|
||||
setStatus("请先编辑页面，涂抹需要重绘的区域");
|
||||
return;
|
||||
}
|
||||
if (generating) return;
|
||||
@@ -384,6 +423,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;
|
||||
@@ -715,7 +781,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>
|
||||
@@ -808,7 +880,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 && (
|
||||
@@ -864,7 +936,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">
|
||||
@@ -877,11 +949,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>
|
||||
@@ -889,36 +963,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">
|
||||
@@ -934,7 +978,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>
|
||||
@@ -1213,7 +1263,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>
|
||||
@@ -1244,6 +1300,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
|
||||
@@ -1316,34 +1399,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">
|
||||
{OUTPUT_SIZE_OPTIONS.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>
|
||||
{OUTPUT_COUNT_OPTIONS.map((count) => (
|
||||
<button
|
||||
key={count}
|
||||
type="button"
|
||||
className={outputCount === count ? "is-active" : ""}
|
||||
onClick={() => setOutputCount(count)}
|
||||
>
|
||||
{count} 张
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
</main>
|
||||
)}
|
||||
|
||||
|
||||
+155
-36
@@ -12,8 +12,8 @@ import {
|
||||
ThunderboltOutlined,
|
||||
VideoCameraOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import type { ReactNode } from "react";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import type { CSSProperties, ReactNode } from "react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import "../../styles/pages/more.css";
|
||||
import type { WebImageWorkbenchTool, WebViewKey } from "../../types";
|
||||
|
||||
@@ -29,6 +29,8 @@ interface MoreTool {
|
||||
id: string;
|
||||
title: string;
|
||||
text: string;
|
||||
useCase: string;
|
||||
tags: string[];
|
||||
icon: ReactNode;
|
||||
category: ToolCategory;
|
||||
target?: WebViewKey;
|
||||
@@ -38,23 +40,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;
|
||||
@@ -66,7 +122,10 @@ const featuredTools: FeaturedTool[] = [
|
||||
{
|
||||
id: "workbench",
|
||||
title: "图片工作台",
|
||||
desc: "融合、修复、局部增强 — 一站式图片创作",
|
||||
desc: "从一张素材开始，完成精修、合成和二次创作。",
|
||||
kicker: "图片精修工作流",
|
||||
steps: ["上传素材", "局部修复", "高清导出"],
|
||||
outcome: "适合商品图、海报图和创意视觉",
|
||||
icon: <EditOutlined />,
|
||||
imageTool: "workbench",
|
||||
category: "image",
|
||||
@@ -75,7 +134,10 @@ const featuredTools: FeaturedTool[] = [
|
||||
{
|
||||
id: "digitalHuman",
|
||||
title: "数字人",
|
||||
desc: "参考人像与音频，一键生成口播视频",
|
||||
desc: "用参考人像和音频，快速生成可交付口播视频。",
|
||||
kicker: "口播视频工作流",
|
||||
steps: ["选择人像", "上传音频", "生成视频"],
|
||||
outcome: "适合品牌讲解、课程和带货短视频",
|
||||
icon: <CustomerServiceOutlined />,
|
||||
target: "digitalHuman",
|
||||
category: "video",
|
||||
@@ -137,6 +199,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;
|
||||
@@ -144,12 +218,16 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
|
||||
return t.category === filter;
|
||||
});
|
||||
|
||||
const toolById = useMemo(() => new Map(tools.map((tool) => [tool.id, tool])), []);
|
||||
const recentTools = recentIds.reduce<MoreTool[]>((acc, id) => {
|
||||
const tool = toolById.get(id);
|
||||
if (tool?.ready) acc.push(tool);
|
||||
return acc;
|
||||
}, []);
|
||||
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));
|
||||
|
||||
const groupedTools = filteredTools.reduce<Record<ToolCategory, MoreTool[]>>((acc, t) => {
|
||||
if (!acc[t.category]) acc[t.category] = [];
|
||||
@@ -157,19 +235,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">
|
||||
<div className="more-page-v2__title-group">
|
||||
<span className="more-page-v2__eyebrow">AI Tool Hub</span>
|
||||
<h1>工具盒</h1>
|
||||
<nav className="more-page-v2__filters">
|
||||
</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>
|
||||
@@ -180,6 +270,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) => (
|
||||
@@ -187,10 +278,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>
|
||||
<span className="more-card__recent-body">
|
||||
<strong>{tool.title}</strong>
|
||||
<small>{categoryLabels[tool.category]}</small>
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
@@ -208,23 +303,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>
|
||||
@@ -233,13 +327,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) => (
|
||||
@@ -247,12 +342,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>
|
||||
))}
|
||||
@@ -260,6 +364,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, useMemo, useRef, useState, type ChangeEvent, type FormEvent } from "react";
|
||||
import { useEffect, useMemo, useRef, useState, type ChangeEvent, type FormEvent, type KeyboardEvent } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import "../../styles/pages/profile.css";
|
||||
import { aiGenerationClient } from "../../api/aiGenerationClient";
|
||||
import { assetClient } from "../../api/assetClient";
|
||||
@@ -27,6 +29,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;
|
||||
@@ -42,11 +45,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;
|
||||
@@ -211,6 +219,8 @@ function ProfilePage({
|
||||
onOpenWorkbench,
|
||||
onOpenCommunity,
|
||||
onDeleteProject,
|
||||
onOpenProject,
|
||||
onRemoveWork,
|
||||
}: ProfilePageProps) {
|
||||
const isLoggedIn = Boolean(session);
|
||||
const userId = session?.user.id;
|
||||
@@ -254,6 +264,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 = useMemo(
|
||||
() => tasks.filter((task) => task.status === "completed"),
|
||||
@@ -642,6 +656,217 @@ 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 url =
|
||||
detailSelection.kind === "work"
|
||||
? detailSelection.item.outputUrl
|
||||
: detailSelection.item.imageUrl || detailSelection.item.url || "";
|
||||
if (!url) {
|
||||
setDetailNotice("暂无可下载的媒体文件");
|
||||
return;
|
||||
}
|
||||
|
||||
const isVideo =
|
||||
detailSelection.kind === "work"
|
||||
? detailSelection.item.type === "video"
|
||||
: detailSelection.item.type === "video" || /\.(mp4|webm|mov|m4v)(\?|#|$)/i.test(url);
|
||||
const taskId = detailSelection.kind === "work" ? detailSelection.item.id : detailSelection.item.sourceTaskId || undefined;
|
||||
const name = detailSelection.kind === "work" ? detailSelection.item.title : detailSelection.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">
|
||||
@@ -687,7 +912,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">
|
||||
@@ -712,7 +945,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">
|
||||
@@ -722,7 +965,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>
|
||||
@@ -746,7 +992,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">
|
||||
@@ -966,6 +1220,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 "../../styles/pages/more-tools.css";
|
||||
import "../../styles/pages/image-workbench.css";
|
||||
import { aiGenerationClient } from "../../api/aiGenerationClient";
|
||||
@@ -89,6 +89,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);
|
||||
@@ -166,6 +167,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)) {
|
||||
@@ -407,7 +426,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>
|
||||
@@ -576,11 +601,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,4 +1,15 @@
|
||||
import { useEffect, useRef, useState, type ChangeEvent, type KeyboardEvent } from "react";
|
||||
import {
|
||||
BarChartOutlined,
|
||||
CheckCircleFilled,
|
||||
CloseOutlined,
|
||||
CopyOutlined,
|
||||
DownloadOutlined,
|
||||
FileTextOutlined,
|
||||
LoadingOutlined,
|
||||
ThunderboltOutlined,
|
||||
UploadOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { useEffect, useRef, useState, type ChangeEvent, type DragEvent, type KeyboardEvent } from "react";
|
||||
import "../../styles/pages/script-tokens-v5.css";
|
||||
import "../../styles/pages/script-tokens.css";
|
||||
import { evaluateScript } from "../../api/scriptEvalClient";
|
||||
@@ -307,6 +318,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);
|
||||
|
||||
@@ -329,9 +341,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 });
|
||||
@@ -361,6 +371,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 = "";
|
||||
};
|
||||
|
||||
@@ -461,6 +477,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(/\.[^.]+$/, "") ?? "剧本评测";
|
||||
@@ -477,15 +517,32 @@ 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">
|
||||
<ShellIcon name="check-circle" />
|
||||
<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>
|
||||
<span className="script-eval-v5-uf-size">{formatFileSize(uploadedFile.size)}</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 "../../styles/pages/more-tools.css";
|
||||
import "../../styles/pages/image-workbench.css";
|
||||
import "../../styles/pages/subtitle-removal.css";
|
||||
@@ -76,6 +76,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);
|
||||
@@ -128,10 +129,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);
|
||||
@@ -143,6 +141,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)) {
|
||||
@@ -344,7 +346,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>
|
||||
@@ -438,9 +446,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>
|
||||
|
||||
@@ -106,6 +106,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,
|
||||
@@ -354,9 +357,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;
|
||||
|
||||
@@ -412,13 +419,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) => ({
|
||||
@@ -2737,6 +2744,46 @@ function WorkbenchPage({
|
||||
ariaLabel="工作台模式"
|
||||
direction={dropdownDirection}
|
||||
/>
|
||||
{activeMode === "chat" && (
|
||||
<>
|
||||
<SelectChip
|
||||
chipId="chat-model"
|
||||
value={chatModel}
|
||||
options={CHAT_MODEL_OPTIONS}
|
||||
disabled={disabled}
|
||||
isOpen={toolbarMenuId === "chat-model"}
|
||||
onToggle={() => toggleToolbarMenu("chat-model")}
|
||||
onClose={closeToolbarMenus}
|
||||
onChange={setChatModel}
|
||||
ariaLabel="对话模型"
|
||||
direction={dropdownDirection}
|
||||
/>
|
||||
<SelectChip
|
||||
chipId="chat-speed"
|
||||
value={thinkingSpeed}
|
||||
options={THINKING_SPEED_OPTIONS}
|
||||
disabled={disabled}
|
||||
isOpen={toolbarMenuId === "chat-speed"}
|
||||
onToggle={() => toggleToolbarMenu("chat-speed")}
|
||||
onClose={closeToolbarMenus}
|
||||
onChange={setThinkingSpeed}
|
||||
ariaLabel="思考速度"
|
||||
direction={dropdownDirection}
|
||||
/>
|
||||
<SelectChip
|
||||
chipId="chat-depth"
|
||||
value={thinkingDepth}
|
||||
options={THINKING_DEPTH_OPTIONS}
|
||||
disabled={disabled}
|
||||
isOpen={toolbarMenuId === "chat-depth"}
|
||||
onToggle={() => toggleToolbarMenu("chat-depth")}
|
||||
onClose={closeToolbarMenus}
|
||||
onChange={setThinkingDepth}
|
||||
ariaLabel="思考深度"
|
||||
direction={dropdownDirection}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{activeMode === "image" && (
|
||||
<>
|
||||
<SelectChip
|
||||
|
||||
@@ -7,6 +7,9 @@ import type { ReactNode } from "react";
|
||||
export type WorkbenchMode = "chat" | "image" | "video";
|
||||
export type ToolbarMenuId =
|
||||
| "studio-mode"
|
||||
| "chat-model"
|
||||
| "chat-speed"
|
||||
| "chat-depth"
|
||||
| "image-model"
|
||||
| "image-settings"
|
||||
| "image-grid-mode"
|
||||
@@ -138,6 +141,24 @@ export const REFERENCE_IMAGE_INITIAL_QUALITY = 0.84;
|
||||
export const REFERENCE_IMAGE_MIN_QUALITY = 0.62;
|
||||
export const CHAT_MODEL = "gemini-3.1-pro";
|
||||
|
||||
export const CHAT_MODEL_OPTIONS: WorkbenchOption[] = [
|
||||
{ value: "gemini", label: "Gemini" },
|
||||
{ value: "wanxian", label: "万相" },
|
||||
{ value: "deepseek", label: "DeepSeek" },
|
||||
];
|
||||
|
||||
export const THINKING_SPEED_OPTIONS: WorkbenchOption[] = [
|
||||
{ value: "default", label: "默认" },
|
||||
{ value: "high", label: "高" },
|
||||
{ value: "ultra", label: "急速" },
|
||||
];
|
||||
|
||||
export const THINKING_DEPTH_OPTIONS: WorkbenchOption[] = [
|
||||
{ value: "default", label: "默认" },
|
||||
{ value: "strong", label: "强" },
|
||||
{ value: "extreme", label: "极限" },
|
||||
];
|
||||
|
||||
export const CHAT_NATURAL_SYSTEM_PROMPT = [
|
||||
"你是 OmniAI 的创作协作助手，像一个正在一起工作的同伴一样说话。",
|
||||
`默认使用自然、简洁的中文，不要官腔，不要机械套话，不要频繁使用“首先、其次、最后”这种模板。`,
|
||||
@@ -210,13 +231,13 @@ export const MODE_OPTIONS: WorkbenchOption[] = (Object.keys(MODE_META) as Workbe
|
||||
}));
|
||||
|
||||
export const IMAGE_MODEL_OPTIONS: WorkbenchOption[] = [
|
||||
{ value: "wan2.7-image-pro", label: "wan 2.7 Pro 4K · 0.20 积分" },
|
||||
{ value: "wan2.7-image", label: "wan 2.7 · 0.20 积分" },
|
||||
{ value: "gpt-image-2", label: "GPT-Image-2 · 0.20 积分" },
|
||||
{ value: "gpt-image-2-vip", label: "GPT-Image-2 VIP · 0.20 积分" },
|
||||
{ value: "nano-banana-pro", label: "Nano Banana Pro · 0.20 积分" },
|
||||
{ value: "nano-banana-2", label: "Nano Banana 2 · 0.20 积分" },
|
||||
{ value: "nano-banana-fast", label: "Nano Banana · 0.20 积分" },
|
||||
{ value: "wan2.7-image-pro", label: "wan 2.7 Pro 4K" },
|
||||
{ value: "wan2.7-image", label: "wan 2.7" },
|
||||
{ value: "gpt-image-2", label: "GPT-Image-2" },
|
||||
{ value: "gpt-image-2-vip", label: "GPT-Image-2 VIP" },
|
||||
{ value: "nano-banana-pro", label: "Nano Banana Pro" },
|
||||
{ value: "nano-banana-2", label: "Nano Banana 2" },
|
||||
{ value: "nano-banana-fast", label: "Nano Banana" },
|
||||
];
|
||||
|
||||
export const VIDEO_MODEL_OPTIONS: WorkbenchOption[] = ENTERPRISE_VIDEO_MODEL_OPTIONS.map((option) => ({ ...option }));
|
||||
@@ -249,7 +270,6 @@ export const VIDEO_FRAME_OPTIONS: WorkbenchOption[] = [
|
||||
];
|
||||
|
||||
export const VIDEO_DURATION_OPTIONS: WorkbenchOption[] = [
|
||||
{ value: "4", label: "4s" },
|
||||
{ value: "5", label: "5s" },
|
||||
{ value: "6", label: "6s" },
|
||||
{ value: "7", label: "7s" },
|
||||
|
||||
@@ -723,6 +723,43 @@
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
/* ── Canvas drag-and-drop visual feedback ─────────────────────────── */
|
||||
.studio-canvas.is-canvas-dragging::after {
|
||||
content: "释放以上传图片";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(33, 242, 154, 0.12);
|
||||
border: 3px dashed #21f29a;
|
||||
color: #111;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.studio-canvas-text-composer.is-drag-over {
|
||||
outline: 2px dashed #21f29a;
|
||||
outline-offset: 2px;
|
||||
background: rgba(33, 242, 154, 0.06);
|
||||
}
|
||||
|
||||
.studio-canvas-text-composer.is-drag-over::after {
|
||||
content: "释放图片以创建节点";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
color: #333;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Tool Modal Overlay */
|
||||
.studio-canvas-tool-modal-overlay {
|
||||
position: fixed;
|
||||
|
||||
@@ -553,6 +553,209 @@
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* ── Generation controls ── */
|
||||
.dialog-generator-mode-switch {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dialog-generator-mode {
|
||||
min-height: 42px;
|
||||
border: 1px solid rgba(0, 255, 136, 0.16);
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: #9aa1b8;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
transition:
|
||||
border-color 180ms ease,
|
||||
background 180ms ease,
|
||||
color 180ms ease,
|
||||
transform 180ms ease;
|
||||
}
|
||||
|
||||
.dialog-generator-mode:hover {
|
||||
border-color: rgba(0, 255, 136, 0.32);
|
||||
color: #dce3ed;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.dialog-generator-mode.is-active {
|
||||
border-color: rgba(0, 255, 136, 0.42);
|
||||
background: rgba(0, 255, 136, 0.08);
|
||||
color: #00ff88;
|
||||
box-shadow: 0 0 16px rgba(0, 255, 136, 0.08);
|
||||
}
|
||||
|
||||
.dialog-generator-controls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dialog-generator-pills {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dialog-generator-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-height: 38px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: #dce3ed;
|
||||
cursor: pointer;
|
||||
padding: 0 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
transition:
|
||||
border-color 180ms ease,
|
||||
background 180ms ease,
|
||||
color 180ms ease;
|
||||
}
|
||||
|
||||
.dialog-generator-pill:hover {
|
||||
border-color: rgba(0, 255, 136, 0.28);
|
||||
color: #f6f8fb;
|
||||
}
|
||||
|
||||
.dialog-generator-pill.is-open {
|
||||
border-color: rgba(0, 255, 136, 0.38);
|
||||
background: rgba(0, 255, 136, 0.08);
|
||||
color: #00ff88;
|
||||
}
|
||||
|
||||
.dialog-generator-pill .anticon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dialog-generator-dropdown {
|
||||
position: absolute;
|
||||
z-index: 30;
|
||||
top: calc(100% + 4px);
|
||||
left: 0;
|
||||
min-width: 148px;
|
||||
border: 1px solid rgba(0, 255, 136, 0.18);
|
||||
border-radius: 8px;
|
||||
background: rgba(10, 16, 26, 0.96);
|
||||
box-shadow:
|
||||
0 12px 36px rgba(0, 0, 0, 0.42),
|
||||
0 0 0 1px rgba(0, 255, 136, 0.06);
|
||||
backdrop-filter: blur(18px);
|
||||
padding: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dialog-generator-dropdown__item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: #bcc4d6;
|
||||
cursor: pointer;
|
||||
padding: 9px 12px;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
transition:
|
||||
background 120ms ease,
|
||||
color 120ms ease;
|
||||
}
|
||||
|
||||
.dialog-generator-dropdown__item:hover {
|
||||
background: rgba(0, 255, 136, 0.08);
|
||||
color: #e8eaef;
|
||||
}
|
||||
|
||||
.dialog-generator-dropdown__item.is-active {
|
||||
background: rgba(0, 255, 136, 0.12);
|
||||
color: #00ff88;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
/* ── Video duration ── */
|
||||
.dialog-generator-duration {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dialog-generator-duration__label {
|
||||
color: #9aa1b8;
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.dialog-generator-duration__options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.dialog-generator-duration__btn {
|
||||
min-width: 42px;
|
||||
min-height: 34px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 6px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: #9aa1b8;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
transition:
|
||||
border-color 180ms ease,
|
||||
background 180ms ease,
|
||||
color 180ms ease;
|
||||
}
|
||||
|
||||
.dialog-generator-duration__btn:hover {
|
||||
border-color: rgba(0, 255, 136, 0.28);
|
||||
color: #dce3ed;
|
||||
}
|
||||
|
||||
.dialog-generator-duration__btn.is-active {
|
||||
border-color: rgba(0, 255, 136, 0.42);
|
||||
background: rgba(0, 255, 136, 0.12);
|
||||
color: #00ff88;
|
||||
}
|
||||
|
||||
/* ── Generate button ── */
|
||||
.dialog-generator-run {
|
||||
min-height: 48px;
|
||||
border: 1px solid rgba(0, 255, 136, 0.28);
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, rgba(0, 255, 136, 0.14) 0%, rgba(34, 240, 192, 0.08) 100%);
|
||||
color: #00ff88;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.04em;
|
||||
transition:
|
||||
border-color 180ms ease,
|
||||
background 180ms ease,
|
||||
transform 180ms ease,
|
||||
box-shadow 180ms ease;
|
||||
}
|
||||
|
||||
.dialog-generator-run:hover:not(:disabled) {
|
||||
border-color: rgba(0, 255, 136, 0.5);
|
||||
background: linear-gradient(135deg, rgba(0, 255, 136, 0.2) 0%, rgba(34, 240, 192, 0.12) 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 24px rgba(0, 255, 136, 0.1);
|
||||
}
|
||||
|
||||
.dialog-generator-run:disabled {
|
||||
opacity: 0.52;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.dialog-generator-shell {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@@ -6,9 +6,13 @@
|
||||
align-content: initial;
|
||||
justify-items: initial;
|
||||
gap: 0;
|
||||
overflow: hidden;
|
||||
overflow: auto;
|
||||
background: #0e1014;
|
||||
scrollbar-color: #353b45 #0e1014;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
.product-clone-page[data-tool="clone"] .product-clone-preview--video::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ecom-video-workspace {
|
||||
@@ -20,6 +24,11 @@
|
||||
overflow: hidden;
|
||||
background: #0e1014;
|
||||
color: #e5ebf4;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
.ecom-video-workspace::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ecom-video-flowbar {
|
||||
@@ -112,6 +121,42 @@
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* ── Flowbar zoom controls ─────────────────────────── */
|
||||
.ecom-video-flowbar__zoom {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
.ecom-video-flowbar__zoom button {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: 1px solid #2c3038;
|
||||
border-radius: 6px;
|
||||
background: #1a1d24;
|
||||
color: #8890a0;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
transition: border-color 150ms ease, color 150ms ease;
|
||||
}
|
||||
.ecom-video-flowbar__zoom button:hover:not(:disabled) {
|
||||
border-color: #00ff88;
|
||||
color: #00ff88;
|
||||
}
|
||||
.ecom-video-flowbar__zoom button:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.ecom-video-flowbar__zoom span {
|
||||
min-width: 38px;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #6a7282;
|
||||
}
|
||||
|
||||
.ecom-video-flowbar__error {
|
||||
max-width: min(260px, 28vw);
|
||||
overflow: hidden;
|
||||
@@ -181,8 +226,13 @@
|
||||
background: #101318;
|
||||
padding: 32px 40px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
.ecom-video-flow-canvas::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ecom-video-flow-map {
|
||||
@@ -418,22 +468,23 @@
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
place-items: center;
|
||||
border: 1px solid #3d3020;
|
||||
border-radius: 8px;
|
||||
background: #15181f;
|
||||
color: #ffe1ad;
|
||||
border: 1px solid #00cc6a;
|
||||
border-radius: 9px;
|
||||
background: #00ff88;
|
||||
color: #06130d;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 150ms ease,
|
||||
border-color 150ms ease,
|
||||
background-color 150ms ease;
|
||||
filter 150ms ease,
|
||||
box-shadow 150ms ease;
|
||||
}
|
||||
|
||||
.ecom-video-flow-dock button:hover {
|
||||
border-color: #4d3a1a;
|
||||
background: #241c12;
|
||||
transform: translateY(-1px);
|
||||
filter: brightness(1.08);
|
||||
box-shadow: 0 2px 12px rgba(0, 255, 136, 0.25);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.ecom-video-flow-notice {
|
||||
|
||||
+159
-60
@@ -990,8 +990,8 @@
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 20px 18px;
|
||||
scrollbar-color: #3a3f49 #15171c;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #3a3f49 #15171c;
|
||||
transition:
|
||||
opacity 360ms ease,
|
||||
transform var(--clone-settings-motion-duration) var(--clone-settings-motion-ease);
|
||||
@@ -1541,12 +1541,11 @@
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-panel {
|
||||
display: grid;
|
||||
flex: 0 0 272px;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
flex: 0 0 auto;
|
||||
grid-template-rows: auto auto minmax(0, 1fr);
|
||||
gap: 9px;
|
||||
height: 272px;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
overflow: visible;
|
||||
border: 1px solid #303540;
|
||||
border-radius: 14px;
|
||||
background: #1c1f26;
|
||||
@@ -1608,7 +1607,7 @@
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload {
|
||||
position: relative;
|
||||
display: grid;
|
||||
min-height: 78px;
|
||||
min-height: 96px;
|
||||
overflow: visible;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
@@ -1617,7 +1616,7 @@
|
||||
border-radius: 12px;
|
||||
background: #20242c;
|
||||
color: #eef2f6;
|
||||
padding: 8px;
|
||||
padding: 16px 12px;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
border-color 160ms ease,
|
||||
@@ -1625,15 +1624,52 @@
|
||||
transform 160ms ease;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload.has-files {
|
||||
min-height: 120px;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload:hover {
|
||||
border-color: #00ff88;
|
||||
background: #202c28;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload.is-dragging {
|
||||
border-color: #00ff88;
|
||||
background: #1a2e24;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
border-radius: 12px;
|
||||
background: rgba(0, 255, 136, 0.08);
|
||||
color: #00ff88;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload-overlay .anticon {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload-overlay span {
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload > span {
|
||||
display: inline-grid;
|
||||
grid-template-columns: auto minmax(0, max-content);
|
||||
@@ -1676,75 +1712,86 @@
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-preview {
|
||||
position: absolute;
|
||||
inset: 6px;
|
||||
/* ── Reference image file grid (inside upload button) ── */
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-files {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: minmax(0, 56px);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
|
||||
gap: 6px;
|
||||
border-radius: 10px;
|
||||
background: #20242c;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: scale(0.98);
|
||||
transition:
|
||||
opacity 160ms ease,
|
||||
transform 160ms ease;
|
||||
width: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload:hover .clone-ai-replicate-preview,
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload:focus-visible .clone-ai-replicate-preview {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-preview figure {
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-file {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 56px;
|
||||
height: 52px;
|
||||
aspect-ratio: 1;
|
||||
min-width: 0;
|
||||
overflow: visible;
|
||||
margin: 0;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-preview figure > img {
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-file > img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid #3a4555;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
background: #111720;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-preview figure:only-child {
|
||||
width: min(170px, 100%);
|
||||
height: 52px;
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-file > img:hover {
|
||||
border-color: #00ff88;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-preview figure:only-child > img {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-preview b {
|
||||
display: grid;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
place-items: center;
|
||||
border: 1px solid #3a4555;
|
||||
border-radius: 999px;
|
||||
background: #151b24;
|
||||
color: #eef2f6;
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-add-more {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
justify-self: center;
|
||||
width: fit-content;
|
||||
max-width: calc(100% - 8px);
|
||||
height: 28px;
|
||||
min-width: 0;
|
||||
border-radius: 7px;
|
||||
background: #2b3039;
|
||||
color: #9aa4b4;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
font-weight: 750;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-add-more .anticon {
|
||||
font-size: 13px;
|
||||
color: #5d84bd;
|
||||
}
|
||||
|
||||
/* ── Portal-based zoom preview (avoids overflow clipping) ── */
|
||||
.clone-ai-zoom-portal {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
width: min(280px, 52vw);
|
||||
max-height: 340px;
|
||||
border: 1px solid #3a4555;
|
||||
border-radius: 14px;
|
||||
background: #101115;
|
||||
padding: 8px;
|
||||
box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5);
|
||||
transform: translate(-50%, calc(-100% - 12px));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.clone-ai-zoom-portal img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 324px;
|
||||
border-radius: 8px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-link input {
|
||||
@@ -2745,12 +2792,18 @@
|
||||
position: relative;
|
||||
display: grid;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
align-content: center;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
align-content: safe center;
|
||||
justify-items: center;
|
||||
gap: 22px;
|
||||
background: #101115;
|
||||
padding: 92px 46px 142px;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-preview::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-preview-header {
|
||||
@@ -2781,6 +2834,50 @@
|
||||
color: #00ff88;
|
||||
}
|
||||
|
||||
/* ── Preview zoom controls ─────────────────────────── */
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-preview-zoom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-preview-zoom button {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid #2c3038;
|
||||
border-radius: 6px;
|
||||
background: #1b1d23;
|
||||
color: #a0a8b8;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
transition: border-color 150ms ease, color 150ms ease;
|
||||
}
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-preview-zoom button:hover:not(:disabled) {
|
||||
border-color: #00ff88;
|
||||
color: #00ff88;
|
||||
}
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-preview-zoom button:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-preview-zoom span {
|
||||
min-width: 42px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #758096;
|
||||
}
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-preview-zoom-wrap {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-empty-state {
|
||||
display: grid;
|
||||
width: min(100%, 600px);
|
||||
@@ -2888,7 +2985,8 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-main-result {
|
||||
height: 440px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-result-grid {
|
||||
@@ -2898,12 +2996,12 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-result-grid button {
|
||||
height: 210px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-result-grid button:first-child {
|
||||
grid-column: 1 / -1;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-main-result span,
|
||||
@@ -3510,8 +3608,8 @@
|
||||
.product-set-thumb:focus-within .uploaded-image-zoom,
|
||||
.product-clone-uploaded-thumb:hover .uploaded-image-zoom,
|
||||
.product-clone-uploaded-thumb:focus-within .uploaded-image-zoom,
|
||||
.clone-ai-replicate-preview figure:hover .uploaded-image-zoom,
|
||||
.clone-ai-replicate-preview figure:focus-within .uploaded-image-zoom {
|
||||
.clone-ai-replicate-file:hover .uploaded-image-zoom,
|
||||
.clone-ai-replicate-file:focus-within .uploaded-image-zoom {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0) scale(1);
|
||||
visibility: visible;
|
||||
@@ -9458,3 +9556,4 @@
|
||||
min-height: calc(100% - 59px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -216,14 +216,14 @@
|
||||
|
||||
.image-workbench-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr 220px;
|
||||
grid-template-columns: 280px 1fr;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-workbench-layout--inpaint {
|
||||
grid-template-columns: 260px 1fr 240px;
|
||||
grid-template-columns: 260px 1fr;
|
||||
}
|
||||
|
||||
.image-workbench-layout--camera {
|
||||
@@ -278,6 +278,27 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image-workbench-upload-shell.is-dragging {
|
||||
border-radius: var(--radius-sm);
|
||||
outline: 2px dashed var(--accent);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.image-workbench-upload-drop-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(var(--accent-rgb), 0.08);
|
||||
color: var(--accent);
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.image-workbench-upload {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -14618,6 +14618,55 @@
|
||||
background: #ddf5e2;
|
||||
}
|
||||
|
||||
.agent-tool-pill.is-open {
|
||||
background: #ddf5e2;
|
||||
box-shadow: 1px 1px 0 #111;
|
||||
}
|
||||
|
||||
.agent-tool-pills {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.agent-dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% + 4px);
|
||||
left: 0;
|
||||
z-index: 120;
|
||||
min-width: 160px;
|
||||
background: #fff;
|
||||
border: 3px solid #111;
|
||||
box-shadow: 3px 3px 0 #111;
|
||||
border-radius: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.agent-dropdown__item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 8px 14px;
|
||||
border: none;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background: #fff;
|
||||
color: #111;
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.agent-dropdown__item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.agent-dropdown__item:hover {
|
||||
background: #ddf5e2;
|
||||
}
|
||||
|
||||
.agent-dropdown__item.is-active {
|
||||
background: #c8f0d6;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.agent-run-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
+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 {
|
||||
|
||||
@@ -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