Compare commits
9 Commits
db79ee2c80
...
0fc180637c
| Author | SHA1 | Date | |
|---|---|---|---|
 stringadmin
|
0fc180637c | ||
|
stringadmin
|
fdf9c43731 | ||
|
stringadmin
|
f86ca99548 | ||
 OmniAI Developer
|
4e95555bda | ||
|
OmniAI Developer
|
8d7f5d9a8a | ||
|
stringadmin
|
611ca5539d | ||
|
stringadmin
|
1998eb21c5 | ||
|
OmniAI Developer
|
7afcfa54c2 | ||
|
OmniAI Developer
|
7b41cf3e87 |
@@ -1,291 +0,0 @@
|
||||
const fs = require("fs");
|
||||
|
||||
// ── Patch 1: context.js ──────────────────────────────────────
|
||||
const ctxPath = "/opt/omniai-server/src/routes/context.js";
|
||||
let ctx = fs.readFileSync(ctxPath, "utf8");
|
||||
|
||||
const smsMaxLine = "const SMS_CODE_MAX_ATTEMPTS = Math.max(1, Number(process.env.SMS_CODE_MAX_ATTEMPTS) || 5);";
|
||||
const emailConsts = `
|
||||
const EMAIL_PURPOSES = new Set(["register", "login", "reset"]);
|
||||
const EMAIL_CODE_TTL_MINUTES = Math.max(1, Number(process.env.EMAIL_CODE_TTL_MINUTES) || 10);
|
||||
const EMAIL_CODE_COOLDOWN_SECONDS = Math.max(10, Number(process.env.EMAIL_CODE_COOLDOWN_SECONDS) || 60);
|
||||
const EMAIL_CODE_MAX_ATTEMPTS = Math.max(1, Number(process.env.EMAIL_CODE_MAX_ATTEMPTS) || 5);`;
|
||||
|
||||
if (!ctx.includes("EMAIL_PURPOSES")) {
|
||||
ctx = ctx.replace(smsMaxLine, smsMaxLine + emailConsts);
|
||||
console.log("[ctx] added EMAIL_PURPOSES");
|
||||
}
|
||||
|
||||
const afterConsume = ' await pool.query("UPDATE sms_verification_codes SET consumed_at = NOW() WHERE id = $1", [row.id]);\n return true;\n}';
|
||||
const emailFuncs = `
|
||||
function hashEmailCode(email, code) {
|
||||
const secret = process.env.EMAIL_CODE_SECRET || process.env.JWT_SECRET || "omniai-dev-email-secret";
|
||||
return crypto.createHash("sha256").update(email + ":" + code + ":" + secret).digest("hex");
|
||||
}
|
||||
|
||||
async function sendEmailCode(email, code, purpose) {
|
||||
const provider = String(process.env.EMAIL_PROVIDER || "mock").trim().toLowerCase();
|
||||
|
||||
if (provider === "smtp") {
|
||||
const nodemailer = require("nodemailer");
|
||||
const transporter = nodemailer.createTransport({
|
||||
host: process.env.SMTP_HOST,
|
||||
port: Number(process.env.SMTP_PORT) || 587,
|
||||
secure: process.env.SMTP_SECURE === "1",
|
||||
auth: { user: process.env.SMTP_USER, pass: process.env.SMTP_PASS },
|
||||
});
|
||||
|
||||
const purposeText = purpose === "register" ? "\u6ce8\u518c" : purpose === "login" ? "\u767b\u5f55" : "\u91cd\u7f6e\u5bc6\u7801";
|
||||
await transporter.sendMail({
|
||||
from: process.env.SMTP_FROM || process.env.SMTP_USER,
|
||||
to: email,
|
||||
subject: "[OmniAI] \u90ae\u7bb1\u9a8c\u8bc1\u7801",
|
||||
text: "\u60a8\u7684\u9a8c\u8bc1\u7801\u662f\uff1a" + code + "\n\u7528\u9014\uff1a" + purposeText + "\n\u6709\u6548\u671f\uff1a" + String(process.env.EMAIL_CODE_TTL_MINUTES || 10) + " \u5206\u949f\n\u5982\u679c\u4e0d\u662f\u60a8\u672c\u4eba\u64cd\u4f5c\uff0c\u8bf7\u5ffd\u7565\u6b64\u90ae\u4ef6\u3002",
|
||||
html: '<div style="font-family:sans-serif;max-width:480px;margin:0 auto;padding:24px"><h2 style="color:#333">OmniAI \u90ae\u7bb1\u9a8c\u8bc1</h2><p style="font-size:16px;color:#555">\u60a8\u7684\u9a8c\u8bc1\u7801\u662f\uff1a</p><p style="font-size:32px;font-weight:bold;letter-spacing:6px;color:#1677ff;margin:16px 0">' + code + '</p><p style="color:#888">\u7528\u9014\uff1a' + purposeText + '</p><p style="color:#888">\u6709\u6548\u671f\uff1a' + String(process.env.EMAIL_CODE_TTL_MINUTES || 10) + ' \u5206\u949f</p><hr style="border:none;border-top:1px solid #eee;margin:24px 0"><p style="color:#aaa;font-size:13px">\u5982\u679c\u4e0d\u662f\u60a8\u672c\u4eba\u64cd\u4f5c\uff0c\u8bf7\u5ffd\u7565\u6b64\u90ae\u4ef6\u3002</p></div>',
|
||||
});
|
||||
return { provider: "smtp" };
|
||||
}
|
||||
|
||||
console.log("[email:" + purpose + "] " + email + " verification code: " + code + " (mock provider)");
|
||||
return { provider: "mock", devCode: process.env.EMAIL_DEV_RETURN_CODE === "1" ? code : undefined };
|
||||
}
|
||||
|
||||
async function consumeEmailCode(email, code, purpose) {
|
||||
const { rows } = await pool.query(
|
||||
"SELECT id, code_hash, attempts FROM email_verification_codes WHERE email = $1 AND purpose = $2 AND consumed_at IS NULL AND expires_at > NOW() ORDER BY created_at DESC LIMIT 1",
|
||||
[email, purpose]
|
||||
);
|
||||
const row = rows[0];
|
||||
if (!row) return false;
|
||||
if (Number(row.attempts || 0) >= EMAIL_CODE_MAX_ATTEMPTS) return false;
|
||||
|
||||
const expectedHash = hashEmailCode(email, String(code || "").trim());
|
||||
if (row.code_hash !== expectedHash) {
|
||||
await pool.query("UPDATE email_verification_codes SET attempts = attempts + 1 WHERE id = $1", [row.id]);
|
||||
return false;
|
||||
}
|
||||
await pool.query("UPDATE email_verification_codes SET consumed_at = NOW() WHERE id = $1", [row.id]);
|
||||
return true;
|
||||
}`;
|
||||
|
||||
if (!ctx.includes("hashEmailCode")) {
|
||||
ctx = ctx.replace(afterConsume, afterConsume + emailFuncs);
|
||||
console.log("[ctx] added email functions");
|
||||
}
|
||||
|
||||
// Update exports
|
||||
if (!ctx.includes("EMAIL_PURPOSES,")) {
|
||||
ctx = ctx.replace(" EMAIL_PATTERN,\n SMS_PURPOSES,", " EMAIL_PATTERN,\n EMAIL_PURPOSES,\n EMAIL_CODE_TTL_MINUTES,\n EMAIL_CODE_COOLDOWN_SECONDS,\n EMAIL_CODE_MAX_ATTEMPTS,\n SMS_PURPOSES,");
|
||||
}
|
||||
if (!ctx.includes("hashEmailCode,")) {
|
||||
ctx = ctx.replace(" sendSmsCode,\n createLoginResultForUserId,", " sendSmsCode,\n hashEmailCode,\n sendEmailCode,\n consumeEmailCode,\n createLoginResultForUserId,");
|
||||
}
|
||||
|
||||
fs.writeFileSync(ctxPath, ctx, "utf8");
|
||||
console.log("[ctx] written");
|
||||
|
||||
// ── Patch 2: auth.js ─────────────────────────────────────────
|
||||
const authPath = "/opt/omniai-server/src/routes/auth.js";
|
||||
let auth = fs.readFileSync(authPath, "utf8");
|
||||
|
||||
// 2a. Add imports inside context.js destructuring
|
||||
if (!auth.includes("hashEmailCode,")) {
|
||||
auth = auth.replace(
|
||||
'} = require("./context");',
|
||||
' EMAIL_PURPOSES,\n EMAIL_CODE_TTL_MINUTES,\n EMAIL_CODE_COOLDOWN_SECONDS,\n EMAIL_CODE_MAX_ATTEMPTS,\n hashEmailCode,\n sendEmailCode,\n consumeEmailCode,\n} = require("./context");'
|
||||
);
|
||||
console.log("[auth] added imports");
|
||||
}
|
||||
|
||||
// 2b. Insert new routes before module.exports
|
||||
const newRoutes = `
|
||||
// ============================================================
|
||||
// Email verification routes
|
||||
// ============================================================
|
||||
|
||||
router.post("/auth/email/send-code", async (req, res) => {
|
||||
const email = normalizeEmail(req.body?.email);
|
||||
const purpose = String(req.body?.purpose || "register");
|
||||
const emailError = validateEmail(email);
|
||||
if (emailError) return res.status(400).json({ error: emailError });
|
||||
if (!EMAIL_PURPOSES.has(purpose)) return res.status(400).json({ error: "\u9a8c\u8bc1\u7801\u7528\u9014\u65e0\u6548" });
|
||||
|
||||
if (purpose === "register") {
|
||||
const inviteOk = await ensureBetaInviteCode(req, res);
|
||||
if (!inviteOk) return;
|
||||
}
|
||||
|
||||
try {
|
||||
const { rows: recentCodes } = await pool.query(
|
||||
"SELECT created_at FROM email_verification_codes WHERE email = $1 AND purpose = $2 AND created_at > NOW() - ($3::text || ' seconds')::interval ORDER BY created_at DESC LIMIT 1",
|
||||
[email, purpose, EMAIL_CODE_COOLDOWN_SECONDS]
|
||||
);
|
||||
if (recentCodes.length > 0) {
|
||||
return res.status(429).json({ error: "\u9a8c\u8bc1\u7801\u53d1\u9001\u592a\u9891\u7e41\uff0c\u8bf7 " + EMAIL_CODE_COOLDOWN_SECONDS + " \u79d2\u540e\u518d\u8bd5" });
|
||||
}
|
||||
|
||||
if (purpose === "register") {
|
||||
const { rows: existing } = await pool.query("SELECT id FROM users WHERE LOWER(email) = LOWER($1) LIMIT 1", [email]);
|
||||
if (existing.length > 0) return res.status(409).json({ error: "\u8be5\u90ae\u7bb1\u5df2\u6ce8\u518c" });
|
||||
}
|
||||
|
||||
if (purpose === "login" || purpose === "reset") {
|
||||
const { rows: existing } = await pool.query("SELECT id FROM users WHERE LOWER(email) = LOWER($1) AND enabled = 1 LIMIT 1", [email]);
|
||||
if (existing.length === 0) return res.status(404).json({ error: "\u8be5\u90ae\u7bb1\u5c1a\u672a\u6ce8\u518c" });
|
||||
}
|
||||
|
||||
const code = generateSmsCode();
|
||||
const codeHash = hashEmailCode(email, code);
|
||||
await pool.query(
|
||||
"INSERT INTO email_verification_codes (email, purpose, code_hash, expires_at) VALUES ($1, $2, $3, NOW() + ($4::text || ' minutes')::interval)",
|
||||
[email, purpose, codeHash, EMAIL_CODE_TTL_MINUTES]
|
||||
);
|
||||
|
||||
const sendResult = await sendEmailCode(email, code, purpose);
|
||||
res.json({
|
||||
success: true,
|
||||
provider: sendResult.provider,
|
||||
ttlSeconds: EMAIL_CODE_TTL_MINUTES * 60,
|
||||
cooldownSeconds: EMAIL_CODE_COOLDOWN_SECONDS,
|
||||
...(sendResult.devCode ? { devCode: sendResult.devCode } : {}),
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("[auth/email/send-code] failed", error);
|
||||
res.status(500).json({ error: "\u9a8c\u8bc1\u7801\u53d1\u9001\u5931\u8d25" });
|
||||
}
|
||||
});
|
||||
|
||||
router.post("/auth/email/verify", async (req, res) => {
|
||||
const email = normalizeEmail(req.body?.email);
|
||||
const code = String(req.body?.code || "").trim();
|
||||
const purpose = String(req.body?.purpose || "register");
|
||||
const emailError = validateEmail(email);
|
||||
if (emailError) return res.status(400).json({ error: emailError });
|
||||
if (!code) return res.status(400).json({ error: "\u7f3a\u5c11\u9a8c\u8bc1\u7801" });
|
||||
if (!EMAIL_PURPOSES.has(purpose)) return res.status(400).json({ error: "\u9a8c\u8bc1\u7801\u7528\u9014\u65e0\u6548" });
|
||||
|
||||
try {
|
||||
const verified = await consumeEmailCode(email, code, purpose);
|
||||
if (!verified) return res.status(400).json({ error: "\u9a8c\u8bc1\u7801\u9519\u8bef\u6216\u5df2\u8fc7\u671f" });
|
||||
if (purpose === "register" || purpose === "login") {
|
||||
await pool.query("UPDATE users SET email_verified = 1 WHERE LOWER(email) = LOWER($1)", [email]);
|
||||
}
|
||||
res.json({ success: true });
|
||||
} catch (error) {
|
||||
console.error("[auth/email/verify] failed", error);
|
||||
res.status(500).json({ error: "\u9a8c\u8bc1\u5931\u8d25" });
|
||||
}
|
||||
});
|
||||
|
||||
router.post("/auth/forgot-password", async (req, res) => {
|
||||
const email = normalizeEmail(req.body?.email);
|
||||
const emailError = validateEmail(email);
|
||||
if (emailError) return res.status(400).json({ error: emailError });
|
||||
|
||||
try {
|
||||
const { rows } = await pool.query("SELECT id FROM users WHERE LOWER(email) = LOWER($1) AND enabled = 1 LIMIT 1", [email]);
|
||||
if (rows.length === 0) {
|
||||
return res.json({ success: true, message: "\u5982\u679c\u8be5\u90ae\u7bb1\u5df2\u6ce8\u518c\uff0c\u91cd\u7f6e\u94fe\u63a5\u5df2\u53d1\u9001" });
|
||||
}
|
||||
|
||||
const { rows: recentCodes } = await pool.query(
|
||||
"SELECT created_at FROM email_verification_codes WHERE email = $1 AND purpose = 'reset' AND created_at > NOW() - ($2::text || ' seconds')::interval ORDER BY created_at DESC LIMIT 1",
|
||||
[email, EMAIL_CODE_COOLDOWN_SECONDS]
|
||||
);
|
||||
if (recentCodes.length > 0) {
|
||||
return res.status(429).json({ error: "\u53d1\u9001\u592a\u9891\u7e41\uff0c\u8bf7 " + EMAIL_CODE_COOLDOWN_SECONDS + " \u79d2\u540e\u518d\u8bd5" });
|
||||
}
|
||||
|
||||
const code = generateSmsCode();
|
||||
const codeHash = hashEmailCode(email, code);
|
||||
await pool.query(
|
||||
"INSERT INTO email_verification_codes (email, purpose, code_hash, expires_at) VALUES ($1, 'reset', $2, NOW() + ($3::text || ' minutes')::interval)",
|
||||
[email, codeHash, EMAIL_CODE_TTL_MINUTES]
|
||||
);
|
||||
await sendEmailCode(email, code, "reset");
|
||||
res.json({ success: true, message: "\u91cd\u7f6e\u9a8c\u8bc1\u7801\u5df2\u53d1\u9001\u5230\u60a8\u7684\u90ae\u7bb1" });
|
||||
} catch (error) {
|
||||
console.error("[auth/forgot-password] failed", error);
|
||||
res.status(500).json({ error: "\u53d1\u9001\u5931\u8d25" });
|
||||
}
|
||||
});
|
||||
|
||||
router.post("/auth/reset-password", async (req, res) => {
|
||||
const email = normalizeEmail(req.body?.email);
|
||||
const code = String(req.body?.code || "").trim();
|
||||
const newPassword = String(req.body?.newPassword || "");
|
||||
const emailError = validateEmail(email);
|
||||
if (emailError) return res.status(400).json({ error: emailError });
|
||||
if (!code) return res.status(400).json({ error: "\u7f3a\u5c11\u9a8c\u8bc1\u7801" });
|
||||
const passwordError = validatePassword(newPassword);
|
||||
if (passwordError) return res.status(400).json({ error: passwordError });
|
||||
|
||||
try {
|
||||
const verified = await consumeEmailCode(email, code, "reset");
|
||||
if (!verified) return res.status(400).json({ error: "\u9a8c\u8bc1\u7801\u9519\u8bef\u6216\u5df2\u8fc7\u671f" });
|
||||
const hash = await bcrypt.hash(newPassword, 10);
|
||||
await pool.query("UPDATE users SET password_hash = $1 WHERE LOWER(email) = LOWER($2)", [hash, email]);
|
||||
res.json({ success: true, message: "\u5bc6\u7801\u91cd\u7f6e\u6210\u529f\uff0c\u8bf7\u91cd\u65b0\u767b\u5f55" });
|
||||
} catch (error) {
|
||||
console.error("[auth/reset-password] failed", error);
|
||||
res.status(500).json({ error: "\u5bc6\u7801\u91cd\u7f6e\u5931\u8d25" });
|
||||
}
|
||||
});
|
||||
|
||||
`;
|
||||
|
||||
if (!auth.includes("/auth/email/send-code")) {
|
||||
const endMarker = "\n}\n\nmodule.exports = {";
|
||||
auth = auth.replace(endMarker, "\n" + newRoutes + "}\n\nmodule.exports = {");
|
||||
console.log("[auth] added new routes");
|
||||
}
|
||||
|
||||
// 2c. Update register-email to require verification code
|
||||
// Replace: router.post("/auth/register-email" ... without code check
|
||||
// With: router.post("/auth/register-email" ... with code verification
|
||||
|
||||
const oldRegisterEmail = ` router.post("/auth/register-email", async (req, res) => {
|
||||
const email = normalizeEmail(req.body?.email);
|
||||
const usernameInput = String(req.body?.username || "").trim();
|
||||
const password = String(req.body?.password || "");
|
||||
|
||||
const emailError = validateEmail(email);
|
||||
if (emailError) return res.status(400).json({ error: emailError });
|
||||
const passwordError = validatePassword(password);
|
||||
if (passwordError) return res.status(400).json({ error: passwordError });
|
||||
const registrationInvite = await ensureRegistrationInvite(req, res);
|
||||
if (!registrationInvite) return;
|
||||
|
||||
try {
|
||||
const { rows: existingEmail }`;
|
||||
|
||||
const newRegisterEmail = ` router.post("/auth/register-email", async (req, res) => {
|
||||
const email = normalizeEmail(req.body?.email);
|
||||
const usernameInput = String(req.body?.username || "").trim();
|
||||
const password = String(req.body?.password || "");
|
||||
const code = String(req.body?.code || "").trim();
|
||||
|
||||
const emailError = validateEmail(email);
|
||||
if (emailError) return res.status(400).json({ error: emailError });
|
||||
if (!code) return res.status(400).json({ error: "\u7f3a\u5c11\u9a8c\u8bc1\u7801" });
|
||||
const passwordError = validatePassword(password);
|
||||
if (passwordError) return res.status(400).json({ error: passwordError });
|
||||
const registrationInvite = await ensureRegistrationInvite(req, res);
|
||||
if (!registrationInvite) return;
|
||||
|
||||
try {
|
||||
const verified = await consumeEmailCode(email, code, "register");
|
||||
if (!verified) return res.status(400).json({ error: "\u9a8c\u8bc1\u7801\u9519\u8bef\u6216\u5df2\u8fc7\u671f" });
|
||||
|
||||
const { rows: existingEmail }`;
|
||||
|
||||
if (auth.includes(oldRegisterEmail)) {
|
||||
auth = auth.replace(oldRegisterEmail, newRegisterEmail);
|
||||
console.log("[auth] updated register-email with verification");
|
||||
} else {
|
||||
console.log("[auth] WARNING: register-email pattern not found, skipping");
|
||||
}
|
||||
|
||||
fs.writeFileSync(authPath, auth, "utf8");
|
||||
console.log("[auth] written");
|
||||
console.log("\nDone.");
|
||||
+26
-15
@@ -14,7 +14,7 @@ import {
|
||||
ToolOutlined,
|
||||
WalletOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { lazy, Suspense, useCallback, useEffect, useMemo, useRef } from "react";
|
||||
import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import ErrorBoundary from "./components/ErrorBoundary";
|
||||
import { reportError } from "./utils/errorReporting";
|
||||
import { initNotificationPermission } from "./utils/generationNotifier";
|
||||
@@ -284,6 +284,12 @@ function App() {
|
||||
const markAllNotificationsRead = useAppStore((s) => s.markAllNotificationsRead);
|
||||
const clearAppState = useAppStore((s) => s.clearAppState);
|
||||
|
||||
const [ecommerceEverMounted, setEcommerceEverMounted] = useState(false);
|
||||
const isEcommerceActive = activeView === "ecommerce" || activeView === "ecommerceHub";
|
||||
useEffect(() => {
|
||||
if (isEcommerceActive && !ecommerceEverMounted) setEcommerceEverMounted(true);
|
||||
}, [isEcommerceActive]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
// Dismiss boot splash after first render
|
||||
useEffect(() => {
|
||||
const splash = document.getElementById("app-boot-splash");
|
||||
@@ -1075,20 +1081,7 @@ function App() {
|
||||
return <AssetsPage isAuthenticated={Boolean(session)} onOpenLogin={handleOpenLogin} />;
|
||||
case "ecommerce":
|
||||
case "ecommerceHub":
|
||||
return (
|
||||
<EcommercePage
|
||||
projects={projects}
|
||||
isAuthenticated={Boolean(session)}
|
||||
onStartCreate={handleStartCreate}
|
||||
onOpenProject={handleOpenProject}
|
||||
onDeleteProject={handleDeleteProject}
|
||||
onImportWorkflow={handleImportWorkflow}
|
||||
onCreateTask={handleCreateTask}
|
||||
onRequireLogin={handleRequireTaskLogin}
|
||||
initialTemplate={pendingEcommerceTemplate}
|
||||
onInitialTemplateConsumed={() => setPendingEcommerceTemplate(null)}
|
||||
/>
|
||||
);
|
||||
return null;
|
||||
case "digitalHuman":
|
||||
return (
|
||||
<DigitalHumanPage
|
||||
@@ -1241,6 +1234,24 @@ function App() {
|
||||
<PageTransition viewKey={activeView}>
|
||||
{activePage}
|
||||
</PageTransition>
|
||||
|
||||
{/* KeepAlive: EcommercePage stays mounted once visited */}
|
||||
{ecommerceEverMounted && (
|
||||
<div style={{ display: isEcommerceActive ? undefined : "none" }}>
|
||||
<EcommercePage
|
||||
projects={projects}
|
||||
isAuthenticated={Boolean(session)}
|
||||
onStartCreate={handleStartCreate}
|
||||
onOpenProject={handleOpenProject}
|
||||
onDeleteProject={handleDeleteProject}
|
||||
onImportWorkflow={handleImportWorkflow}
|
||||
onCreateTask={handleCreateTask}
|
||||
onRequireLogin={handleRequireTaskLogin}
|
||||
initialTemplate={pendingEcommerceTemplate}
|
||||
onInitialTemplateConsumed={() => setPendingEcommerceTemplate(null)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Suspense>
|
||||
</ErrorBoundary>
|
||||
|
||||
|
||||
@@ -75,7 +75,7 @@ function AppShell({
|
||||
const [navJustActivated, setNavJustActivated] = useState<WebViewKey | null>(null);
|
||||
const isAuthView = activeView === "login";
|
||||
const isImmersiveView = activeView === "agent" || activeView === "avatarConsole";
|
||||
const showFloatingNav = !isAuthView && !isImmersiveView && activeView !== "home";
|
||||
const showFloatingNav = (!isAuthView || !!session) && !isImmersiveView && activeView !== "home";
|
||||
const toolSurfaceViews = [
|
||||
"workbench",
|
||||
"canvas",
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
const COOKIE_CONSENT_KEY = "omniai:cookie-consent:v1";
|
||||
|
||||
export default function CookieConsentBanner() {
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setVisible(localStorage.getItem(COOKIE_CONSENT_KEY) !== "accepted");
|
||||
}, []);
|
||||
|
||||
const accept = () => {
|
||||
localStorage.setItem(COOKIE_CONSENT_KEY, "accepted");
|
||||
setVisible(false);
|
||||
};
|
||||
|
||||
if (!visible) return null;
|
||||
|
||||
return (
|
||||
<section className="cookie-consent" role="dialog" aria-live="polite" aria-label="Cookie 使用提示">
|
||||
<div>
|
||||
<strong>Cookie 与本地存储提示</strong>
|
||||
<p>我们使用 Cookie 和本地存储保存登录状态、偏好设置、创作草稿和断点续传数据，用于保障服务正常运行。</p>
|
||||
</div>
|
||||
<div className="cookie-consent__actions">
|
||||
<a href="#/privacyPolicy">查看隐私政策</a>
|
||||
<button type="button" onClick={accept}>同意并继续</button>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -80,6 +80,8 @@ export default function PageTransition({ viewKey, children }: PageTransitionProp
|
||||
|
||||
const dirClass = exitDirection === "forward" ? " is-forward" : exitDirection === "backward" ? " is-backward" : "";
|
||||
|
||||
if (!displayedChildren) return null;
|
||||
|
||||
return (
|
||||
<div className={phase === "exit" ? `page-transition-wrap page-motion--exit${dirClass}` : "page-transition-wrap"}>
|
||||
{displayedChildren}
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
import { FileTextOutlined, SafetyOutlined } from "@ant-design/icons";
|
||||
|
||||
type ComplianceKind = "agreement" | "privacy";
|
||||
|
||||
interface CompliancePageProps {
|
||||
kind: ComplianceKind;
|
||||
}
|
||||
|
||||
const companyName = "OmniAI";
|
||||
const contactPhone = "15155073618";
|
||||
const address = "江苏省南京市江北新区扬子江数字视听产业园9栋A楼501";
|
||||
|
||||
const agreementSections = [
|
||||
{
|
||||
title: "服务范围",
|
||||
body: "平台提供 AI 图片、视频、脚本、数字人及相关创作辅助服务。具体功能、模型能力、消耗规则以页面展示和平台公告为准。",
|
||||
},
|
||||
{
|
||||
title: "账号与使用",
|
||||
body: "用户应保证注册信息真实有效，妥善保管账号与登录凭证，不得出租、转让账号或以自动化方式恶意占用平台资源。",
|
||||
},
|
||||
{
|
||||
title: "内容合规",
|
||||
body: "用户不得上传、生成、发布违法违规、侵权、涉政敏感、暴恐、色情、赌博、诈骗或侵犯他人合法权益的内容。平台有权对违规内容采取删除、限制功能、封禁账号等措施。",
|
||||
},
|
||||
{
|
||||
title: "积分与付费",
|
||||
body: "积分仅限平台内消费，不支持提现、转让或折现。充值、套餐、赠送积分的有效期、消耗顺序和退费规则以充值页面展示为准。",
|
||||
},
|
||||
{
|
||||
title: "责任限制",
|
||||
body: "AI 生成结果可能存在偏差，用户应自行审核输出内容并承担使用后果。因不可抗力、第三方服务异常、网络故障造成的服务中断，平台将在合理范围内修复。",
|
||||
},
|
||||
];
|
||||
|
||||
const privacySections = [
|
||||
{
|
||||
title: "收集的信息",
|
||||
body: "我们会收集账号信息、登录状态、联系方式、创作输入、生成结果、用量记录、设备与网络日志，用于提供服务、安全审计和问题排查。",
|
||||
},
|
||||
{
|
||||
title: "Cookie 与本地存储",
|
||||
body: "我们使用 Cookie、localStorage 和 sessionStorage 保存登录状态、偏好设置、Cookie 同意状态、创作草稿和断点续传数据。",
|
||||
},
|
||||
{
|
||||
title: "信息使用",
|
||||
body: "信息用于身份验证、生成任务处理、资产管理、积分计费、客服支持、风控合规、服务优化和法律法规要求的备案审计。",
|
||||
},
|
||||
{
|
||||
title: "第三方处理",
|
||||
body: "为完成 AI 生成、对象存储、短信邮件、支付或错误监控，我们可能向必要的第三方服务提供最小范围数据，并要求其按约定保护数据安全。",
|
||||
},
|
||||
{
|
||||
title: "用户权利",
|
||||
body: "你可以通过平台账号功能或联系方式申请访问、更正、删除个人信息，或撤回非必要授权。法律法规另有要求的记录可能需按规定保留。",
|
||||
},
|
||||
];
|
||||
|
||||
export default function CompliancePage({ kind }: CompliancePageProps) {
|
||||
const isPrivacy = kind === "privacy";
|
||||
const sections = isPrivacy ? privacySections : agreementSections;
|
||||
const title = isPrivacy ? "隐私政策" : "用户协议";
|
||||
const Icon = isPrivacy ? SafetyOutlined : FileTextOutlined;
|
||||
|
||||
return (
|
||||
<section className="compliance-page">
|
||||
<div className="compliance-page__inner">
|
||||
<header className="compliance-hero">
|
||||
<span className="compliance-hero__icon"><Icon /></span>
|
||||
<div>
|
||||
<span className="compliance-hero__eyebrow">合规文件</span>
|
||||
<h1>{title}</h1>
|
||||
<p>{companyName} 平台服务合规说明。更新日期：2026 年 6 月 3 日。</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="compliance-card">
|
||||
{sections.map((section, index) => (
|
||||
<article key={section.title} className="compliance-section">
|
||||
<span>{String(index + 1).padStart(2, "0")}</span>
|
||||
<div>
|
||||
<h2>{section.title}</h2>
|
||||
<p>{section.body}</p>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<footer className="compliance-contact">
|
||||
<strong>联系我们</strong>
|
||||
<span>地址：{address}</span>
|
||||
<span>电话：{contactPhone}</span>
|
||||
<span>备案号：苏ICP备2026021747号-1</span>
|
||||
</footer>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -567,7 +567,17 @@ function DigitalHumanPage({
|
||||
</button>
|
||||
)}
|
||||
{resultVideoUrl && (
|
||||
<div className="studio-result-actions studio-result-actions--with-clear">
|
||||
<button type="button" className="studio-generate-btn" onClick={() => {
|
||||
setResultVideoUrl("");
|
||||
setActiveTaskId("");
|
||||
setTaskProgress(0);
|
||||
setNotice("已清空工作区");
|
||||
}}>
|
||||
清空
|
||||
</button>
|
||||
)}
|
||||
{resultVideoUrl && (
|
||||
<div className="studio-result-actions">
|
||||
<button type="button" onClick={() => void handleDownloadResult()} disabled={isDownloadingResult}>
|
||||
<DownloadOutlined />
|
||||
{isDownloadingResult ? "保存中" : "保存本地"}
|
||||
@@ -576,14 +586,6 @@ function DigitalHumanPage({
|
||||
<InboxOutlined />
|
||||
{isSavingResultAsset ? "加入中" : "加入资产库"}
|
||||
</button>
|
||||
<button type="button" onClick={() => {
|
||||
setResultVideoUrl("");
|
||||
setActiveTaskId("");
|
||||
setTaskProgress(0);
|
||||
setNotice("已清空工作区");
|
||||
}}>
|
||||
清空
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -2064,47 +2064,168 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
</span>
|
||||
</header>
|
||||
|
||||
{status === "done" ? (
|
||||
<section className="clone-ai-preview-showcase" aria-label="生成结果">
|
||||
<button type="button" className="clone-ai-main-result" 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>
|
||||
<div className="clone-ai-flow-arrow" aria-hidden="true" />
|
||||
<div className="clone-ai-result-grid result-reveal">
|
||||
{cloneOutput === "set" ? (
|
||||
clonePreviewCards.map((card) => (
|
||||
<button key={card.id} type="button" 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])}>
|
||||
<img src={results[0].src} alt={selectedCloneOutput.label} />
|
||||
<span>{selectedCloneOutput.label}</span>
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</section>
|
||||
) : (
|
||||
<section className="clone-ai-empty-state" aria-live="polite">
|
||||
{status === "generating" ? <LoadingOutlined /> : status === "failed" ? <FrownOutlined /> : <FileImageOutlined />}
|
||||
<strong>{status === "generating" ? "正在生成" : status === "failed" ? "生成失败" : "等待生成"}</strong>
|
||||
{status === "generating" ? <EcommerceProgressBar status="generating" label={`${selectedCloneOutput.label}生成`} /> : null}
|
||||
<span>
|
||||
{status === "generating"
|
||||
? `AI 正在为 ${platform} / ${market} 整理${selectedCloneOutput.label}。`
|
||||
: status === "failed"
|
||||
? "请检查网络后点击下方重试"
|
||||
: "上传商品原图并填写信息后，AI 将在这里展示生成结果。"}
|
||||
</span>
|
||||
{status === "failed" && lastFailedActionRef.current ? (
|
||||
<button type="button" className="clone-ai-retry-btn" onClick={lastFailedActionRef.current}>
|
||||
<ReloadOutlined /> 重试
|
||||
</button>
|
||||
{cloneOutput === "video" ? (
|
||||
<>
|
||||
<section className="clone-ai-flow-pipeline" aria-label="生成流程">
|
||||
{/* Source Node — 原图素材 */}
|
||||
<div className="clone-ai-flow-source">
|
||||
<div className="clone-ai-flow-node clone-ai-flow-node--source">
|
||||
{productImages[0]?.src ? (
|
||||
<img src={productImages[0].src} alt="商品原图" />
|
||||
) : (
|
||||
<div className="clone-ai-flow-node__placeholder">
|
||||
<FileImageOutlined />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<span className="clone-ai-flow-node__label">附件原图</span>
|
||||
</div>
|
||||
|
||||
{/* Connector — 分支连接线 */}
|
||||
<div className="clone-ai-flow-connector" aria-hidden="true">
|
||||
<div className="clone-ai-flow-connector__trunk" />
|
||||
<div className="clone-ai-flow-connector__branches">
|
||||
<div className="clone-ai-flow-connector__branch" />
|
||||
<div className="clone-ai-flow-connector__branch" />
|
||||
<div className="clone-ai-flow-connector__branch" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Branches — 生成路径分支 */}
|
||||
{status === "done" ? (
|
||||
<div className="clone-ai-flow-branches">
|
||||
{results[0]?.src ? (
|
||||
<div className="clone-ai-flow-branch">
|
||||
<div className="clone-ai-flow-node clone-ai-flow-node--text">
|
||||
<div className="clone-ai-flow-node__text-content">
|
||||
<span className="clone-ai-flow-node__text-title">{selectedCloneOutput.label}</span>
|
||||
<span className="clone-ai-flow-node__text-desc">{requirement || "AI智能生成"}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="clone-ai-flow-arrow" aria-hidden="true" />
|
||||
<button
|
||||
type="button"
|
||||
className="clone-ai-flow-node clone-ai-flow-node--result"
|
||||
onClick={() => openProductSetPreview(results[0])}
|
||||
>
|
||||
<img src={results[0].src} alt={selectedCloneOutput.label} />
|
||||
<span className="clone-ai-flow-node__tag">{selectedCloneOutput.label}</span>
|
||||
</button>
|
||||
<div className="clone-ai-flow-arrow" aria-hidden="true" />
|
||||
<div className="clone-ai-flow-node clone-ai-flow-node--video">
|
||||
<img src={results[0].src} alt="分镜视频" />
|
||||
<span className="clone-ai-flow-node__tag clone-ai-flow-node__tag--accent">分镜视频</span>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : (
|
||||
<div className="clone-ai-flow-branches clone-ai-flow-branches--empty">
|
||||
{[1, 2, 3].map((branchIndex) => (
|
||||
<div
|
||||
key={branchIndex}
|
||||
className={`clone-ai-flow-branch${status === "generating" ? " is-generating" : ""}${status === "failed" ? " is-failed" : ""}`}
|
||||
>
|
||||
<div className="clone-ai-flow-node clone-ai-flow-node--text">
|
||||
<div className="clone-ai-flow-node__text-content">
|
||||
<span className="clone-ai-flow-node__text-title">分镜文本{branchIndex}</span>
|
||||
<span className="clone-ai-flow-node__text-desc">
|
||||
{status === "generating" ? "AI 解析中..." : "等待生成"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="clone-ai-flow-arrow" aria-hidden="true" />
|
||||
<div className="clone-ai-flow-node clone-ai-flow-node--result">
|
||||
<div className="clone-ai-flow-node__placeholder">
|
||||
{status === "generating" ? <LoadingOutlined /> : <FileImageOutlined />}
|
||||
</div>
|
||||
<span className="clone-ai-flow-node__tag">分镜图{branchIndex}</span>
|
||||
</div>
|
||||
<div className="clone-ai-flow-arrow" aria-hidden="true" />
|
||||
<div className="clone-ai-flow-node clone-ai-flow-node--video">
|
||||
<div className="clone-ai-flow-node__placeholder">
|
||||
{status === "generating" ? <LoadingOutlined /> : <FileImageOutlined />}
|
||||
</div>
|
||||
<span className="clone-ai-flow-node__tag">分镜视频{branchIndex}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Status Overlay — 生成状态覆盖层 */}
|
||||
{status !== "done" ? (
|
||||
<section className="clone-ai-flow-status" aria-live="polite">
|
||||
{status === "generating" ? (
|
||||
<>
|
||||
<LoadingOutlined style={{ fontSize: 28 }} />
|
||||
<strong>正在生成</strong>
|
||||
<EcommerceProgressBar status="generating" label={`${selectedCloneOutput.label}生成`} />
|
||||
<span>AI 正在为 {platform} / {market} 整理{selectedCloneOutput.label}。</span>
|
||||
</>
|
||||
) : status === "failed" ? (
|
||||
<>
|
||||
<FrownOutlined style={{ fontSize: 28 }} />
|
||||
<strong>生成失败</strong>
|
||||
<span>请检查网络后点击下方重试</span>
|
||||
{lastFailedActionRef.current ? (
|
||||
<button type="button" className="clone-ai-retry-btn" onClick={lastFailedActionRef.current}>
|
||||
<ReloadOutlined /> 重试
|
||||
</button>
|
||||
) : null}
|
||||
</>
|
||||
) : (
|
||||
<span>上传商品原图并填写信息后，AI 将在这里展示生成结果。</span>
|
||||
)}
|
||||
</section>
|
||||
) : null}
|
||||
</section>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{status === "done" ? (
|
||||
<section className="clone-ai-preview-showcase" aria-label="生成结果">
|
||||
<button type="button" className="clone-ai-main-result" 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>
|
||||
<div className="clone-ai-flow-arrow" aria-hidden="true" />
|
||||
<div className="clone-ai-result-grid result-reveal">
|
||||
{cloneOutput === "set" ? (
|
||||
clonePreviewCards.map((card) => (
|
||||
<button key={card.id} type="button" 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])}>
|
||||
<img src={results[0].src} alt={selectedCloneOutput.label} />
|
||||
<span>{selectedCloneOutput.label}</span>
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</section>
|
||||
) : (
|
||||
<section className="clone-ai-empty-state" aria-live="polite">
|
||||
{status === "generating" ? <LoadingOutlined /> : status === "failed" ? <FrownOutlined /> : <FileImageOutlined />}
|
||||
<strong>{status === "generating" ? "正在生成" : status === "failed" ? "生成失败" : "等待生成"}</strong>
|
||||
{status === "generating" ? <EcommerceProgressBar status="generating" label={`${selectedCloneOutput.label}生成`} /> : null}
|
||||
<span>
|
||||
{status === "generating"
|
||||
? `AI 正在为 ${platform} / ${market} 整理${selectedCloneOutput.label}。`
|
||||
: status === "failed"
|
||||
? "请检查网络后点击下方重试"
|
||||
: "上传商品原图并填写信息后，AI 将在这里展示生成结果。"}
|
||||
</span>
|
||||
{status === "failed" && lastFailedActionRef.current ? (
|
||||
<button type="button" className="clone-ai-retry-btn" onClick={lastFailedActionRef.current}>
|
||||
<ReloadOutlined /> 重试
|
||||
</button>
|
||||
) : null}
|
||||
</section>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<section className="clone-ai-bottom-input" aria-label="信息详情">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
CopyOutlined,
|
||||
DownloadOutlined,
|
||||
@@ -619,123 +619,126 @@ export default function EcommerceVideoWorkspace({
|
||||
<section className="ecom-video-flow-canvas" aria-label="视频分镜流程图">
|
||||
{!sourceImage ? (
|
||||
<div className="ecom-video-empty">
|
||||
<span>上传商品图并点击"一键策划"开始</span>
|
||||
<span>上传商品图并点击“一键策划”开始</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="ecom-video-flow-map">
|
||||
{/* Source image node */}
|
||||
<article className="ecom-video-flow-node ecom-video-flow-node--source is-ready" aria-label="商品图节点">
|
||||
<div className="ecom-video-flow-node__media">
|
||||
<img src={sourceImage} alt="商品图" />
|
||||
<div className="ecom-video-tree">
|
||||
{/* Source Node — 附件原图 */}
|
||||
<div className="ecom-video-tree__source">
|
||||
<article className="ecom-video-tree-node ecom-video-tree-node--source">
|
||||
<img src={sourceImage} alt="商品原图" />
|
||||
</article>
|
||||
<span className="ecom-video-tree-node__label">附件原图</span>
|
||||
</div>
|
||||
|
||||
{/* Branch Connector — 分支连接线 */}
|
||||
<div className="ecom-video-tree__trunk" aria-hidden="true">
|
||||
<div className="ecom-video-tree__trunk-line" />
|
||||
<div className="ecom-video-tree__branches-line">
|
||||
{scenes.length > 0 ? scenes.map((s) => (
|
||||
<div key={`trunk-${s.sceneId}`} className="ecom-video-tree__branch-tap" />
|
||||
)) : (
|
||||
<>
|
||||
<div className="ecom-video-tree__branch-tap" />
|
||||
<div className="ecom-video-tree__branch-tap" />
|
||||
<div className="ecom-video-tree__branch-tap" />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<span className="ecom-video-flow-node__label">商品原图</span>
|
||||
<span className="ecom-video-flow-node__status-orb" aria-hidden="true" />
|
||||
</article>
|
||||
|
||||
{/* Connector: source → plan text nodes */}
|
||||
{visiblePlanSteps.length > 0 ? (
|
||||
<div className="ecom-video-flow-connector is-active" aria-hidden="true"><i /></div>
|
||||
) : null}
|
||||
|
||||
{/* Plan text nodes — side by side */}
|
||||
{visiblePlanSteps.length > 0 ? (
|
||||
<div className="ecom-video-scene-strip ecom-video-scene-strip--text" aria-label="策划节点">
|
||||
{visiblePlanSteps.map((step, idx) => (
|
||||
<Fragment key={step}>
|
||||
<article className={`ecom-video-flow-node ecom-video-flow-node--text is-completed${currentStep === step ? " is-pulsing" : ""}`}
|
||||
aria-label={PLAN_STEP_LABELS[step]} title={PLAN_STEP_LABELS[step]}>
|
||||
<span className="ecom-video-flow-node__text-icon">
|
||||
{currentStep === step ? <LoadingOutlined /> : "✓"}
|
||||
</span>
|
||||
<span className="ecom-video-flow-node__label">{PLAN_STEP_LABELS[step]}</span>
|
||||
</div>
|
||||
|
||||
{/* Branches — 每个场景一条分支 */}
|
||||
<div className="ecom-video-tree__rows">
|
||||
{scenes.length > 0 ? scenes.map((scene, idx) => {
|
||||
const planDone = completedSteps.length >= ALL_STEPS.length;
|
||||
const imgReady = !!scene.imageUrl;
|
||||
const imgRunning = stage === "imaging" && (scene.status === "running" || scene.status === "pending") && !scene.imageUrl;
|
||||
const vidReady = scene.status === "completed" && scene.resultUrl;
|
||||
const vidRunning = stage === "rendering" && (scene.status === "running" || scene.status === "pending");
|
||||
const vidFailed = scene.status === "failed";
|
||||
|
||||
return (
|
||||
<div key={scene.sceneId} className="ecom-video-tree__row" style={{ animationDelay: `${idx * 120}ms` }}>
|
||||
<article className={`ecom-video-tree-node ecom-video-tree-node--text${planDone ? " is-completed" : currentStep ? " is-active" : ""}`}>
|
||||
<div className="ecom-video-tree-node__inner">
|
||||
<span className="ecom-video-tree-node__title">分镜文本{scene.sceneId}</span>
|
||||
<span className="ecom-video-tree-node__desc">
|
||||
{planDone ? "已完成" : stage === "planning" ? "策划中..." : "等待策划"}
|
||||
</span>
|
||||
</div>
|
||||
</article>
|
||||
{idx < visiblePlanSteps.length - 1 ? (
|
||||
<div className="ecom-video-scene-link is-active" aria-hidden="true"><i /></div>
|
||||
) : null}
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* Connector: plan → images */}
|
||||
{hasImaging ? (
|
||||
<div className="ecom-video-flow-connector is-active" aria-hidden="true"><i /></div>
|
||||
) : null}
|
||||
|
||||
{/* Storyboard image nodes — side by side per scene */}
|
||||
{hasImaging ? (
|
||||
<div className="ecom-video-scene-strip" aria-label="分镜图片节点">
|
||||
{scenes.map((scene, idx) => {
|
||||
const imgReady = !!scene.imageUrl;
|
||||
const imgRunning = stage === "imaging" && (scene.status === "running" || scene.status === "pending") && !scene.imageUrl;
|
||||
const cls = imgReady ? "is-completed" : imgRunning ? "is-active" : "";
|
||||
return (
|
||||
<Fragment key={`img-${scene.sceneId}`}>
|
||||
<article className={`ecom-video-flow-node ecom-video-flow-node--image ${cls}`}
|
||||
aria-label={`分镜 ${scene.sceneId}`} title={`分镜 ${scene.sceneId}`}>
|
||||
<div className="ecom-video-flow-node__media">
|
||||
{imgReady ? <img src={scene.imageUrl!} alt={`分镜${scene.sceneId}`} />
|
||||
: imgRunning ? <div className="ecom-video-flow-node__placeholder"><LoadingOutlined /></div>
|
||||
: <div className="ecom-video-flow-node__placeholder">待生成</div>}
|
||||
|
||||
<div className="ecom-video-tree__arrow" aria-hidden="true">
|
||||
<svg viewBox="0 0 40 20" fill="none"><path d="M0 10 H28 M22 4 L30 10 L22 16" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
|
||||
</div>
|
||||
|
||||
<article className={`ecom-video-tree-node ecom-video-tree-node--image${imgReady ? " is-completed" : imgRunning ? " is-active" : ""}`}>
|
||||
{imgReady ? (
|
||||
<img src={scene.imageUrl!} alt={`分镜${scene.sceneId}`} />
|
||||
) : (
|
||||
<div className="ecom-video-tree-node__placeholder">
|
||||
{imgRunning ? <LoadingOutlined /> : <span>待生成</span>}
|
||||
</div>
|
||||
{imgRunning ? <span className="ecom-video-flow-node__progress">{scene.progress || 0}%</span> : null}
|
||||
<span className="ecom-video-flow-node__label">分镜{scene.sceneId}</span>
|
||||
<span className="ecom-video-flow-node__status-orb" aria-hidden="true" />
|
||||
</article>
|
||||
{idx < scenes.length - 1 ? (
|
||||
<div className="ecom-video-scene-link is-active" aria-hidden="true"><i /></div>
|
||||
) : null}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* Connector: images → videos */}
|
||||
{hasRendering ? (
|
||||
<div className="ecom-video-flow-connector is-active" aria-hidden="true"><i /></div>
|
||||
) : null}
|
||||
|
||||
{/* Video nodes — side by side per scene */}
|
||||
{hasRendering ? (
|
||||
<div className="ecom-video-scene-strip" aria-label="视频分镜节点">
|
||||
{scenes.map((scene, idx) => {
|
||||
const vidReady = scene.status === "completed" && scene.resultUrl;
|
||||
const vidRunning = stage === "rendering" && (scene.status === "running" || scene.status === "pending");
|
||||
const vidFailed = scene.status === "failed";
|
||||
const cls = vidReady ? "is-completed" : vidRunning ? "is-active" : vidFailed ? "is-failed" : "";
|
||||
return (
|
||||
<Fragment key={`vid-${scene.sceneId}`}>
|
||||
<article className={`ecom-video-flow-node ecom-video-flow-node--video ${cls}`}
|
||||
aria-label={`镜头 ${scene.sceneId}`} title={`镜头 ${scene.sceneId}`}>
|
||||
<div className="ecom-video-flow-node__media">
|
||||
{vidReady ? <video src={scene.resultUrl!} muted playsInline loop autoPlay />
|
||||
: vidRunning ? <div className="ecom-video-flow-node__placeholder"><LoadingOutlined /></div>
|
||||
: vidFailed ? <div className="ecom-video-flow-node__placeholder">失败</div>
|
||||
: <div className="ecom-video-flow-node__placeholder">待生成</div>}
|
||||
)}
|
||||
{imgRunning ? <span className="ecom-video-tree-node__progress">{scene.progress || 0}%</span> : null}
|
||||
<span className="ecom-video-tree-node__tag">分镜图{scene.sceneId}</span>
|
||||
</article>
|
||||
|
||||
<div className="ecom-video-tree__arrow" aria-hidden="true">
|
||||
<svg viewBox="0 0 40 20" fill="none"><path d="M0 10 H28 M22 4 L30 10 L22 16" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
|
||||
</div>
|
||||
|
||||
<article className={`ecom-video-tree-node ecom-video-tree-node--video${vidReady ? " is-completed" : vidRunning ? " is-active" : vidFailed ? " is-failed" : ""}`}>
|
||||
{vidReady ? (
|
||||
<video src={scene.resultUrl!} muted playsInline loop autoPlay />
|
||||
) : (
|
||||
<div className="ecom-video-tree-node__placeholder">
|
||||
{vidRunning ? <LoadingOutlined /> : vidFailed ? <span>失败</span> : <span>待生成</span>}
|
||||
</div>
|
||||
{vidRunning ? <span className="ecom-video-flow-node__progress">{scene.progress || 0}%</span> : null}
|
||||
<span className="ecom-video-flow-node__label">镜头{scene.sceneId}</span>
|
||||
{vidFailed ? (
|
||||
<button type="button" className="ecom-video-flow-node__retry"
|
||||
onClick={(e) => { e.stopPropagation(); void handleRetryScene(scene); }}
|
||||
title="重试此镜头">
|
||||
<ReloadOutlined />
|
||||
</button>
|
||||
) : null}
|
||||
{vidFailed && scene.error ? (
|
||||
<span className="ecom-video-flow-node__error" title={scene.error}>{scene.error.slice(0, 20)}</span>
|
||||
) : null}
|
||||
<span className="ecom-video-flow-node__status-orb" aria-hidden="true" />
|
||||
</article>
|
||||
{idx < scenes.length - 1 ? (
|
||||
<div className="ecom-video-scene-link is-active" aria-hidden="true"><i /></div>
|
||||
)}
|
||||
{vidRunning ? <span className="ecom-video-tree-node__progress">{scene.progress || 0}%</span> : null}
|
||||
<span className="ecom-video-tree-node__tag">分镜视频{scene.sceneId}</span>
|
||||
{vidFailed ? (
|
||||
<button type="button" className="ecom-video-tree-node__retry"
|
||||
onClick={(e) => { e.stopPropagation(); void handleRetryScene(scene); }}
|
||||
title="重试此镜头">
|
||||
<ReloadOutlined />
|
||||
</button>
|
||||
) : null}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
</article>
|
||||
</div>
|
||||
);
|
||||
}) : (
|
||||
[1, 2, 3].map((n) => (
|
||||
<div key={n} className={`ecom-video-tree__row ecom-video-tree__row--empty${stage === "planning" ? " is-planning" : ""}`} style={{ animationDelay: `${n * 120}ms` }}>
|
||||
<article className="ecom-video-tree-node ecom-video-tree-node--text">
|
||||
<div className="ecom-video-tree-node__inner">
|
||||
<span className="ecom-video-tree-node__title">分镜文本{n}</span>
|
||||
<span className="ecom-video-tree-node__desc">{stage === "planning" ? "策划中..." : "等待策划"}</span>
|
||||
</div>
|
||||
</article>
|
||||
<div className="ecom-video-tree__arrow" aria-hidden="true">
|
||||
<svg viewBox="0 0 40 20" fill="none"><path d="M0 10 H28 M22 4 L30 10 L22 16" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
|
||||
</div>
|
||||
<article className="ecom-video-tree-node ecom-video-tree-node--image">
|
||||
<div className="ecom-video-tree-node__placeholder">
|
||||
{stage === "planning" ? <LoadingOutlined /> : <span>待生成</span>}
|
||||
</div>
|
||||
<span className="ecom-video-tree-node__tag">分镜图{n}</span>
|
||||
</article>
|
||||
<div className="ecom-video-tree__arrow" aria-hidden="true">
|
||||
<svg viewBox="0 0 40 20" fill="none"><path d="M0 10 H28 M22 4 L30 10 L22 16" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
|
||||
</div>
|
||||
<article className="ecom-video-tree-node ecom-video-tree-node--video">
|
||||
<div className="ecom-video-tree-node__placeholder">
|
||||
{stage === "planning" ? <LoadingOutlined /> : <span>待生成</span>}
|
||||
</div>
|
||||
<span className="ecom-video-tree-node__tag">分镜视频{n}</span>
|
||||
</article>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
export const ECOMMERCE_SUPPORTED_IMAGE_TYPES = new Set(["image/jpeg", "image/png", "image/webp", "image/gif"]);
|
||||
export const ECOMMERCE_MAX_IMAGE_BYTES = 10 * 1024 * 1024;
|
||||
|
||||
export interface EcommerceImageValidationResult {
|
||||
accepted: File[];
|
||||
rejected: Array<{ name: string; reason: string }>;
|
||||
}
|
||||
|
||||
export function validateEcommerceImageFiles(files: File[]): EcommerceImageValidationResult {
|
||||
const accepted: File[] = [];
|
||||
const rejected: EcommerceImageValidationResult["rejected"] = [];
|
||||
|
||||
files.forEach((file) => {
|
||||
if (!ECOMMERCE_SUPPORTED_IMAGE_TYPES.has(file.type)) {
|
||||
rejected.push({ name: file.name, reason: "不支持的图片格式" });
|
||||
return;
|
||||
}
|
||||
if (file.size > ECOMMERCE_MAX_IMAGE_BYTES) {
|
||||
rejected.push({ name: file.name, reason: "图片超过 10MB" });
|
||||
return;
|
||||
}
|
||||
accepted.push(file);
|
||||
});
|
||||
|
||||
return { accepted, rejected };
|
||||
}
|
||||
|
||||
export function summarizeRejectedImages(rejected: EcommerceImageValidationResult["rejected"]): string {
|
||||
if (!rejected.length) return "";
|
||||
const first = rejected[0];
|
||||
const suffix = rejected.length > 1 ? ` 等 ${rejected.length} 个文件` : "";
|
||||
return `${first.name}${suffix} 已跳过：${first.reason}`;
|
||||
}
|
||||
|
||||
export function normalizeEcommerceImageMime(type: string): string {
|
||||
return ECOMMERCE_SUPPORTED_IMAGE_TYPES.has(type) ? type : "image/png";
|
||||
}
|
||||
@@ -0,0 +1,740 @@
|
||||
import {
|
||||
CloudUploadOutlined,
|
||||
CloseOutlined,
|
||||
FileImageOutlined,
|
||||
LoadingOutlined,
|
||||
QuestionCircleOutlined,
|
||||
ReloadOutlined,
|
||||
SettingOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import type { ChangeEvent, DragEvent, MutableRefObject, RefObject } from "react";
|
||||
import { useRef, useState } from "react";
|
||||
|
||||
type CloneOutputKey = string;
|
||||
type CloneSetCountKey = string;
|
||||
type CloneModelPanelTab = "scene" | "model";
|
||||
type CloneReferenceMode = "upload" | "link";
|
||||
type CloneReplicateLevelKey = string;
|
||||
type CloneVideoQualityKey = string;
|
||||
|
||||
interface CloneImageItem {
|
||||
id: string;
|
||||
src: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface CloneBasicSelectItem {
|
||||
key: string;
|
||||
label: string;
|
||||
value: string;
|
||||
options: string[];
|
||||
onChange: (value: string) => void;
|
||||
}
|
||||
|
||||
interface CloneModelSelectItem {
|
||||
key: string;
|
||||
label: string;
|
||||
value: string;
|
||||
options: string[];
|
||||
onChange: (value: string) => void;
|
||||
}
|
||||
|
||||
interface CloneSetCountOption {
|
||||
key: CloneSetCountKey;
|
||||
title: string;
|
||||
desc: string;
|
||||
}
|
||||
|
||||
interface CloneOutputOption {
|
||||
key: CloneOutputKey;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface CloneReplicateLevelOption {
|
||||
key: CloneReplicateLevelKey;
|
||||
title: string;
|
||||
desc: string;
|
||||
}
|
||||
|
||||
interface CloneVideoQualityOption {
|
||||
key: CloneVideoQualityKey;
|
||||
label: string;
|
||||
desc: string;
|
||||
}
|
||||
|
||||
interface CloneDetailModule {
|
||||
id: string;
|
||||
title: string;
|
||||
desc: string;
|
||||
}
|
||||
|
||||
interface EcommerceClonePanelProps {
|
||||
productInputRef: RefObject<HTMLInputElement>;
|
||||
cloneReferenceInputRef: RefObject<HTMLInputElement>;
|
||||
productImages: CloneImageItem[];
|
||||
isProductUploadDragging: boolean;
|
||||
cloneOutput: CloneOutputKey;
|
||||
cloneOutputOptions: CloneOutputOption[];
|
||||
cloneBasicSelects: CloneBasicSelectItem[];
|
||||
openCloneBasicSelect: string | null;
|
||||
cloneReferenceMode: CloneReferenceMode;
|
||||
cloneReferenceImages: CloneImageItem[];
|
||||
maxCloneReferenceImages: number;
|
||||
cloneReplicateLevel: CloneReplicateLevelKey;
|
||||
cloneReplicateLevelOptions: CloneReplicateLevelOption[];
|
||||
cloneSetCounts: Record<CloneSetCountKey, number>;
|
||||
cloneSetCountOptions: CloneSetCountOption[];
|
||||
cloneSetTotal: number;
|
||||
minCloneSetTotal: number;
|
||||
maxCloneSetTotal: number;
|
||||
selectedCloneDetailModules: string[];
|
||||
cloneDetailModules: CloneDetailModule[];
|
||||
cloneModelPanelTab: CloneModelPanelTab;
|
||||
tryOnScenes: string[];
|
||||
selectedCloneModelScenes: string[];
|
||||
cloneModelCustomScene: string;
|
||||
cloneModelSelects: CloneModelSelectItem[];
|
||||
openCloneModelSelect: string | null;
|
||||
cloneModelSelectDropUp: boolean;
|
||||
cloneModelAppearance: string;
|
||||
cloneVideoQuality: CloneVideoQualityKey;
|
||||
cloneVideoQualityOptions: CloneVideoQualityOption[];
|
||||
cloneVideoDuration: number;
|
||||
cloneVideoDurationMin: number;
|
||||
cloneVideoDurationMax: number;
|
||||
cloneVideoDurationStyle: { [key: string]: number | string };
|
||||
cloneVideoSmart: boolean;
|
||||
canGenerate: boolean;
|
||||
status: string;
|
||||
lastFailedActionRef: MutableRefObject<(() => void) | null>;
|
||||
setIsProductUploadDragging: (value: boolean) => void;
|
||||
handleProductDrop: (event: DragEvent<HTMLElement>) => void;
|
||||
removeProductImage: (id: string) => void;
|
||||
handleProductUpload: (event: ChangeEvent<HTMLInputElement>) => void;
|
||||
handleCloneOutputChange: (value: CloneOutputKey) => void;
|
||||
setOpenCloneBasicSelect: (value: string | null) => void;
|
||||
setCloneReferenceMode: (value: CloneReferenceMode) => void;
|
||||
handleCloneReferenceUpload: (event: ChangeEvent<HTMLInputElement>) => void;
|
||||
setCloneReplicateLevel: (value: CloneReplicateLevelKey) => void;
|
||||
startCloneSetCountHold: (key: CloneSetCountKey, delta: number, disabled: boolean) => void;
|
||||
clearCloneSetCountHold: () => void;
|
||||
toggleCloneDetailModule: (id: string) => void;
|
||||
setCloneModelPanelTab: (value: CloneModelPanelTab) => void;
|
||||
toggleCloneModelScene: (scene: string) => void;
|
||||
setCloneModelCustomScene: (value: string) => void;
|
||||
setOpenCloneModelSelect: (value: string | null) => void;
|
||||
setCloneModelSelectDropUp: (value: boolean) => void;
|
||||
setCloneModelAppearance: (value: string) => void;
|
||||
setCloneVideoQuality: (value: CloneVideoQualityKey) => void;
|
||||
setCloneVideoDuration: (value: number) => void;
|
||||
clampCloneVideoDuration: (value: number) => number;
|
||||
setCloneVideoSmart: (updater: (current: boolean) => boolean) => void;
|
||||
handleGenerate: () => void;
|
||||
formatRatioDisplayValue: (value: string) => string;
|
||||
setVideoOutfitFiles?: (video: File | null, ref: File | null) => void;
|
||||
}
|
||||
|
||||
export default function EcommerceClonePanel({
|
||||
productInputRef,
|
||||
cloneReferenceInputRef,
|
||||
productImages,
|
||||
isProductUploadDragging,
|
||||
cloneOutput,
|
||||
cloneOutputOptions,
|
||||
cloneBasicSelects,
|
||||
openCloneBasicSelect,
|
||||
cloneReferenceMode,
|
||||
cloneReferenceImages,
|
||||
maxCloneReferenceImages,
|
||||
cloneReplicateLevel,
|
||||
cloneReplicateLevelOptions,
|
||||
cloneSetCounts,
|
||||
cloneSetCountOptions,
|
||||
cloneSetTotal,
|
||||
minCloneSetTotal,
|
||||
maxCloneSetTotal,
|
||||
selectedCloneDetailModules,
|
||||
cloneDetailModules,
|
||||
cloneModelPanelTab,
|
||||
tryOnScenes,
|
||||
selectedCloneModelScenes,
|
||||
cloneModelCustomScene,
|
||||
cloneModelSelects,
|
||||
openCloneModelSelect,
|
||||
cloneModelSelectDropUp,
|
||||
cloneModelAppearance,
|
||||
cloneVideoQuality,
|
||||
cloneVideoQualityOptions,
|
||||
cloneVideoDuration,
|
||||
cloneVideoDurationMin,
|
||||
cloneVideoDurationMax,
|
||||
cloneVideoDurationStyle,
|
||||
cloneVideoSmart,
|
||||
canGenerate,
|
||||
status,
|
||||
lastFailedActionRef,
|
||||
setIsProductUploadDragging,
|
||||
handleProductDrop,
|
||||
removeProductImage,
|
||||
handleProductUpload,
|
||||
handleCloneOutputChange,
|
||||
setOpenCloneBasicSelect,
|
||||
setCloneReferenceMode,
|
||||
handleCloneReferenceUpload,
|
||||
setCloneReplicateLevel,
|
||||
startCloneSetCountHold,
|
||||
clearCloneSetCountHold,
|
||||
toggleCloneDetailModule,
|
||||
setCloneModelPanelTab,
|
||||
toggleCloneModelScene,
|
||||
setCloneModelCustomScene,
|
||||
setOpenCloneModelSelect,
|
||||
setCloneModelSelectDropUp,
|
||||
setCloneModelAppearance,
|
||||
setCloneVideoQuality,
|
||||
setCloneVideoDuration,
|
||||
clampCloneVideoDuration,
|
||||
setCloneVideoSmart,
|
||||
handleGenerate,
|
||||
formatRatioDisplayValue,
|
||||
setVideoOutfitFiles,
|
||||
}: EcommerceClonePanelProps) {
|
||||
const videoOutfitVideoRef = useRef<HTMLInputElement>(null);
|
||||
const videoOutfitRefRef = useRef<HTMLInputElement>(null);
|
||||
const [videoOutfitVideoUrl, setVideoOutfitVideoUrl] = useState<string | null>(null);
|
||||
const [videoOutfitRefUrl, setVideoOutfitRefUrl] = useState<string | null>(null);
|
||||
|
||||
const handleVideoOutfitVideoChange = () => {
|
||||
const file = videoOutfitVideoRef.current?.files?.[0] || null;
|
||||
if (file) setVideoOutfitVideoUrl(URL.createObjectURL(file));
|
||||
setVideoOutfitFiles?.(file, videoOutfitRefRef.current?.files?.[0] || null);
|
||||
};
|
||||
|
||||
const handleVideoOutfitRefChange = () => {
|
||||
const file = videoOutfitRefRef.current?.files?.[0] || null;
|
||||
if (file) setVideoOutfitRefUrl(URL.createObjectURL(file));
|
||||
setVideoOutfitFiles?.(videoOutfitVideoRef.current?.files?.[0] || null, file);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="product-clone-panel__scroll clone-ai-panel">
|
||||
<header className="clone-ai-logo">
|
||||
<span className="clone-ai-logo__mark">AI</span>
|
||||
<strong>电商生成</strong>
|
||||
</header>
|
||||
|
||||
<section className="clone-ai-card">
|
||||
<h2>
|
||||
<CloudUploadOutlined />
|
||||
上传商品原图
|
||||
</h2>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
className={`clone-ai-upload-zone${isProductUploadDragging ? " is-dragging" : ""}`}
|
||||
onClick={() => productInputRef.current?.click()}
|
||||
onKeyDown={(event) => {
|
||||
if (event.target !== event.currentTarget) return;
|
||||
if (event.key === "Enter" || event.key === " ") {
|
||||
event.preventDefault();
|
||||
productInputRef.current?.click();
|
||||
}
|
||||
}}
|
||||
onDragEnter={(event) => {
|
||||
event.preventDefault();
|
||||
setIsProductUploadDragging(true);
|
||||
}}
|
||||
onDragOver={(event) => event.preventDefault()}
|
||||
onDragLeave={() => setIsProductUploadDragging(false)}
|
||||
onDrop={handleProductDrop}
|
||||
>
|
||||
<div className="clone-ai-upload-main">
|
||||
<span className="clone-ai-upload-icon">
|
||||
<FileImageOutlined />
|
||||
</span>
|
||||
<span className="clone-ai-upload-title">拖拽或点击上传</span>
|
||||
<strong>
|
||||
<span aria-hidden="true">+</span>
|
||||
上传图片
|
||||
</strong>
|
||||
<span className="clone-ai-upload-hint">同一产品，最多 7 张</span>
|
||||
</div>
|
||||
{productImages.length ? (
|
||||
<div className="clone-ai-uploaded-files" aria-label="已上传商品原图">
|
||||
{productImages.map((item) => (
|
||||
<figure key={item.id} className="clone-ai-uploaded-file">
|
||||
<img src={item.src} alt={item.name} />
|
||||
<span className="uploaded-image-zoom" aria-hidden="true">
|
||||
<img src={item.src} alt="" />
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
removeProductImage(item.id);
|
||||
}}
|
||||
aria-label={`删除${item.name}`}
|
||||
>
|
||||
<CloseOutlined />
|
||||
</button>
|
||||
</figure>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<input ref={productInputRef} type="file" accept="image/*" multiple onChange={handleProductUpload} />
|
||||
</section>
|
||||
|
||||
<section className="clone-ai-card">
|
||||
<h2>
|
||||
<SettingOutlined />
|
||||
生成设置
|
||||
</h2>
|
||||
<div className="clone-ai-settings-section">
|
||||
<span className="clone-ai-settings-label">生成内容</span>
|
||||
<div className="clone-ai-tag-group" role="radiogroup" aria-label="生成内容">
|
||||
{cloneOutputOptions.map((option) => (
|
||||
<button
|
||||
key={option.key}
|
||||
type="button"
|
||||
className={cloneOutput === option.key ? "is-active" : ""}
|
||||
aria-pressed={cloneOutput === option.key}
|
||||
onClick={() => handleCloneOutputChange(option.key)}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="clone-ai-settings-section">
|
||||
<span className="clone-ai-settings-label">基础设置</span>
|
||||
<div className="clone-ai-select-group">
|
||||
{cloneBasicSelects.map((item) => {
|
||||
const hasMultipleOptions = item.options.length > 1;
|
||||
const isOpen = hasMultipleOptions && openCloneBasicSelect === item.key;
|
||||
return (
|
||||
<div key={item.key} className="clone-ai-basic-select" data-clone-basic-select>
|
||||
<button
|
||||
type="button"
|
||||
className={`${isOpen ? "is-open" : ""}${hasMultipleOptions ? "" : " is-static"}`}
|
||||
aria-expanded={hasMultipleOptions ? isOpen : undefined}
|
||||
aria-haspopup={hasMultipleOptions ? "listbox" : undefined}
|
||||
aria-controls={hasMultipleOptions ? `clone-basic-select-${item.key}` : undefined}
|
||||
onClick={() => setOpenCloneBasicSelect(hasMultipleOptions ? (isOpen ? null : item.key) : null)}
|
||||
>
|
||||
<span>{item.label}</span>
|
||||
<strong>{item.key === "ratio" ? formatRatioDisplayValue(item.value) : item.value}</strong>
|
||||
{hasMultipleOptions ? <i aria-hidden="true" /> : null}
|
||||
</button>
|
||||
{hasMultipleOptions && isOpen ? (
|
||||
<div id={`clone-basic-select-${item.key}`} className="clone-ai-basic-select__menu" role="listbox">
|
||||
{item.options.map((option) => (
|
||||
<button
|
||||
key={option}
|
||||
type="button"
|
||||
className={item.value === option ? "is-active" : ""}
|
||||
role="option"
|
||||
aria-selected={item.value === option}
|
||||
onClick={() => {
|
||||
item.onChange(option);
|
||||
setOpenCloneBasicSelect(null);
|
||||
}}
|
||||
>
|
||||
{item.key === "ratio" ? formatRatioDisplayValue(option) : option}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{cloneOutput === "hot" ? (
|
||||
<section className="clone-ai-replicate-panel" aria-label="爆款图复刻设置">
|
||||
<div className="clone-ai-replicate-section">
|
||||
<span className="clone-ai-replicate-title">参考内容</span>
|
||||
<div className="clone-ai-replicate-tabs" role="tablist" aria-label="参考内容来源">
|
||||
<button
|
||||
type="button"
|
||||
className={cloneReferenceMode === "upload" ? "is-active" : ""}
|
||||
aria-selected={cloneReferenceMode === "upload"}
|
||||
onClick={() => setCloneReferenceMode("upload")}
|
||||
>
|
||||
上传参考图
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={cloneReferenceMode === "link" ? "is-active" : ""}
|
||||
aria-selected={cloneReferenceMode === "link"}
|
||||
onClick={() => setCloneReferenceMode("link")}
|
||||
>
|
||||
导入链接
|
||||
</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>
|
||||
{cloneReferenceImages.length ? (
|
||||
<div className="clone-ai-replicate-preview" aria-hidden="true">
|
||||
{cloneReferenceImages.slice(0, 4).map((item) => (
|
||||
<figure key={item.id}>
|
||||
<img src={item.src} alt="" />
|
||||
<span className="uploaded-image-zoom">
|
||||
<img src={item.src} alt="" />
|
||||
</span>
|
||||
</figure>
|
||||
))}
|
||||
{cloneReferenceImages.length > 4 ? <b>+{cloneReferenceImages.length - 4}</b> : null}
|
||||
</div>
|
||||
) : null}
|
||||
</button>
|
||||
) : (
|
||||
<label className="clone-ai-replicate-link">
|
||||
<input placeholder="粘贴商品图或详情页链接" />
|
||||
</label>
|
||||
)}
|
||||
<input
|
||||
ref={cloneReferenceInputRef}
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/webp"
|
||||
multiple
|
||||
onChange={handleCloneReferenceUpload}
|
||||
/>
|
||||
</div>
|
||||
<div className="clone-ai-replicate-section">
|
||||
<span className="clone-ai-replicate-title">复刻程度</span>
|
||||
<div className="clone-ai-replicate-levels" role="radiogroup" aria-label="复刻程度">
|
||||
{cloneReplicateLevelOptions.map((option) => (
|
||||
<button
|
||||
key={option.key}
|
||||
type="button"
|
||||
className={cloneReplicateLevel === option.key ? "is-active" : ""}
|
||||
aria-pressed={cloneReplicateLevel === option.key}
|
||||
onClick={() => setCloneReplicateLevel(option.key)}
|
||||
>
|
||||
<strong>{option.title}</strong>
|
||||
<span>{option.desc}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
|
||||
{cloneOutput === "set" ? (
|
||||
<section className="clone-ai-count-panel" aria-label="套图图片数量">
|
||||
<p>可自由调整各类型图片数量，总数 1-16 张</p>
|
||||
<div className="clone-ai-count-list">
|
||||
{cloneSetCountOptions.map((item) => {
|
||||
const count = cloneSetCounts[item.key];
|
||||
const decrementDisabled = count <= 0 || cloneSetTotal <= minCloneSetTotal;
|
||||
const incrementDisabled = cloneSetTotal >= maxCloneSetTotal;
|
||||
return (
|
||||
<div key={item.key} className="clone-ai-count-row">
|
||||
<div className="clone-ai-count-copy">
|
||||
<strong>{item.title}</strong>
|
||||
<span>{item.desc}</span>
|
||||
</div>
|
||||
<div className="clone-ai-count-stepper" aria-label={`${item.title}数量`}>
|
||||
<button
|
||||
type="button"
|
||||
disabled={decrementDisabled}
|
||||
onPointerDown={(event) => {
|
||||
event.preventDefault();
|
||||
startCloneSetCountHold(item.key, -1, decrementDisabled);
|
||||
}}
|
||||
onPointerUp={clearCloneSetCountHold}
|
||||
onPointerLeave={clearCloneSetCountHold}
|
||||
onPointerCancel={clearCloneSetCountHold}
|
||||
onBlur={clearCloneSetCountHold}
|
||||
aria-label={`减少${item.title}`}
|
||||
>
|
||||
-
|
||||
</button>
|
||||
<b>{count}</b>
|
||||
<button
|
||||
type="button"
|
||||
disabled={incrementDisabled}
|
||||
onPointerDown={(event) => {
|
||||
event.preventDefault();
|
||||
startCloneSetCountHold(item.key, 1, incrementDisabled);
|
||||
}}
|
||||
onPointerUp={clearCloneSetCountHold}
|
||||
onPointerLeave={clearCloneSetCountHold}
|
||||
onPointerCancel={clearCloneSetCountHold}
|
||||
onBlur={clearCloneSetCountHold}
|
||||
aria-label={`增加${item.title}`}
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
|
||||
{cloneOutput === "detail" ? (
|
||||
<section className="clone-ai-module-panel" aria-label="详情图包含模块">
|
||||
<p>
|
||||
包含模块（多选）
|
||||
<QuestionCircleOutlined />
|
||||
</p>
|
||||
<div className="clone-ai-module-list">
|
||||
{cloneDetailModules.map((module) => {
|
||||
const isSelected = selectedCloneDetailModules.includes(module.id);
|
||||
return (
|
||||
<button
|
||||
key={module.id}
|
||||
type="button"
|
||||
className={isSelected ? "is-active" : ""}
|
||||
aria-pressed={isSelected}
|
||||
onClick={() => toggleCloneDetailModule(module.id)}
|
||||
>
|
||||
<strong>{module.title}</strong>
|
||||
<span>{module.desc}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
|
||||
{cloneOutput === "model" ? (
|
||||
<section className="clone-ai-model-panel" aria-label="模特图设置">
|
||||
<div className="clone-ai-model-tabs" role="tablist" aria-label="模特图设置类型">
|
||||
<button
|
||||
type="button"
|
||||
className={cloneModelPanelTab === "scene" ? "is-active" : ""}
|
||||
aria-selected={cloneModelPanelTab === "scene"}
|
||||
onClick={() => setCloneModelPanelTab("scene")}
|
||||
>
|
||||
拍摄场景
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={cloneModelPanelTab === "model" ? "is-active" : ""}
|
||||
aria-selected={cloneModelPanelTab === "model"}
|
||||
onClick={() => setCloneModelPanelTab("model")}
|
||||
>
|
||||
模特形象
|
||||
</button>
|
||||
</div>
|
||||
<div className="clone-ai-model-scroll">
|
||||
{cloneModelPanelTab === "scene" ? (
|
||||
<div className="clone-ai-model-scenes">
|
||||
<div className="clone-ai-model-scene-grid">
|
||||
{tryOnScenes.map((scene) => {
|
||||
const isSelected = selectedCloneModelScenes.includes(scene);
|
||||
return (
|
||||
<button
|
||||
key={scene}
|
||||
type="button"
|
||||
className={isSelected ? "is-active" : ""}
|
||||
aria-pressed={isSelected}
|
||||
onClick={() => toggleCloneModelScene(scene)}
|
||||
>
|
||||
<span aria-hidden="true" />
|
||||
{scene}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<label className="clone-ai-model-textarea">
|
||||
<strong>或自定义描述场景（可选）</strong>
|
||||
<textarea
|
||||
value={cloneModelCustomScene}
|
||||
onChange={(event) => setCloneModelCustomScene(event.target.value)}
|
||||
placeholder="描述你想要的场景：如秋季枫叶小径、暖色调午后阳光、模特倚靠树干..."
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
) : (
|
||||
<div className="clone-ai-model-profile">
|
||||
<div className="clone-ai-model-select-grid">
|
||||
{cloneModelSelects.map((item) => {
|
||||
const isOpen = openCloneModelSelect === item.key;
|
||||
return (
|
||||
<div
|
||||
key={item.key}
|
||||
className={`clone-ai-model-select${isOpen ? " is-open" : ""}${
|
||||
isOpen && cloneModelSelectDropUp ? " is-drop-up" : ""
|
||||
}`}
|
||||
data-clone-model-select
|
||||
>
|
||||
<span>{item.label}</span>
|
||||
<button
|
||||
type="button"
|
||||
className={isOpen ? "is-open" : ""}
|
||||
aria-expanded={isOpen}
|
||||
aria-haspopup="listbox"
|
||||
aria-controls={`clone-model-select-${item.key}`}
|
||||
onClick={(event) => {
|
||||
setOpenCloneBasicSelect(null);
|
||||
if (!isOpen) {
|
||||
event.currentTarget.scrollIntoView({ block: "center", inline: "nearest" });
|
||||
const triggerRect = event.currentTarget.getBoundingClientRect();
|
||||
const scrollRect = event.currentTarget.closest(".clone-ai-model-scroll")?.getBoundingClientRect();
|
||||
const lowerBoundary = Math.min(window.innerHeight, scrollRect?.bottom ?? window.innerHeight);
|
||||
const upperBoundary = Math.max(0, scrollRect?.top ?? 0);
|
||||
const estimatedMenuHeight = Math.min(150, item.options.length * 36 + 12);
|
||||
const belowSpace = lowerBoundary - triggerRect.bottom;
|
||||
const aboveSpace = triggerRect.top - upperBoundary;
|
||||
setCloneModelSelectDropUp(belowSpace < estimatedMenuHeight && aboveSpace > belowSpace);
|
||||
} else {
|
||||
setCloneModelSelectDropUp(false);
|
||||
}
|
||||
setOpenCloneModelSelect(isOpen ? null : item.key);
|
||||
}}
|
||||
>
|
||||
<strong>{item.value}</strong>
|
||||
<i aria-hidden="true" />
|
||||
</button>
|
||||
{isOpen ? (
|
||||
<div id={`clone-model-select-${item.key}`} className="clone-ai-model-select__menu" role="listbox">
|
||||
{item.options.map((option) => (
|
||||
<button
|
||||
key={option}
|
||||
type="button"
|
||||
className={item.value === option ? "is-active" : ""}
|
||||
role="option"
|
||||
aria-selected={item.value === option}
|
||||
onClick={() => {
|
||||
item.onChange(option);
|
||||
setOpenCloneModelSelect(null);
|
||||
setCloneModelSelectDropUp(false);
|
||||
}}
|
||||
>
|
||||
{option}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<label className="clone-ai-model-textarea">
|
||||
<strong>外貌细节（可选）</strong>
|
||||
<textarea
|
||||
value={cloneModelAppearance}
|
||||
onChange={(event) => setCloneModelAppearance(event.target.value)}
|
||||
placeholder="例如：小麦色皮肤、齐刘海、眼角有泪痣..."
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
|
||||
{cloneOutput === "video" ? (
|
||||
<section className="clone-ai-video-panel" aria-label="短视频设置">
|
||||
<div className="clone-ai-video-section">
|
||||
<span className="clone-ai-video-title">视频画质</span>
|
||||
<div className="clone-ai-video-options">
|
||||
{cloneVideoQualityOptions.map((option) => (
|
||||
<button
|
||||
key={option.key}
|
||||
type="button"
|
||||
className={cloneVideoQuality === option.key ? "is-active" : ""}
|
||||
aria-pressed={cloneVideoQuality === option.key}
|
||||
onClick={() => setCloneVideoQuality(option.key)}
|
||||
>
|
||||
<strong>{option.label}</strong>
|
||||
<span>{option.desc}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="clone-ai-video-section">
|
||||
<div className="clone-ai-video-title-row">
|
||||
<span className="clone-ai-video-title">时间设置</span>
|
||||
<strong>{cloneVideoDuration}秒</strong>
|
||||
</div>
|
||||
<div className="clone-ai-duration-control" style={cloneVideoDurationStyle}>
|
||||
<input
|
||||
type="range"
|
||||
min={cloneVideoDurationMin}
|
||||
max={cloneVideoDurationMax}
|
||||
step={1}
|
||||
value={cloneVideoDuration}
|
||||
onChange={(event) => setCloneVideoDuration(clampCloneVideoDuration(Number(event.target.value)))}
|
||||
aria-label="短视频时长"
|
||||
/>
|
||||
<div className="clone-ai-duration-scale" aria-hidden="true">
|
||||
<span>5秒</span>
|
||||
<span>10秒</span>
|
||||
<span>15秒</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className={`clone-ai-video-smart${cloneVideoSmart ? " is-on" : ""}`}
|
||||
aria-pressed={cloneVideoSmart}
|
||||
onClick={() => setCloneVideoSmart((current) => !current)}
|
||||
>
|
||||
<span>
|
||||
<strong>智能选择</strong>
|
||||
<em>根据平台、商品图和尺寸自动匹配推荐参数</em>
|
||||
</span>
|
||||
<i aria-hidden="true" />
|
||||
</button>
|
||||
</section>
|
||||
) : null}
|
||||
|
||||
{cloneOutput === "video-outfit" ? (
|
||||
<section className="clone-ai-video-panel" aria-label="视频换装">
|
||||
<div className="clone-ai-video-section">
|
||||
<span className="clone-ai-video-title">上传原始视频</span>
|
||||
<div className="clone-ai-video-outfit-upload">
|
||||
<input
|
||||
ref={videoOutfitVideoRef}
|
||||
type="file"
|
||||
accept="video/*"
|
||||
onChange={handleVideoOutfitVideoChange}
|
||||
style={{ display: "none" }}
|
||||
/>
|
||||
<button type="button" className="clone-ai-video-outfit-upload-btn" onClick={() => videoOutfitVideoRef.current?.click()}>
|
||||
{videoOutfitVideoUrl ? "重新选择视频" : "选择视频文件"}
|
||||
</button>
|
||||
{videoOutfitVideoUrl ? <span className="clone-ai-video-outfit-info">已选择视频</span> : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="clone-ai-video-section">
|
||||
<span className="clone-ai-video-title">上传参考图（素材/服装）</span>
|
||||
<div className="clone-ai-video-outfit-upload">
|
||||
<input
|
||||
ref={videoOutfitRefRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleVideoOutfitRefChange}
|
||||
style={{ display: "none" }}
|
||||
/>
|
||||
<button type="button" className="clone-ai-video-outfit-upload-btn" onClick={() => videoOutfitRefRef.current?.click()}>
|
||||
{videoOutfitRefUrl ? "重新选择参考图" : "选择参考图"}
|
||||
</button>
|
||||
{videoOutfitRefUrl ? <span className="clone-ai-video-outfit-info">已选择参考图</span> : null}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
|
||||
<button type="button" className="clone-ai-generate" disabled={!canGenerate || cloneOutput === "video"} onClick={status === "failed" && lastFailedActionRef.current ? lastFailedActionRef.current : handleGenerate} style={cloneOutput === "video" ? { display: "none" } : undefined}>
|
||||
{status === "generating" ? <LoadingOutlined /> : status === "failed" ? <ReloadOutlined /> : null}
|
||||
{status === "generating" ? "生成中..." : status === "failed" ? "重新生成" : cloneOutput === "video-outfit" ? "✦ 开始换装" : "✦ 开始生成"}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
import { CloudUploadOutlined, LoadingOutlined, QuestionCircleOutlined } from "@ant-design/icons";
|
||||
import type { ChangeEvent, RefObject } from "react";
|
||||
import { EcommerceProgressBar } from "../EcommerceProgressBar";
|
||||
|
||||
interface EcommerceDetailPanelProps {
|
||||
detailInputRef: RefObject<HTMLInputElement>;
|
||||
detailProductImages: Array<{ id: string; src: string; name: string }>;
|
||||
detailPlatform: string;
|
||||
detailMarket: string;
|
||||
detailLanguage: string;
|
||||
detailType: string;
|
||||
detailRequirement: string;
|
||||
selectedDetailModules: string[];
|
||||
detailStatus: string;
|
||||
canGenerateDetail: boolean;
|
||||
detailPrimaryLabel: string;
|
||||
platformOptions: string[];
|
||||
marketOptions: string[];
|
||||
detailLanguageOptions: string[];
|
||||
detailTypeOptions: string[];
|
||||
detailModules: Array<{ id: string; title: string; desc: string }>;
|
||||
handleDetailUpload: (event: ChangeEvent<HTMLInputElement>) => void;
|
||||
handleDetailPlatformChange: (value: string) => void;
|
||||
handleDetailMarketChange: (value: string) => void;
|
||||
setDetailLanguage: (value: string) => void;
|
||||
setDetailType: (value: string) => void;
|
||||
setDetailRequirement: (value: string) => void;
|
||||
handleDetailAiWrite: () => void;
|
||||
toggleDetailModule: (id: string) => void;
|
||||
handleDetailGenerate: () => void;
|
||||
}
|
||||
|
||||
export default function EcommerceDetailPanel({
|
||||
detailInputRef,
|
||||
detailProductImages,
|
||||
detailPlatform,
|
||||
detailMarket,
|
||||
detailLanguage,
|
||||
detailType,
|
||||
detailRequirement,
|
||||
selectedDetailModules,
|
||||
detailStatus,
|
||||
canGenerateDetail,
|
||||
detailPrimaryLabel,
|
||||
platformOptions,
|
||||
marketOptions,
|
||||
detailLanguageOptions,
|
||||
detailTypeOptions,
|
||||
detailModules,
|
||||
handleDetailUpload,
|
||||
handleDetailPlatformChange,
|
||||
handleDetailMarketChange,
|
||||
setDetailLanguage,
|
||||
setDetailType,
|
||||
setDetailRequirement,
|
||||
handleDetailAiWrite,
|
||||
toggleDetailModule,
|
||||
handleDetailGenerate,
|
||||
}: EcommerceDetailPanelProps) {
|
||||
return (
|
||||
<>
|
||||
<div className="product-clone-panel__scroll">
|
||||
<section className="product-clone-field">
|
||||
<h2>
|
||||
商品原图
|
||||
<QuestionCircleOutlined />
|
||||
</h2>
|
||||
<button type="button" className="product-clone-upload-zone product-detail-upload" onClick={() => detailInputRef.current?.click()}>
|
||||
<strong>
|
||||
<CloudUploadOutlined />
|
||||
上传图片
|
||||
</strong>
|
||||
<span>同一产品，最多3张。</span>
|
||||
</button>
|
||||
<input ref={detailInputRef} type="file" accept="image/*" multiple onChange={handleDetailUpload} />
|
||||
{detailProductImages.length ? (
|
||||
<div className="product-clone-thumb-row" aria-label="已上传商品原图">
|
||||
{detailProductImages.map((item) => (
|
||||
<figure key={item.id} className="product-clone-uploaded-thumb">
|
||||
<img src={item.src} alt={item.name} />
|
||||
<span className="uploaded-image-zoom" aria-hidden="true">
|
||||
<img src={item.src} alt="" />
|
||||
</span>
|
||||
</figure>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
|
||||
<section className="product-clone-field">
|
||||
<h2>生成设置</h2>
|
||||
<div className="product-detail-settings-grid">
|
||||
<select value={detailPlatform} onChange={(event) => handleDetailPlatformChange(event.target.value)}>
|
||||
{platformOptions.map((item) => (
|
||||
<option key={item}>{item}</option>
|
||||
))}
|
||||
</select>
|
||||
<select value={detailMarket} onChange={(event) => handleDetailMarketChange(event.target.value)}>
|
||||
{marketOptions.map((item) => (
|
||||
<option key={item}>{item}</option>
|
||||
))}
|
||||
</select>
|
||||
<select value={detailLanguage} onChange={(event) => setDetailLanguage(event.target.value)}>
|
||||
{detailLanguageOptions.map((item) => (
|
||||
<option key={item}>{item}</option>
|
||||
))}
|
||||
</select>
|
||||
<select value={detailType} onChange={(event) => setDetailType(event.target.value)}>
|
||||
{detailTypeOptions.map((item) => (
|
||||
<option key={item}>{item}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="product-clone-field product-detail-requirement">
|
||||
<h2>
|
||||
商品卖点&要求
|
||||
<QuestionCircleOutlined />
|
||||
<button
|
||||
type="button"
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
handleDetailAiWrite();
|
||||
}}
|
||||
>
|
||||
AI 帮写
|
||||
</button>
|
||||
</h2>
|
||||
<textarea
|
||||
value={detailRequirement}
|
||||
onChange={(event) => setDetailRequirement(event.target.value)}
|
||||
placeholder={"建议包含以下信息生成更精准：\n1.产品名称\n2.核心卖点\n3.适用人群\n4.期望场景\n5.具体参数"}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="product-clone-field">
|
||||
<h2>
|
||||
包含模块（多选）
|
||||
<QuestionCircleOutlined />
|
||||
</h2>
|
||||
<div className="product-detail-module-grid">
|
||||
{detailModules.map((module) => (
|
||||
<button
|
||||
key={module.id}
|
||||
type="button"
|
||||
className={selectedDetailModules.includes(module.id) ? "is-active" : ""}
|
||||
onClick={() => toggleDetailModule(module.id)}
|
||||
>
|
||||
<strong>{module.title}</strong>
|
||||
<span>{module.desc}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<footer className="product-clone-panel__footer">
|
||||
{detailStatus === "generating" ? <EcommerceProgressBar status="generating" label="A+详情页" /> : null}
|
||||
<button type="button" className="product-clone-primary" disabled={!canGenerateDetail} onClick={handleDetailGenerate}>
|
||||
{detailStatus === "generating" ? <LoadingOutlined /> : null}
|
||||
{detailPrimaryLabel}
|
||||
</button>
|
||||
</footer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
import { CloudUploadOutlined, CloseOutlined, FileImageOutlined, SettingOutlined } from "@ant-design/icons";
|
||||
import type { ChangeEvent, DragEvent, RefObject } from "react";
|
||||
|
||||
interface EcommerceSetPanelProps {
|
||||
setInputRef: RefObject<HTMLInputElement>;
|
||||
setImages: Array<{ id: string; src: string; name: string }>;
|
||||
isSetUploadDragging: boolean;
|
||||
productSetOutputOptions: Array<{ key: string; label: string }>;
|
||||
productSetOutput: string;
|
||||
platformOptions: string[];
|
||||
marketOptions: string[];
|
||||
productSetLanguageOptions: string[];
|
||||
productSetRatioOptions: string[];
|
||||
productSetPlatform: string;
|
||||
productSetMarket: string;
|
||||
productSetLanguage: string;
|
||||
productSetRatio: string;
|
||||
setIsSetUploadDragging: (value: boolean) => void;
|
||||
handleSetDrop: (event: DragEvent<HTMLElement>) => void;
|
||||
handleSetUpload: (event: ChangeEvent<HTMLInputElement>) => void;
|
||||
removeSetImage: (id: string) => void;
|
||||
handleProductSetOutputChange: (value: string) => void;
|
||||
handleProductSetPlatformChange: (value: string) => void;
|
||||
handleProductSetMarketChange: (value: string) => void;
|
||||
setProductSetLanguage: (value: string) => void;
|
||||
setProductSetRatio: (value: string) => void;
|
||||
formatRatioDisplayValue: (value: string) => string;
|
||||
}
|
||||
|
||||
export default function EcommerceSetPanel({
|
||||
setInputRef,
|
||||
setImages,
|
||||
isSetUploadDragging,
|
||||
productSetOutputOptions,
|
||||
productSetOutput,
|
||||
platformOptions,
|
||||
marketOptions,
|
||||
productSetLanguageOptions,
|
||||
productSetRatioOptions,
|
||||
productSetPlatform,
|
||||
productSetMarket,
|
||||
productSetLanguage,
|
||||
productSetRatio,
|
||||
setIsSetUploadDragging,
|
||||
handleSetDrop,
|
||||
handleSetUpload,
|
||||
removeSetImage,
|
||||
handleProductSetOutputChange,
|
||||
handleProductSetPlatformChange,
|
||||
handleProductSetMarketChange,
|
||||
setProductSetLanguage,
|
||||
setProductSetRatio,
|
||||
formatRatioDisplayValue,
|
||||
}: EcommerceSetPanelProps) {
|
||||
return (
|
||||
<>
|
||||
<div className="product-clone-panel__scroll">
|
||||
<section className="product-clone-field product-set-upload-section">
|
||||
<h2>
|
||||
上传商品原图
|
||||
<CloudUploadOutlined />
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
className={`product-clone-upload-zone product-set-upload${isSetUploadDragging ? " is-dragging" : ""}`}
|
||||
onClick={() => setInputRef.current?.click()}
|
||||
onDragEnter={(event) => {
|
||||
event.preventDefault();
|
||||
setIsSetUploadDragging(true);
|
||||
}}
|
||||
onDragOver={(event) => event.preventDefault()}
|
||||
onDragLeave={() => setIsSetUploadDragging(false)}
|
||||
onDrop={handleSetDrop}
|
||||
>
|
||||
<span className="product-set-upload-icon">
|
||||
<FileImageOutlined />
|
||||
</span>
|
||||
<span className="product-set-upload-title">拖拽或点击上传</span>
|
||||
<strong>
|
||||
<span aria-hidden="true">+</span>
|
||||
上传图片
|
||||
</strong>
|
||||
<span className="product-set-upload-note">同一产品，最多 3 张</span>
|
||||
</button>
|
||||
<input ref={setInputRef} type="file" accept="image/jpeg,image/png,image/webp" multiple onChange={handleSetUpload} />
|
||||
{setImages.length ? (
|
||||
<div className="product-clone-thumb-row product-set-thumb-row" aria-label="已上传商品原图">
|
||||
{setImages.map((item) => (
|
||||
<figure key={item.id} className="product-set-thumb">
|
||||
<img src={item.src} alt={item.name} />
|
||||
<span className="uploaded-image-zoom" aria-hidden="true">
|
||||
<img src={item.src} alt="" />
|
||||
</span>
|
||||
<button type="button" onClick={() => removeSetImage(item.id)} aria-label={`删除${item.name}`}>
|
||||
<CloseOutlined />
|
||||
</button>
|
||||
</figure>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
|
||||
<section className="product-clone-field product-set-settings-section">
|
||||
<h2>
|
||||
生成设置
|
||||
<SettingOutlined />
|
||||
</h2>
|
||||
<div className="product-set-setting-block">
|
||||
<span className="product-set-setting-title">生成内容</span>
|
||||
<div className="product-set-output-grid" role="radiogroup" aria-label="生成内容">
|
||||
{productSetOutputOptions.map((option) => (
|
||||
<button
|
||||
key={option.key}
|
||||
type="button"
|
||||
className={productSetOutput === option.key ? "is-active" : ""}
|
||||
aria-pressed={productSetOutput === option.key}
|
||||
onClick={() => handleProductSetOutputChange(option.key)}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="product-set-setting-block">
|
||||
<span className="product-set-setting-title">基础设置</span>
|
||||
<div className="product-set-field-grid">
|
||||
<label>
|
||||
<span>平台</span>
|
||||
<select value={productSetPlatform} onChange={(event) => handleProductSetPlatformChange(event.target.value)}>
|
||||
{platformOptions.map((item) => (
|
||||
<option key={item}>{item}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>国家</span>
|
||||
<select value={productSetMarket} onChange={(event) => handleProductSetMarketChange(event.target.value)}>
|
||||
{marketOptions.map((item) => (
|
||||
<option key={item}>{item}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>语言</span>
|
||||
<select value={productSetLanguage} onChange={(event) => setProductSetLanguage(event.target.value)}>
|
||||
{productSetLanguageOptions.map((item) => (
|
||||
<option key={item}>{item}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>尺寸/比例</span>
|
||||
<select
|
||||
value={productSetRatio}
|
||||
onChange={(event) => setProductSetRatio(event.target.value)}
|
||||
disabled={productSetRatioOptions.length <= 1}
|
||||
>
|
||||
{productSetRatioOptions.map((item) => (
|
||||
<option key={item} value={item}>{formatRatioDisplayValue(item)}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,219 @@
|
||||
import { CloudUploadOutlined, LoadingOutlined, QuestionCircleOutlined } from "@ant-design/icons";
|
||||
import type { ChangeEvent, RefObject } from "react";
|
||||
import { EcommerceProgressBar } from "../EcommerceProgressBar";
|
||||
|
||||
interface EcommerceTryOnPanelProps {
|
||||
garmentInputRef: RefObject<HTMLInputElement>;
|
||||
garmentImages: Array<{ id: string; src: string; name: string }>;
|
||||
modelSource: string;
|
||||
modelGender: string;
|
||||
modelAge: string;
|
||||
modelEthnicity: string;
|
||||
modelBody: string;
|
||||
appearance: string;
|
||||
selectedScenes: string[];
|
||||
customScene: string;
|
||||
smartScene: boolean;
|
||||
tryOnRatio: string;
|
||||
tryOnStatus: string;
|
||||
canGenerateTryOn: boolean;
|
||||
tryOnPrimaryLabel: string;
|
||||
tryOnModelOptions: { gender: string[]; age: string[]; ethnicity: string[]; body: string[] };
|
||||
tryOnAssets: { modelWoman: string; modelMan: string; modelAsian: string };
|
||||
tryOnScenes: string[];
|
||||
tryOnRatioOptions: string[];
|
||||
handleGarmentUpload: (event: ChangeEvent<HTMLInputElement>) => void;
|
||||
setModelSource: (value: "ai" | "library") => void;
|
||||
setModelGender: (value: string) => void;
|
||||
setModelAge: (value: string) => void;
|
||||
setModelEthnicity: (value: string) => void;
|
||||
setModelBody: (value: string) => void;
|
||||
setAppearance: (value: string) => void;
|
||||
handleGenerateModel: () => void;
|
||||
toggleScene: (scene: string) => void;
|
||||
setCustomScene: (value: string) => void;
|
||||
setSmartScene: (updater: (current: boolean) => boolean) => void;
|
||||
setTryOnRatio: (value: string) => void;
|
||||
handleTryOnGenerate: () => void;
|
||||
}
|
||||
|
||||
export default function EcommerceTryOnPanel({
|
||||
garmentInputRef,
|
||||
garmentImages,
|
||||
modelSource,
|
||||
modelGender,
|
||||
modelAge,
|
||||
modelEthnicity,
|
||||
modelBody,
|
||||
appearance,
|
||||
selectedScenes,
|
||||
customScene,
|
||||
smartScene,
|
||||
tryOnRatio,
|
||||
tryOnStatus,
|
||||
canGenerateTryOn,
|
||||
tryOnPrimaryLabel,
|
||||
tryOnModelOptions,
|
||||
tryOnAssets,
|
||||
tryOnScenes,
|
||||
tryOnRatioOptions,
|
||||
handleGarmentUpload,
|
||||
setModelSource,
|
||||
setModelGender,
|
||||
setModelAge,
|
||||
setModelEthnicity,
|
||||
setModelBody,
|
||||
setAppearance,
|
||||
handleGenerateModel,
|
||||
toggleScene,
|
||||
setCustomScene,
|
||||
setSmartScene,
|
||||
setTryOnRatio,
|
||||
handleTryOnGenerate,
|
||||
}: EcommerceTryOnPanelProps) {
|
||||
return (
|
||||
<>
|
||||
<div className="product-clone-panel__scroll">
|
||||
<section className="product-clone-field">
|
||||
<h2>服装图片</h2>
|
||||
<button type="button" className="product-clone-upload-zone product-try-on-upload" onClick={() => garmentInputRef.current?.click()}>
|
||||
<strong>
|
||||
<CloudUploadOutlined />
|
||||
服装图片
|
||||
</strong>
|
||||
<span>整套搭配或同一件服装不同角度图，最多5张。</span>
|
||||
</button>
|
||||
<input ref={garmentInputRef} type="file" accept="image/*" multiple onChange={handleGarmentUpload} />
|
||||
{garmentImages.length ? (
|
||||
<div className="product-clone-thumb-row product-try-on-thumb-row" aria-label="已上传服装图片">
|
||||
{garmentImages.map((item) => (
|
||||
<figure key={item.id} className="product-clone-uploaded-thumb">
|
||||
<img src={item.src} alt={item.name} />
|
||||
<span className="uploaded-image-zoom" aria-hidden="true">
|
||||
<img src={item.src} alt="" />
|
||||
</span>
|
||||
</figure>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
|
||||
<section className="product-clone-field">
|
||||
<h2>模特形象</h2>
|
||||
<div className="product-clone-segment" role="tablist" aria-label="模特来源">
|
||||
<button type="button" className={modelSource === "ai" ? "is-active" : ""} onClick={() => setModelSource("ai")}>
|
||||
AI 生成
|
||||
</button>
|
||||
<button type="button" className={modelSource === "library" ? "is-active" : ""} onClick={() => setModelSource("library")}>
|
||||
模特库
|
||||
<QuestionCircleOutlined />
|
||||
</button>
|
||||
</div>
|
||||
{modelSource === "ai" ? (
|
||||
<>
|
||||
<div className="product-clone-model-grid">
|
||||
<select value={modelGender} onChange={(event) => setModelGender(event.target.value)}>
|
||||
{tryOnModelOptions.gender.map((item) => (
|
||||
<option key={item}>{item}</option>
|
||||
))}
|
||||
</select>
|
||||
<select value={modelAge} onChange={(event) => setModelAge(event.target.value)}>
|
||||
{tryOnModelOptions.age.map((item) => (
|
||||
<option key={item}>{item}</option>
|
||||
))}
|
||||
</select>
|
||||
<select value={modelEthnicity} onChange={(event) => setModelEthnicity(event.target.value)}>
|
||||
{tryOnModelOptions.ethnicity.map((item) => (
|
||||
<option key={item}>{item}</option>
|
||||
))}
|
||||
</select>
|
||||
<select value={modelBody} onChange={(event) => setModelBody(event.target.value)}>
|
||||
{tryOnModelOptions.body.map((item) => (
|
||||
<option key={item}>{item}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<label className="product-try-on-textarea-label">
|
||||
<span>外貌细节（可选）</span>
|
||||
<textarea
|
||||
value={appearance}
|
||||
onChange={(event) => setAppearance(event.target.value)}
|
||||
placeholder="例如：小麦色皮肤、齐刘海、眼角有泪痣..."
|
||||
/>
|
||||
</label>
|
||||
<button type="button" className="product-clone-model-button" onClick={handleGenerateModel} disabled={tryOnStatus === "modeling"}>
|
||||
{tryOnStatus === "modeling" ? <LoadingOutlined /> : null}
|
||||
{tryOnStatus === "modeling" ? "生成中..." : "生成基准模特"}
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<div className="product-try-on-library" aria-label="模特库">
|
||||
{[tryOnAssets.modelWoman, tryOnAssets.modelMan, tryOnAssets.modelAsian].map((src, index) => (
|
||||
<button key={src} type="button" className={index === 0 ? "is-active" : ""}>
|
||||
<img src={src} alt={`模特 ${index + 1}`} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="product-clone-field">
|
||||
<h2>拍摄场景</h2>
|
||||
<div className="product-clone-scene-grid">
|
||||
{tryOnScenes.map((scene) => (
|
||||
<button
|
||||
key={scene}
|
||||
type="button"
|
||||
className={selectedScenes.includes(scene) ? "is-active" : ""}
|
||||
onClick={() => toggleScene(scene)}
|
||||
>
|
||||
<span aria-hidden="true" />
|
||||
{scene}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<label className="product-clone-field product-try-on-scene-field">
|
||||
<h2>或自定义描述场景（可选）</h2>
|
||||
<textarea
|
||||
value={customScene}
|
||||
onChange={(event) => setCustomScene(event.target.value)}
|
||||
placeholder="描述你想要的场景：如秋季枫叶小径、暖色调午后阳光、模特倚靠树干..."
|
||||
/>
|
||||
</label>
|
||||
|
||||
<section className="product-clone-field">
|
||||
<button type="button" className="product-clone-switch-row" onClick={() => setSmartScene((current) => !current)}>
|
||||
<span>
|
||||
<strong>智能推荐场景</strong>
|
||||
<em>根据服装自动匹配最佳场景</em>
|
||||
</span>
|
||||
<span className={`product-clone-switch${smartScene ? " is-on" : ""}`} role="switch" aria-checked={smartScene}>
|
||||
<span />
|
||||
</span>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section className="product-clone-field">
|
||||
<h2>图片比例</h2>
|
||||
<div className="product-clone-ratio-row">
|
||||
{tryOnRatioOptions.map((item) => (
|
||||
<button key={item} type="button" className={tryOnRatio === item ? "is-active" : ""} onClick={() => setTryOnRatio(item)}>
|
||||
{item}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<footer className="product-clone-panel__footer">
|
||||
{tryOnStatus === "generating" ? <EcommerceProgressBar status="generating" label="服饰穿戴图" /> : null}
|
||||
<button type="button" className="product-clone-primary" disabled={!canGenerateTryOn} onClick={handleTryOnGenerate}>
|
||||
{tryOnStatus === "generating" ? <LoadingOutlined /> : null}
|
||||
{tryOnPrimaryLabel}
|
||||
</button>
|
||||
</footer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
+361
-86
@@ -7,16 +7,13 @@ import {
|
||||
ShoppingOutlined,
|
||||
ThunderboltOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
|
||||
import { Fragment, useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
|
||||
import type { WebViewKey, WebImageWorkbenchTool } from "../../types";
|
||||
import { useScrollEntrance } from "../../hooks/useScrollEntrance";
|
||||
import WelcomeSplash from "./WelcomeSplash";
|
||||
import ToolboxSection from "./ToolboxSection";
|
||||
import ScriptReviewShowcase from "./ScriptReviewShowcase";
|
||||
import ModelGenerationShowcase from "./ModelGenerationShowcase";
|
||||
const ecommerceTemplate1 = "https://www.omniai.net.cn/static/home-ecommerce-template-1.png";
|
||||
const ecommerceTemplate2 = "https://www.omniai.net.cn/static/home-ecommerce-template-2.png";
|
||||
const ecommerceTemplate3 = "https://www.omniai.net.cn/static/home-ecommerce-template-3.png";
|
||||
|
||||
function ScrollEntrance({ children, className, ...rest }: { children: React.ReactNode; className?: string } & React.HTMLAttributes<HTMLElement>) {
|
||||
const { ref, isVisible } = useScrollEntrance<HTMLElement>();
|
||||
@@ -54,16 +51,6 @@ const HOME_CAROUSEL_IMAGES = [
|
||||
];
|
||||
|
||||
const HOME_FEATURES = [
|
||||
{
|
||||
key: "script",
|
||||
eyebrow: "Script Review",
|
||||
title: "剧本智能测评",
|
||||
description: "用六维雷达评分拆解剧本质量，从结构、节奏、人物到商业潜力给出可执行的优化路径。",
|
||||
imageUrl: featureScriptImage,
|
||||
actionLabel: "开始测评",
|
||||
icon: <FileSearchOutlined />,
|
||||
stats: ["六维评分", "质量量化", "逐项优化"],
|
||||
},
|
||||
{
|
||||
key: "model",
|
||||
eyebrow: "AI Generation",
|
||||
@@ -84,6 +71,16 @@ const HOME_FEATURES = [
|
||||
icon: <ShoppingOutlined />,
|
||||
stats: ["多场景", "多角度", "批量输出"],
|
||||
},
|
||||
{
|
||||
key: "script",
|
||||
eyebrow: "Script Review",
|
||||
title: "剧本智能测评",
|
||||
description: "用六维雷达评分拆解剧本质量，从结构、节奏、人物到商业潜力给出可执行的优化路径。",
|
||||
imageUrl: featureScriptImage,
|
||||
actionLabel: "开始测评",
|
||||
icon: <FileSearchOutlined />,
|
||||
stats: ["六维评分", "质量量化", "逐项优化"],
|
||||
},
|
||||
];
|
||||
|
||||
const HOME_EXPERIENCE_POINTS = [
|
||||
@@ -93,37 +90,96 @@ const HOME_EXPERIENCE_POINTS = [
|
||||
{ label: "电商", meta: "商品视觉", tone: "amber" },
|
||||
];
|
||||
|
||||
const HOME_ECOMMERCE_TEMPLATES = [
|
||||
{
|
||||
title: "卖点详情图",
|
||||
tag: "详情",
|
||||
meta: "中文卖点标注",
|
||||
imageUrl: ecommerceTemplate1,
|
||||
},
|
||||
{
|
||||
title: "场景主图",
|
||||
tag: "主图",
|
||||
meta: "商品氛围构图",
|
||||
imageUrl: ecommerceTemplate2,
|
||||
},
|
||||
{
|
||||
title: "虚拟模特",
|
||||
tag: "模特",
|
||||
meta: "使用场景延展",
|
||||
imageUrl: ecommerceTemplate3,
|
||||
},
|
||||
const ECOMMERCE_MATRIX_FEATURES = [
|
||||
{ icon: "⚡", title: "高效工作流", description: "自动化处理，一键触发" },
|
||||
{ icon: "⊞", title: "矩阵式产出", description: "多场景、多尺寸批量生成" },
|
||||
{ icon: "◈", title: "一致性保证", description: "智能保持商品特征与风格统一" },
|
||||
];
|
||||
|
||||
const HOME_ECOMMERCE_TOOLS = [
|
||||
{ title: "主图", meta: "平台首图" },
|
||||
{ title: "详情", meta: "卖点拆解" },
|
||||
{ title: "模特", meta: "虚拟模特" },
|
||||
{ title: "短视频", meta: "首帧方案" },
|
||||
const ECOMMERCE_MATRIX_PROCESS = [
|
||||
{ icon: "📤", label: "上传原图", subLabel: "Upload" },
|
||||
{ icon: "🔍", label: "AI识别", subLabel: "Recognition" },
|
||||
{ icon: "⚙️", label: "生成处理", subLabel: "Processing" },
|
||||
{ icon: "📦", label: "矩阵产出", subLabel: "Output" },
|
||||
];
|
||||
|
||||
const ECOMMERCE_MATRIX_AI_STEPS = ["智能识别主体", "3D虚拟模特", "场景生成", "详情图生成", "批量导出"];
|
||||
|
||||
type EcommerceMatrixModelCard = {
|
||||
kind: "model";
|
||||
color: "brown" | "green" | "blue";
|
||||
tag: string;
|
||||
tagTone: string;
|
||||
resolution: string;
|
||||
square?: false;
|
||||
};
|
||||
|
||||
type EcommerceMatrixSceneCard = {
|
||||
kind: "scene";
|
||||
color: "p1" | "p2" | "p3";
|
||||
tag: string;
|
||||
tagTone: string;
|
||||
resolution: string;
|
||||
square: true;
|
||||
variant?: "greenery" | "blue";
|
||||
};
|
||||
|
||||
type EcommerceMatrixLayoutCard = {
|
||||
kind: "layout";
|
||||
color: "c1" | "c2" | "c3";
|
||||
tag: string;
|
||||
tagTone: string;
|
||||
resolution: string;
|
||||
square: true;
|
||||
badge: string;
|
||||
badgeTone?: "purple";
|
||||
};
|
||||
|
||||
type EcommerceMatrixCard = EcommerceMatrixModelCard | EcommerceMatrixSceneCard | EcommerceMatrixLayoutCard;
|
||||
|
||||
const ECOMMERCE_MATRIX_OUTPUTS: Array<{
|
||||
title: string;
|
||||
subtitle: string;
|
||||
cards: EcommerceMatrixCard[];
|
||||
}> = [
|
||||
{
|
||||
title: "3D 虚拟模特",
|
||||
subtitle: "Virtual Model",
|
||||
cards: [
|
||||
{ kind: "model", color: "brown", tag: "3D", tagTone: "tag-3d", resolution: "1024×1536" },
|
||||
{ kind: "model", color: "green", tag: "3D", tagTone: "tag-3d", resolution: "1024×1536" },
|
||||
{ kind: "model", color: "blue", tag: "3D", tagTone: "tag-3d", resolution: "1024×1536" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "场景图",
|
||||
subtitle: "Scene Image",
|
||||
cards: [
|
||||
{ kind: "scene", color: "p1", tag: "场景", tagTone: "tag-scene", resolution: "1024×1024", square: true },
|
||||
{ kind: "scene", color: "p2", tag: "场景", tagTone: "tag-scene", resolution: "1024×1024", square: true, variant: "greenery" },
|
||||
{ kind: "scene", color: "p3", tag: "场景", tagTone: "tag-scene", resolution: "1024×1024", square: true, variant: "blue" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "详情图",
|
||||
subtitle: "Detail Image",
|
||||
cards: [
|
||||
{ kind: "layout", color: "c1", tag: "详情", tagTone: "tag-layout", resolution: "1080×1080", square: true, badge: "优雅随行" },
|
||||
{ kind: "layout", color: "c2", tag: "详情", tagTone: "tag-layout", resolution: "1080×1080", square: true, badge: "限时特惠", badgeTone: "purple" },
|
||||
{ kind: "layout", color: "c3", tag: "详情", tagTone: "tag-layout", resolution: "1080×1080", square: true, badge: "新品首发" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const HOME_CAROUSEL_SLOTS = [-4, -3, -2, -1, 0, 1, 2, 3, 4];
|
||||
const HOME_CAROUSEL_TRANSITION_MS = 860;
|
||||
|
||||
type EcommerceFlowLine = {
|
||||
d: string;
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
|
||||
interface HomeCarouselMotion {
|
||||
direction: number;
|
||||
progress: 0 | 1;
|
||||
@@ -137,9 +193,9 @@ function getHomeCarouselCardStyle(offset: number): CSSProperties {
|
||||
const depth = Math.abs(offset);
|
||||
const direction = Math.sign(offset);
|
||||
const isActive = depth === 0;
|
||||
const xByDepth = [0, 286, 456, 610, 735, 840];
|
||||
const xByDepth = [0, 190, 320, 430, 520, 590];
|
||||
const yByDepth = [8, -2, -8, -13, -18, -24];
|
||||
const scaleByDepth = [1, 0.98, 0.94, 0.91, 0.88, 0.84];
|
||||
const scaleByDepth = [1, 1, 1, 1, 1, 1];
|
||||
const x = direction * (xByDepth[depth] ?? xByDepth[xByDepth.length - 1]!);
|
||||
const y = yByDepth[depth] ?? yByDepth[yByDepth.length - 1]!;
|
||||
const z = isActive ? 90 : 28 - depth;
|
||||
@@ -159,38 +215,253 @@ function getHomeCarouselCardStyle(offset: number): CSSProperties {
|
||||
} as CSSProperties;
|
||||
}
|
||||
|
||||
function EcommerceFeatureShowcase() {
|
||||
function EcommerceMatrixCardVisual({ card }: { card: EcommerceMatrixCard }) {
|
||||
if (card.kind === "model") {
|
||||
return (
|
||||
<div className="mock-model">
|
||||
<div className="silhouette" />
|
||||
<div className={`mock-product-hold ${card.color}`} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (card.kind === "scene") {
|
||||
return (
|
||||
<div className="mock-scene">
|
||||
{card.variant === "greenery" ? <div className="obj greenery" /> : <div className="obj decor-item is-soft-blue" />}
|
||||
<div className={`obj table-top${card.variant === "greenery" ? " is-warm" : ""}`} />
|
||||
<div className={`obj prod ${card.color}`} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="omni-home-ecommerce-showcase">
|
||||
<div className="omni-home-ecommerce-showcase__depth" />
|
||||
<div className="omni-home-ecommerce-showcase__grain" />
|
||||
|
||||
<div className="omni-home-ecommerce-showcase__prompt">
|
||||
<span>商品图 + 生成要求</span>
|
||||
<strong>生成整套电商视觉</strong>
|
||||
<p>主图、详情页、虚拟模特、短视频首帧一次整理。</p>
|
||||
<div className="mock-layout">
|
||||
<div className="lay-img">
|
||||
<div className={`mini-cup ${card.color}`} />
|
||||
</div>
|
||||
<div className="lay-text">
|
||||
<div className={`lay-line title${card.color === "c2" ? " is-short" : card.color === "c3" ? " is-wide" : ""}`} />
|
||||
<div className={`lay-line sub${card.color === "c2" ? " is-medium" : ""}`} />
|
||||
<div className={`lay-line short${card.color === "c3" ? " is-medium" : ""}`} />
|
||||
<div className={`lay-badge${card.badgeTone === "purple" ? " purple" : ""}`}>{card.badge}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
<div className="omni-home-ecommerce-showcase__tools" aria-hidden="true">
|
||||
{HOME_ECOMMERCE_TOOLS.map((item) => (
|
||||
<div key={item.title} className="omni-home-ecommerce-showcase__tool">
|
||||
<b>{item.title}</b>
|
||||
<small>{item.meta}</small>
|
||||
function EcommerceFeatureShowcase() {
|
||||
const rootRef = useRef<HTMLDivElement | null>(null);
|
||||
const inputCardRef = useRef<HTMLDivElement | null>(null);
|
||||
const outputGroupRefs = useRef<Array<HTMLDivElement | null>>([]);
|
||||
const [flowLines, setFlowLines] = useState<EcommerceFlowLine[]>(() =>
|
||||
ECOMMERCE_MATRIX_OUTPUTS.map(() => ({ d: "", x: 0, y: 0 })),
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
let frameId: number | null = null;
|
||||
|
||||
const updateFlowLines = () => {
|
||||
const root = rootRef.current;
|
||||
const inputCard = inputCardRef.current;
|
||||
if (!root || !inputCard) return;
|
||||
|
||||
const rootRect = root.getBoundingClientRect();
|
||||
const inputRect = inputCard.getBoundingClientRect();
|
||||
const sx = inputRect.right - rootRect.left;
|
||||
const sy = inputRect.top - rootRect.top + inputRect.height / 2;
|
||||
const cornerRadius = 24;
|
||||
|
||||
const nextLines = outputGroupRefs.current.slice(0, ECOMMERCE_MATRIX_OUTPUTS.length).map((group) => {
|
||||
if (!group) return { d: "", x: 0, y: 0 };
|
||||
|
||||
const groupRect = group.getBoundingClientRect();
|
||||
const tx = groupRect.left - rootRect.left;
|
||||
const ty = groupRect.top - rootRect.top + groupRect.height / 2;
|
||||
const totalDistance = tx - sx;
|
||||
const splitX = sx + totalDistance * 0.3;
|
||||
const direction = ty > sy ? 1 : ty < sy ? -1 : 0;
|
||||
const verticalDistance = Math.abs(ty - sy);
|
||||
const resolvedRadius = Math.min(cornerRadius, verticalDistance / 2);
|
||||
|
||||
const d =
|
||||
direction === 0
|
||||
? `M ${sx} ${sy} L ${tx} ${ty}`
|
||||
: `M ${sx} ${sy} L ${splitX} ${sy} Q ${splitX + resolvedRadius} ${sy}, ${splitX + resolvedRadius} ${
|
||||
sy + direction * resolvedRadius
|
||||
} L ${splitX + resolvedRadius} ${ty - direction * resolvedRadius} Q ${splitX + resolvedRadius} ${ty}, ${
|
||||
splitX + resolvedRadius * 2
|
||||
} ${ty} L ${tx} ${ty}`;
|
||||
|
||||
return { d, x: tx, y: ty };
|
||||
});
|
||||
|
||||
setFlowLines(nextLines);
|
||||
};
|
||||
|
||||
const scheduleUpdate = () => {
|
||||
if (frameId !== null) {
|
||||
window.cancelAnimationFrame(frameId);
|
||||
}
|
||||
frameId = window.requestAnimationFrame(updateFlowLines);
|
||||
};
|
||||
|
||||
scheduleUpdate();
|
||||
window.addEventListener("resize", scheduleUpdate);
|
||||
|
||||
const resizeObserver = new ResizeObserver(scheduleUpdate);
|
||||
if (rootRef.current) {
|
||||
resizeObserver.observe(rootRef.current);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (frameId !== null) {
|
||||
window.cancelAnimationFrame(frameId);
|
||||
}
|
||||
window.removeEventListener("resize", scheduleUpdate);
|
||||
resizeObserver.disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div ref={rootRef} className="omni-home-ecommerce-matrix">
|
||||
<div className="bg-base" />
|
||||
<div className="bg-grid" />
|
||||
<div className="bg-stars" />
|
||||
<div className="bg-vignette" />
|
||||
<div className="bg-noise" />
|
||||
|
||||
<div className="page">
|
||||
<div className="left-panel">
|
||||
<h3 className="hero-title">
|
||||
一张原图
|
||||
<br />
|
||||
矩阵生产全场景图文
|
||||
</h3>
|
||||
|
||||
<p className="hero-desc">
|
||||
从商品原图到3D虚拟模特、场景图、详情图
|
||||
<br />
|
||||
AI工作流自动化，批量生成，高效出图
|
||||
</p>
|
||||
|
||||
<div className="features">
|
||||
{ECOMMERCE_MATRIX_FEATURES.map((item) => (
|
||||
<div key={item.title} className="feature-item">
|
||||
<div className="feature-icon">{item.icon}</div>
|
||||
<div className="feature-text">
|
||||
<h4>{item.title}</h4>
|
||||
<p>{item.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="omni-home-ecommerce-showcase__gallery" aria-hidden="true">
|
||||
{HOME_ECOMMERCE_TEMPLATES.map((item, index) => (
|
||||
<article key={item.title} className={`omni-home-ecommerce-showcase__shot is-${index + 1}`}>
|
||||
<img src={item.imageUrl} alt="" />
|
||||
<div>
|
||||
<span>{item.tag}</span>
|
||||
<strong>{item.title}</strong>
|
||||
<small>{item.meta}</small>
|
||||
<div className="process-flow">
|
||||
{ECOMMERCE_MATRIX_PROCESS.map((item, index) => (
|
||||
<Fragment key={item.label}>
|
||||
{index > 0 ? <span className="process-arrow">▸</span> : null}
|
||||
<div className="process-step">
|
||||
<span className="step-icon">{item.icon}</span>
|
||||
<span className="step-label">{item.label}</span>
|
||||
<span className="step-sub">{item.subLabel}</span>
|
||||
</div>
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="center-panel">
|
||||
<div ref={inputCardRef} className="input-card">
|
||||
<div className="input-card-header">
|
||||
<span className="input-card-label">商品原图 Input</span>
|
||||
<span className="input-card-res">3000×3000</span>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
<div className="input-card-img">
|
||||
<div className="product-placeholder">
|
||||
<div className="cup cup-1">
|
||||
<div className="cup-lid" />
|
||||
<div className="cup-straw" />
|
||||
<div className="cup-tag">DRINK MORE</div>
|
||||
</div>
|
||||
<div className="cup cup-2">
|
||||
<div className="cup-lid" />
|
||||
<div className="cup-straw" />
|
||||
<div className="cup-tag">DRINK MORE</div>
|
||||
</div>
|
||||
<div className="cup cup-3">
|
||||
<div className="cup-lid" />
|
||||
<div className="cup-straw" />
|
||||
<div className="cup-tag">DRINK MORE</div>
|
||||
</div>
|
||||
<div className="books">
|
||||
<div className="book" />
|
||||
<div className="book" />
|
||||
<div className="book" />
|
||||
<div className="book" />
|
||||
</div>
|
||||
<div className="table-surface" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="right-panel">
|
||||
<div className="ai-node">
|
||||
<div className="ai-node-title">AI 工作流</div>
|
||||
<div className="ai-node-list">
|
||||
{ECOMMERCE_MATRIX_AI_STEPS.map((item) => (
|
||||
<div key={item} className="ai-node-item">
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ECOMMERCE_MATRIX_OUTPUTS.map((group, groupIndex) => (
|
||||
<div
|
||||
key={group.title}
|
||||
ref={(node) => {
|
||||
outputGroupRefs.current[groupIndex] = node;
|
||||
}}
|
||||
className="output-group"
|
||||
>
|
||||
<div className="output-label">
|
||||
<h4>{group.title}</h4>
|
||||
<p>{group.subtitle}</p>
|
||||
</div>
|
||||
<div className="output-cards">
|
||||
{group.cards.map((card, cardIndex) => (
|
||||
<div key={`${group.title}-${cardIndex}`} className={`output-card${card.square ? " square" : ""}`}>
|
||||
<div className="output-card-img">
|
||||
<span className={`output-card-tag ${card.tagTone}`}>{card.tag}</span>
|
||||
<EcommerceMatrixCardVisual card={card} />
|
||||
<span className="output-card-res">{card.resolution}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<svg className="flow-svg" aria-hidden="true">
|
||||
<defs>
|
||||
<filter id="home-ecommerce-flow-glow">
|
||||
<feGaussianBlur stdDeviation="2" result="blur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="blur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
{flowLines.map((line, index) => (
|
||||
<Fragment key={index}>
|
||||
<path className={`flow-path flow-path-${index + 1}`} d={line.d} filter="url(#home-ecommerce-flow-glow)" />
|
||||
<circle className={`flow-dot flow-dot-${index + 1}`} cx={line.x} cy={line.y} r="4" filter="url(#home-ecommerce-flow-glow)" />
|
||||
</Fragment>
|
||||
))}
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -367,19 +638,21 @@ function HomePage({ onOpenGenerate, onOpenCanvas, onOpenEcommerce, onOpenScriptR
|
||||
<main className="omni-home__feature-pages" aria-label="OmniAI 功能介绍">
|
||||
{HOME_FEATURES.map((feature, index) => (
|
||||
<section key={feature.key} className={`omni-home__feature-page is-${feature.key}${index % 2 ? " is-alt" : ""}`}>
|
||||
<div className="omni-home__feature-copy">
|
||||
<span>
|
||||
{feature.icon}
|
||||
{feature.eyebrow}
|
||||
</span>
|
||||
<h2>{feature.title}</h2>
|
||||
<p>{feature.description}</p>
|
||||
<button type="button" onClick={() => handleFeatureOpen(feature.key)}>
|
||||
{feature.actionLabel}
|
||||
<ArrowRightOutlined />
|
||||
</button>
|
||||
</div>
|
||||
<div className="omni-home__feature-visual" aria-hidden="true">
|
||||
{feature.key !== "script" && feature.key !== "model" && feature.key !== "ecommerce" ? (
|
||||
<div className="omni-home__feature-copy">
|
||||
<span>
|
||||
{feature.icon}
|
||||
{feature.eyebrow}
|
||||
</span>
|
||||
<h2>{feature.title}</h2>
|
||||
<p>{feature.description}</p>
|
||||
<button type="button" onClick={() => handleFeatureOpen(feature.key)}>
|
||||
{feature.actionLabel}
|
||||
<ArrowRightOutlined />
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="omni-home__feature-visual" aria-hidden={feature.key !== "script" && feature.key !== "model" && feature.key !== "ecommerce"}>
|
||||
{feature.key === "script" ? (
|
||||
<ScriptReviewShowcase />
|
||||
) : feature.key === "model" ? (
|
||||
@@ -390,14 +663,18 @@ function HomePage({ onOpenGenerate, onOpenCanvas, onOpenEcommerce, onOpenScriptR
|
||||
<img src={feature.imageUrl} alt="" />
|
||||
)}
|
||||
</div>
|
||||
<div className="omni-home__feature-stats" aria-hidden="true">
|
||||
{feature.stats.map((item) => (
|
||||
<span key={item}>{item}</span>
|
||||
))}
|
||||
</div>
|
||||
{feature.key !== "script" && feature.key !== "model" && feature.key !== "ecommerce" ? (
|
||||
<div className="omni-home__feature-stats" aria-hidden="true">
|
||||
{feature.stats.map((item) => (
|
||||
<span key={item}>{item}</span>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
))}
|
||||
|
||||
<ToolboxSection onSelectView={onSelectView} onOpenImageTool={onOpenImageTool} />
|
||||
|
||||
<section className="omni-home__experience" aria-label="点击体验">
|
||||
<div className="omni-home__experience-copy">
|
||||
<span>
|
||||
@@ -430,8 +707,6 @@ function HomePage({ onOpenGenerate, onOpenCanvas, onOpenEcommerce, onOpenScriptR
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<ToolboxSection onSelectView={onSelectView} onOpenImageTool={onOpenImageTool} />
|
||||
</main>
|
||||
</section>
|
||||
</>
|
||||
|
||||
@@ -2,8 +2,8 @@ import { useEffect, useRef, useState } from "react";
|
||||
|
||||
const DIMS = [
|
||||
{ name: "钩子设计", score: 16, max: 20, hue: 145, desc: "吸引力·悬念·黄金三秒", isPerfect: false, isLow: false },
|
||||
{ name: "角色塑造", score: 15, max: 15, hue: 155, desc: "立体度·动机·弧光", isPerfect: true, isLow: false },
|
||||
{ name: "剧情结构", score: 16, max: 20, hue: 165, desc: "起承转合·节奏·冲突", isPerfect: false, isLow: false },
|
||||
{ name: "角色塑造", score: 15, max: 15, hue: 155, desc: "立体度·动机·弧光", isPerfect: true, isLow: false },
|
||||
{ name: "逻辑严密", score: 12, max: 15, hue: 175, desc: "自洽·伏笔·因果链", isPerfect: false, isLow: false },
|
||||
{ name: "场景构建", score: 10, max: 15, hue: 185, desc: "空间·视听·画面感", isPerfect: false, isLow: true },
|
||||
{ name: "内容深度", score: 8, max: 15, hue: 195, desc: "主题·情感·思想内核", isPerfect: false, isLow: true },
|
||||
@@ -27,6 +27,12 @@ const OPTIMIZATIONS = [
|
||||
{ dim: "逻辑严密 → 补强", priority: "中优先", priorityClass: "badge-orange", text: "补充世界观细节，强化因果链与伏笔回收" },
|
||||
];
|
||||
|
||||
const SHOWCASE_POINTS = [
|
||||
{ icon: "⚡", title: "六维评分", text: "结构、节奏、人物到商业潜力全面量化" },
|
||||
{ icon: "◈", title: "质量量化", text: "用雷达评分拆解剧本质量与短板" },
|
||||
{ icon: "↗", title: "逐项优化", text: "给出可执行的优化路径和打磨方向" },
|
||||
];
|
||||
|
||||
function animateNumber(el: HTMLElement | null, target: number, duration: number) {
|
||||
if (!el) return;
|
||||
const start = performance.now();
|
||||
@@ -79,125 +85,154 @@ function ScriptReviewShowcase() {
|
||||
|
||||
return (
|
||||
<div className="omni-script-review-showcase" id="script-review-showcase">
|
||||
{/* Score Hero */}
|
||||
<div className="srs-score-hero">
|
||||
<div className="srs-score-left">
|
||||
<div className="srs-score-circle">
|
||||
<div className="srs-score-circle-inner">
|
||||
<span className="srs-score-num" ref={scoreRef}>0</span>
|
||||
<span className="srs-score-den">/ 100</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="srs-score-meta">
|
||||
<div className="srs-score-grade">A 级</div>
|
||||
<div className="srs-score-tags">
|
||||
<span className="srs-score-tag">现实剧情</span>
|
||||
<span className="srs-score-tag">58min</span>
|
||||
<span className="srs-score-tag">6角色</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="srs-left-panel">
|
||||
<div className="srs-brand-section">
|
||||
<h1>剧本智能测评</h1>
|
||||
<p>用六维雷达评分拆解剧本质量，从结构、节奏、人物到商业潜力给出可执行的优化路径。</p>
|
||||
</div>
|
||||
<div className="srs-score-divider" />
|
||||
<div className="srs-score-right">
|
||||
<div className="srs-score-proj">电商广告片生成项目计划 · 评测结果</div>
|
||||
<div className="srs-score-summary">
|
||||
现实剧情特征清晰，角色塑造表现突出。当前最值得继续打磨的是内容深度，建议围绕人物选择、冲突升级和可拍摄细节继续压实。
|
||||
</div>
|
||||
|
||||
<div className="srs-point-list">
|
||||
{SHOWCASE_POINTS.map((item) => (
|
||||
<div key={item.title} className="srs-point-card">
|
||||
<div className="srs-point-icon">{item.icon}</div>
|
||||
<div>
|
||||
<h3>{item.title}</h3>
|
||||
<p>{item.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="srs-flow-card">
|
||||
<span>上传剧本</span>
|
||||
<b>→</b>
|
||||
<span>六维评分</span>
|
||||
<b>→</b>
|
||||
<span>优化建议</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Vertical Bar Chart */}
|
||||
<div className="srs-chart-card">
|
||||
<div className="srs-chart-title">六维评分 Dimension Breakdown</div>
|
||||
<div className="srs-chart-body">
|
||||
{DIMS.map((dim, i) => {
|
||||
const pct = dim.score / dim.max;
|
||||
return (
|
||||
<div key={dim.name} className="srs-chart-col">
|
||||
<div className="srs-chart-bar-wrap">
|
||||
<div className="srs-chart-bar-bg" style={{ height: "100%" }} />
|
||||
<div
|
||||
ref={(el) => { barRefs.current[i] = el; }}
|
||||
className={`srs-chart-bar-fill${dim.isPerfect ? " is-perfect" : ""}${dim.isLow ? " is-low" : ""}`}
|
||||
data-pct={String(Math.round(pct * 100))}
|
||||
style={{ height: "0%" }}
|
||||
>
|
||||
<div className="srs-chart-bar-score">
|
||||
<span
|
||||
ref={(el) => { scoreValRefs.current[i] = el; }}
|
||||
data-target={String(dim.score)}
|
||||
>0</span>
|
||||
<span className="srs-chart-bar-sub">/{dim.max}</span>
|
||||
{dim.isPerfect && <span className="srs-chart-bar-star">★</span>}
|
||||
<div className="srs-results-panel">
|
||||
{/* Score Hero */}
|
||||
<div className="srs-score-hero">
|
||||
<div className="srs-score-left">
|
||||
<div className="srs-score-circle">
|
||||
<div className="srs-score-circle-inner">
|
||||
<span className="srs-score-num" ref={scoreRef}>0</span>
|
||||
<span className="srs-score-den">/ 100</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="srs-score-meta">
|
||||
<div className="srs-score-grade">A 级</div>
|
||||
<div className="srs-score-tags">
|
||||
<span className="srs-score-tag">现实剧情</span>
|
||||
<span className="srs-score-tag">58min</span>
|
||||
<span className="srs-score-tag">6角色</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="srs-score-divider" />
|
||||
<div className="srs-score-right">
|
||||
<div className="srs-score-proj">电商广告片生成项目计划 · 评测结果</div>
|
||||
<div className="srs-score-summary">
|
||||
现实剧情特征清晰，角色塑造表现突出。当前最值得继续打磨的是内容深度，建议围绕人物选择、冲突升级和可拍摄细节继续压实。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Vertical Bar Chart */}
|
||||
<div className="srs-chart-card">
|
||||
<div className="srs-chart-title">六维评分 Dimension Breakdown</div>
|
||||
<div className="srs-chart-body">
|
||||
{DIMS.map((dim, i) => {
|
||||
const pct = dim.score / dim.max;
|
||||
return (
|
||||
<div key={dim.name} className="srs-chart-col">
|
||||
<div className="srs-chart-bar-wrap">
|
||||
<div className="srs-chart-bar-bg" style={{ height: "100%" }} />
|
||||
<div
|
||||
ref={(el) => { barRefs.current[i] = el; }}
|
||||
className={`srs-chart-bar-fill${dim.isPerfect ? " is-perfect" : ""}${dim.isLow ? " is-low" : ""}`}
|
||||
data-pct={String(Math.round(pct * 100))}
|
||||
style={{ height: "0%" }}
|
||||
>
|
||||
<div className="srs-chart-bar-score">
|
||||
<span
|
||||
ref={(el) => { scoreValRefs.current[i] = el; }}
|
||||
data-target={String(dim.score)}
|
||||
>0</span>
|
||||
<span className="srs-chart-bar-sub">/{dim.max}</span>
|
||||
{dim.isPerfect && <span className="srs-chart-bar-star">★</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="srs-chart-col-label">
|
||||
<div className="srs-chart-col-name">{dim.name}</div>
|
||||
<div className="srs-chart-col-desc">{dim.desc}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="srs-chart-col-label">
|
||||
<div className="srs-chart-col-name">{dim.name}</div>
|
||||
<div className="srs-chart-col-desc">{dim.desc}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Triple Section */}
|
||||
<div className="srs-triple-section">
|
||||
{/* Highlights */}
|
||||
<div className="srs-section-card is-highlight">
|
||||
<div className="srs-section-header">
|
||||
<div className="srs-section-icon">✦</div>
|
||||
<span className="srs-section-label">亮点</span>
|
||||
</div>
|
||||
<div className="srs-section-list">
|
||||
{HIGHLIGHTS.map((item) => (
|
||||
<div key={item.dim} className="srs-section-item">
|
||||
<div className="srs-section-item-head">
|
||||
<span className="srs-section-item-dim">{item.dim}</span>
|
||||
<span className="srs-section-item-score is-green">{item.score}</span>
|
||||
</div>
|
||||
<div className="srs-section-item-text">{item.text}</div>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Weaknesses */}
|
||||
<div className="srs-section-card is-weakness">
|
||||
<div className="srs-section-header">
|
||||
<div className="srs-section-icon">✗</div>
|
||||
<span className="srs-section-label">缺点</span>
|
||||
</div>
|
||||
<div className="srs-section-list">
|
||||
{WEAKNESSES.map((item) => (
|
||||
<div key={item.dim} className="srs-section-item">
|
||||
<div className="srs-section-item-head">
|
||||
<span className="srs-section-item-dim">{item.dim}</span>
|
||||
<span className="srs-section-item-score is-red">{item.score}</span>
|
||||
{/* Triple Section */}
|
||||
<div className="srs-triple-section">
|
||||
{/* Highlights */}
|
||||
<div className="srs-section-card is-highlight">
|
||||
<div className="srs-section-header">
|
||||
<div className="srs-section-icon">✦</div>
|
||||
<span className="srs-section-label">亮点</span>
|
||||
</div>
|
||||
<div className="srs-section-list">
|
||||
{HIGHLIGHTS.map((item) => (
|
||||
<div key={item.dim} className="srs-section-item">
|
||||
<div className="srs-section-item-head">
|
||||
<span className="srs-section-item-dim">{item.dim}</span>
|
||||
<span className="srs-section-item-score is-green">{item.score}</span>
|
||||
</div>
|
||||
<div className="srs-section-item-text">{item.text}</div>
|
||||
</div>
|
||||
<div className="srs-section-item-text">{item.text}</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Optimization */}
|
||||
<div className="srs-section-card is-optimize">
|
||||
<div className="srs-section-header">
|
||||
<div className="srs-section-icon">⚡</div>
|
||||
<span className="srs-section-label">优化路径</span>
|
||||
</div>
|
||||
<div className="srs-section-list">
|
||||
{OPTIMIZATIONS.map((item) => (
|
||||
<div key={item.dim} className="srs-section-item">
|
||||
<div className="srs-section-item-head">
|
||||
<span className="srs-section-item-dim">{item.dim}</span>
|
||||
<span className={`srs-section-item-badge ${item.priorityClass}`}>{item.priority}</span>
|
||||
{/* Weaknesses */}
|
||||
<div className="srs-section-card is-weakness">
|
||||
<div className="srs-section-header">
|
||||
<div className="srs-section-icon">✗</div>
|
||||
<span className="srs-section-label">缺点</span>
|
||||
</div>
|
||||
<div className="srs-section-list">
|
||||
{WEAKNESSES.map((item) => (
|
||||
<div key={item.dim} className="srs-section-item">
|
||||
<div className="srs-section-item-head">
|
||||
<span className="srs-section-item-dim">{item.dim}</span>
|
||||
<span className="srs-section-item-score is-red">{item.score}</span>
|
||||
</div>
|
||||
<div className="srs-section-item-text">{item.text}</div>
|
||||
</div>
|
||||
<div className="srs-section-item-text">{item.text}</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Optimization */}
|
||||
<div className="srs-section-card is-optimize">
|
||||
<div className="srs-section-header">
|
||||
<div className="srs-section-icon">⚡</div>
|
||||
<span className="srs-section-label">优化路径</span>
|
||||
</div>
|
||||
<div className="srs-section-list">
|
||||
{OPTIMIZATIONS.map((item) => (
|
||||
<div key={item.dim} className="srs-section-item">
|
||||
<div className="srs-section-item-head">
|
||||
<span className="srs-section-item-dim">{item.dim}</span>
|
||||
<span className={`srs-section-item-badge ${item.priorityClass}`}>{item.priority}</span>
|
||||
</div>
|
||||
<div className="srs-section-item-text">{item.text}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -787,7 +787,7 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
|
||||
</div>
|
||||
) : inpaintResultImages.length && activeTool === "inpaint" ? (
|
||||
<div className="image-workbench-inpaint-stage">
|
||||
<img src={inpaintResultImages[0]} alt="重绘结果" style={{ maxWidth: "90%", maxHeight: "90%", borderRadius: 8, objectFit: "contain" }} />
|
||||
<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 /> 重新编辑遮罩
|
||||
@@ -1284,12 +1284,16 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
|
||||
))}
|
||||
</div>
|
||||
) : referenceImage ? (
|
||||
<img src={referenceImage} alt="参考图预览" />
|
||||
<div className="studio-canvas-image">
|
||||
<img src={referenceImage} alt="参考图预览" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="image-workbench-empty">
|
||||
<PictureOutlined />
|
||||
<strong>上传参考图后在此预览</strong>
|
||||
<span>生成结果也会显示在这里</span>
|
||||
<div className="studio-canvas-ghost">
|
||||
<div className="studio-canvas-ghost__icon">
|
||||
<PictureOutlined />
|
||||
</div>
|
||||
<div className="studio-canvas-ghost__title">上传参考图后在此预览</div>
|
||||
<div className="studio-canvas-ghost__hint">生成结果也会显示在这里</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
import {
|
||||
CameraOutlined,
|
||||
CheckOutlined,
|
||||
CheckCircleFilled,
|
||||
CloseOutlined,
|
||||
DeleteOutlined,
|
||||
EditOutlined,
|
||||
LockOutlined,
|
||||
MailOutlined,
|
||||
MobileOutlined,
|
||||
@@ -134,6 +137,48 @@ function mapAssetToSavedItem(asset: Awaited<ReturnType<typeof assetClient.list>>
|
||||
};
|
||||
}
|
||||
|
||||
function formatProfileDate(value: string | null | undefined): string {
|
||||
if (!value) return "刚刚";
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return value;
|
||||
|
||||
return new Intl.DateTimeFormat("zh-CN", {
|
||||
month: "numeric",
|
||||
day: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
}).format(date);
|
||||
}
|
||||
|
||||
function formatTaskType(type: WebGenerationPreviewTask["type"]): string {
|
||||
const labels: Record<WebGenerationPreviewTask["type"], string> = {
|
||||
image: "图像",
|
||||
video: "视频",
|
||||
agent: "智能体",
|
||||
"digital-human": "数字人",
|
||||
"character-mix": "角色融合",
|
||||
};
|
||||
return labels[type] || type;
|
||||
}
|
||||
|
||||
function formatTaskStatus(status: WebGenerationPreviewTask["status"]): string {
|
||||
const labels: Record<WebGenerationPreviewTask["status"], string> = {
|
||||
queued: "排队中",
|
||||
running: "生成中",
|
||||
completed: "已完成",
|
||||
failed: "失败",
|
||||
};
|
||||
return labels[status] || status;
|
||||
}
|
||||
|
||||
function formatAssetStatus(status: string | undefined): string {
|
||||
const normalized = String(status || "").toLowerCase();
|
||||
if (normalized === "completed" || normalized === "ready" || normalized === "success") return "可用";
|
||||
if (normalized === "running" || normalized === "processing") return "处理中";
|
||||
if (normalized === "failed" || normalized === "error") return "失败";
|
||||
return status || "资产";
|
||||
}
|
||||
|
||||
function ProfilePage({
|
||||
session,
|
||||
usage,
|
||||
@@ -187,6 +232,9 @@ function ProfilePage({
|
||||
const [profileNotice, setProfileNotice] = useState<string | null>(null);
|
||||
const [localAvatarUrl, setLocalAvatarUrl] = useState(() => session?.user.avatarUrl || readLocalProfileValue(userId, "avatar"));
|
||||
const [profileBio, setProfileBio] = useState(() => session?.user.bio || readLocalProfileValue(userId, "bio"));
|
||||
const [isBioEditing, setIsBioEditing] = useState(false);
|
||||
const [bioEditBackup, setBioEditBackup] = useState("");
|
||||
const [bioStatusNotice, setBioStatusNotice] = useState<string | null>(null);
|
||||
const [bannerUrl, setBannerUrl] = useState(() => session?.user.backgroundUrl || readLocalProfileValue(userId, "background"));
|
||||
|
||||
const completedTasks = tasks.filter((task) => task.status === "completed");
|
||||
@@ -195,6 +243,9 @@ function ProfilePage({
|
||||
const packageLabel = session?.user.activePackages?.[0]?.name || "按量积分";
|
||||
const avatarUrl = session?.user.avatarUrl || localAvatarUrl || null;
|
||||
const displayedBio = profileBio.trim() || "这个人还没有填写个性签名";
|
||||
const emailLooksValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
|
||||
const phoneLooksValid = /^1[3-9]\d{9}$/.test(phone.trim());
|
||||
const passwordLooksReady = password.length >= (mode === "register" ? 6 : 1);
|
||||
|
||||
useEffect(() => {
|
||||
setLocalAvatarUrl(session?.user.avatarUrl || readLocalProfileValue(userId, "avatar"));
|
||||
@@ -525,8 +576,29 @@ function ProfilePage({
|
||||
void syncProfilePatch({ bio: nextBio || null });
|
||||
};
|
||||
|
||||
const startBioEdit = () => {
|
||||
setBioEditBackup(profileBio);
|
||||
setBioStatusNotice(null);
|
||||
setIsBioEditing(true);
|
||||
};
|
||||
|
||||
const confirmBioEdit = () => {
|
||||
handleBioBlur();
|
||||
setIsBioEditing(false);
|
||||
setBioStatusNotice("个性签名已保存");
|
||||
};
|
||||
|
||||
const cancelBioEdit = () => {
|
||||
setProfileBio(bioEditBackup);
|
||||
setIsBioEditing(false);
|
||||
setBioStatusNotice(null);
|
||||
};
|
||||
|
||||
const renderEmptyState = (text: string, actionLabel: string, action: () => void) => (
|
||||
<div className="profile-page__empty-state">
|
||||
<span className="profile-page__empty-mark" aria-hidden="true">
|
||||
<PlusOutlined />
|
||||
</span>
|
||||
<p className="profile-page__empty-text">{text}</p>
|
||||
<button type="button" className="profile-page__empty-btn" onClick={action}>
|
||||
<PlusOutlined />
|
||||
@@ -538,20 +610,22 @@ function ProfilePage({
|
||||
const renderActivePanel = () => {
|
||||
if (activePanel === "works") {
|
||||
return visibleWorks.length ? (
|
||||
<div className="profile-page__list-grid motion-stagger">
|
||||
{visibleWorks.map((task) => (
|
||||
<article key={task.id} className="profile-page__list-card">
|
||||
<div className="profile-page__list-card-head">
|
||||
<strong>{task.title}</strong>
|
||||
<span>{task.type}</span>
|
||||
</div>
|
||||
<p>{task.prompt}</p>
|
||||
<div className="profile-page__list-card-meta">
|
||||
<span>{task.status}</span>
|
||||
<span>{task.createdAt}</span>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
<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">
|
||||
<div className="profile-page__list-card-head">
|
||||
<strong>{task.title}</strong>
|
||||
<span>{formatTaskType(task.type)}</span>
|
||||
</div>
|
||||
<p>{task.prompt}</p>
|
||||
<div className="profile-page__list-card-meta">
|
||||
<span>{formatTaskStatus(task.status)}</span>
|
||||
<span>{formatProfileDate(task.createdAt)}</span>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
renderEmptyState("向全世界展示你最得意的创作。", "开始创作", onOpenWorkbench)
|
||||
@@ -565,7 +639,7 @@ function ProfilePage({
|
||||
<article key={project.id} className="profile-page__list-card">
|
||||
<div className="profile-page__list-card-head">
|
||||
<strong>{project.name}</strong>
|
||||
<span>{project.updatedAt}</span>
|
||||
<span>{formatProfileDate(project.updatedAt)}</span>
|
||||
{onDeleteProject ? (
|
||||
<button
|
||||
type="button"
|
||||
@@ -597,12 +671,12 @@ function ProfilePage({
|
||||
<article key={asset.id} className="profile-page__list-card">
|
||||
<div className="profile-page__list-card-head">
|
||||
<strong>{asset.name}</strong>
|
||||
<span>{asset.status}</span>
|
||||
<span>{formatAssetStatus(asset.status)}</span>
|
||||
</div>
|
||||
<p>{asset.description}</p>
|
||||
<div className="profile-page__list-card-meta">
|
||||
<span>{asset.type}</span>
|
||||
<span>{asset.updatedAt}</span>
|
||||
<span>{formatProfileDate(asset.updatedAt)}</span>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
@@ -665,15 +739,39 @@ function ProfilePage({
|
||||
</span>
|
||||
</div>
|
||||
<strong className="profile-page__username">{displayName}</strong>
|
||||
<textarea
|
||||
className="profile-page__bio"
|
||||
value={profileBio}
|
||||
onChange={(event) => setProfileBio(event.target.value)}
|
||||
onBlur={handleBioBlur}
|
||||
placeholder={displayedBio}
|
||||
rows={2}
|
||||
maxLength={80}
|
||||
/>
|
||||
{isBioEditing ? (
|
||||
<div className="profile-page__bio-editor">
|
||||
<textarea
|
||||
className="profile-page__bio"
|
||||
value={profileBio}
|
||||
onChange={(event) => setProfileBio(event.target.value)}
|
||||
placeholder="填写一句个人签名"
|
||||
rows={2}
|
||||
maxLength={80}
|
||||
autoFocus
|
||||
/>
|
||||
<div className="profile-page__bio-actions">
|
||||
<button type="button" className="profile-page__bio-action profile-page__bio-action--save" onClick={confirmBioEdit}>
|
||||
<CheckOutlined />
|
||||
保存
|
||||
</button>
|
||||
<button type="button" className="profile-page__bio-action" onClick={cancelBioEdit}>
|
||||
<CloseOutlined />
|
||||
取消
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className={`profile-page__bio-display${profileBio.trim() ? "" : " is-empty"}`}
|
||||
onClick={startBioEdit}
|
||||
>
|
||||
<span>{displayedBio}</span>
|
||||
<EditOutlined className="profile-page__bio-edit-icon" />
|
||||
</button>
|
||||
)}
|
||||
{bioStatusNotice ? <span className="profile-page__bio-status">{bioStatusNotice}</span> : null}
|
||||
{profileNotice ? <span className="profile-page__sync-notice">{profileNotice}</span> : null}
|
||||
</div>
|
||||
|
||||
@@ -692,18 +790,21 @@ function ProfilePage({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" className="profile-page__share-btn">
|
||||
<button type="button" className="profile-page__share-btn profile-page__share-btn--plan">
|
||||
<ShareAltOutlined />
|
||||
{packageLabel}
|
||||
</button>
|
||||
|
||||
<button type="button" className="profile-page__share-btn" onClick={onOpenWorkbench}>
|
||||
<button type="button" className="profile-page__share-btn profile-page__share-btn--primary" onClick={onOpenWorkbench}>
|
||||
<PlusOutlined />
|
||||
进入工作台
|
||||
</button>
|
||||
<button type="button" className="profile-page__share-btn" onClick={onOpenCommunity}>
|
||||
<button type="button" className="profile-page__share-btn profile-page__share-btn--secondary" onClick={onOpenCommunity}>
|
||||
<ShareAltOutlined />
|
||||
打开社区
|
||||
</button>
|
||||
<button type="button" className="profile-page__share-btn" onClick={onLogout}>
|
||||
<button type="button" className="profile-page__share-btn profile-page__share-btn--danger" onClick={onLogout}>
|
||||
<LockOutlined />
|
||||
退出登录
|
||||
</button>
|
||||
</aside>
|
||||
@@ -759,13 +860,25 @@ function ProfilePage({
|
||||
<div className="profile-page__upload-card profile-page__upload-card--meta">
|
||||
{accountPanel === "credits" ? (
|
||||
<>
|
||||
<span>当前账号：{displayName}</span>
|
||||
<span>积分剩余：{(usage.balanceCents / 100).toFixed(2)}</span>
|
||||
<span className="profile-page__meta-item">
|
||||
<small>当前账号</small>
|
||||
<strong>{displayName}</strong>
|
||||
</span>
|
||||
<span className="profile-page__meta-item">
|
||||
<small>积分剩余</small>
|
||||
<strong>{(usage.balanceCents / 100).toFixed(2)}</strong>
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span>任务总数：{tasks.length}</span>
|
||||
<span>已完成：{completedTasks.length}</span>
|
||||
<span className="profile-page__meta-item">
|
||||
<small>任务总数</small>
|
||||
<strong>{tasks.length}</strong>
|
||||
</span>
|
||||
<span className="profile-page__meta-item">
|
||||
<small>已完成</small>
|
||||
<strong>{completedTasks.length}</strong>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
@@ -784,12 +897,30 @@ function ProfilePage({
|
||||
<source src={AUTH_SHOWCASE_VIDEO_URL} type="video/mp4" />
|
||||
</video>
|
||||
<div className="auth-page__video-overlay">
|
||||
<h1 className="auth-page__brand">OmniAI</h1>
|
||||
<p className="auth-page__tagline">一句话，从创意到成片</p>
|
||||
<div className="auth-page__features">
|
||||
<span>AI 视频生成</span>
|
||||
<span>AI 图片创作</span>
|
||||
<span>AI 电商素材</span>
|
||||
<div className="auth-page__showcase-content">
|
||||
<div className="auth-page__brand-row">
|
||||
<h1 className="auth-page__brand">OmniAI</h1>
|
||||
</div>
|
||||
<p className="auth-page__tagline">一句话，从创意到成片</p>
|
||||
<div className="auth-page__features">
|
||||
<span>AI 视频生成</span>
|
||||
<span>AI 图片创作</span>
|
||||
<span>AI 电商素材</span>
|
||||
</div>
|
||||
<div className="auth-page__showcase-stats" aria-label="平台能力">
|
||||
<span>
|
||||
<strong>Studio</strong>
|
||||
创作工作台
|
||||
</span>
|
||||
<span>
|
||||
<strong>Assets</strong>
|
||||
资产沉淀
|
||||
</span>
|
||||
<span>
|
||||
<strong>Team</strong>
|
||||
团队协作
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -840,7 +971,8 @@ function ProfilePage({
|
||||
<MailOutlined /> 邮箱
|
||||
</button>
|
||||
<button type="button" className={authTab === "phone" ? "is-active" : ""} onClick={() => { setAuthTab("phone"); setFieldErrors({}); }}>
|
||||
<MobileOutlined /> 手机验证码
|
||||
<MobileOutlined />
|
||||
<span className="auth-page__tab-label-short">手机</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -920,6 +1052,11 @@ function ProfilePage({
|
||||
autoComplete={mode === "login" ? "current-password" : "new-password"}
|
||||
/>
|
||||
{fieldErrors.password ? <span className="auth-page__field-error">{fieldErrors.password}</span> : null}
|
||||
{mode === "register" && passwordLooksReady && !fieldErrors.password ? (
|
||||
<span className="auth-page__field-hint">
|
||||
<CheckCircleFilled /> 密码长度符合要求
|
||||
</span>
|
||||
) : null}
|
||||
</label>
|
||||
{mode === "login" ? (
|
||||
<div className="auth-page__forgot">
|
||||
@@ -957,6 +1094,11 @@ function ProfilePage({
|
||||
autoComplete="email"
|
||||
/>
|
||||
{fieldErrors.email ? <span className="auth-page__field-error">{fieldErrors.email}</span> : null}
|
||||
{emailLooksValid && !fieldErrors.email ? (
|
||||
<span className="auth-page__field-hint">
|
||||
<CheckCircleFilled /> 邮箱格式正确
|
||||
</span>
|
||||
) : null}
|
||||
</label>
|
||||
<label className={`auth-page__field${fieldErrors.password ? " auth-page__field--error" : ""}`}>
|
||||
<span>
|
||||
@@ -971,6 +1113,11 @@ function ProfilePage({
|
||||
autoComplete={mode === "login" ? "current-password" : "new-password"}
|
||||
/>
|
||||
{fieldErrors.password ? <span className="auth-page__field-error">{fieldErrors.password}</span> : null}
|
||||
{mode === "register" && passwordLooksReady && !fieldErrors.password ? (
|
||||
<span className="auth-page__field-hint">
|
||||
<CheckCircleFilled /> 密码长度符合要求
|
||||
</span>
|
||||
) : null}
|
||||
</label>
|
||||
</>
|
||||
) : null}
|
||||
@@ -986,6 +1133,11 @@ function ProfilePage({
|
||||
<input type="tel" value={phone} onChange={(event) => { setPhone(event.target.value); clearFieldError("phone"); }} onBlur={() => handleFieldBlur("phone", phone)} placeholder="输入手机号" autoComplete="tel" />
|
||||
</div>
|
||||
{fieldErrors.phone ? <span className="auth-page__field-error">{fieldErrors.phone}</span> : null}
|
||||
{phoneLooksValid && !fieldErrors.phone ? (
|
||||
<span className="auth-page__field-hint">
|
||||
<CheckCircleFilled /> 手机号格式正确
|
||||
</span>
|
||||
) : null}
|
||||
</label>
|
||||
<label className={`auth-page__field${fieldErrors.smsCode ? " auth-page__field--error" : ""}`}>
|
||||
<span>
|
||||
@@ -1011,6 +1163,11 @@ function ProfilePage({
|
||||
</span>
|
||||
<input type="password" value={password} onChange={(event) => { setPassword(event.target.value); clearFieldError("password"); }} onBlur={() => handleFieldBlur("password", password)} placeholder="至少 6 位" autoComplete="new-password" />
|
||||
{fieldErrors.password ? <span className="auth-page__field-error">{fieldErrors.password}</span> : null}
|
||||
{passwordLooksReady && !fieldErrors.password ? (
|
||||
<span className="auth-page__field-hint">
|
||||
<CheckCircleFilled /> 密码长度符合要求
|
||||
</span>
|
||||
) : null}
|
||||
</label>
|
||||
) : null}
|
||||
</>
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
import {
|
||||
BarChartOutlined,
|
||||
CheckCircleFilled,
|
||||
CopyOutlined,
|
||||
DownloadOutlined,
|
||||
FileTextOutlined,
|
||||
LoadingOutlined,
|
||||
ThunderboltOutlined,
|
||||
UploadOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { useEffect, useRef, useState, type ChangeEvent, type KeyboardEvent } from "react";
|
||||
@@ -217,13 +220,6 @@ async function extractDocxText(bytes: Uint8Array): Promise<string> {
|
||||
}
|
||||
const textMatches = xmlText.match(/<w:t[^>]*>([\s\S]*?)<\/w:t>/g);
|
||||
if (!textMatches) return "";
|
||||
const paragraphs: string[] = [];
|
||||
let currentLine = "";
|
||||
for (const match of textMatches) {
|
||||
const content = match.replace(/<[^>]+>/g, "").replace(/</g, "<").replace(/>/g, ">").replace(/&/g, "&").replace(/"/g, "\"");
|
||||
currentLine += content;
|
||||
}
|
||||
// Try to find paragraph breaks
|
||||
const paraMatches = xmlText.match(/<w:p[ >][\s\S]*?<\/w:p>/g);
|
||||
if (paraMatches) {
|
||||
return paraMatches.map((p) => {
|
||||
@@ -232,7 +228,13 @@ async function extractDocxText(bytes: Uint8Array): Promise<string> {
|
||||
return tMatches.map((m) => m.replace(/<[^>]+>/g, "").replace(/</g, "<").replace(/>/g, ">").replace(/&/g, "&").replace(/"/g, "\"")).join("");
|
||||
}).filter(Boolean).join("\n").trim();
|
||||
}
|
||||
return currentLine.trim();
|
||||
return "";
|
||||
}
|
||||
|
||||
function formatFileSize(size: number): string {
|
||||
if (size < 1024) return `${size} B`;
|
||||
if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
|
||||
return `${(size / 1024 / 1024).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
const SCORE_DIMENSIONS: ScoreDimension[] = [
|
||||
@@ -446,9 +448,10 @@ function ScriptTokensPage() {
|
||||
const compactTitle = uploadedFile?.name?.replace(/\.[^.]+$/, "") ?? "剧本评测";
|
||||
const scriptMinutes = Math.max(8, Math.round(script.length / 460));
|
||||
const reportDate = new Date().toLocaleDateString("zh-CN", { month: "2-digit", day: "2-digit" });
|
||||
const statusClass = loading ? "is-loading" : result ? "is-complete" : hasContent ? "is-ready" : "is-idle";
|
||||
|
||||
return (
|
||||
<section className="script-eval-v5 page-motion">
|
||||
<section className={`script-eval-v5 page-motion ${statusClass}`}>
|
||||
<div className="script-eval-v5-page">
|
||||
{/* Left Panel */}
|
||||
<aside className="script-eval-v5-left">
|
||||
@@ -464,7 +467,10 @@ function ScriptTokensPage() {
|
||||
{uploadedFile ? (
|
||||
<div className="script-eval-v5-upload-done is-show">
|
||||
<CheckCircleFilled />
|
||||
<span className="script-eval-v5-uf-name">{uploadedFile.name}</span>
|
||||
<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>
|
||||
</span>
|
||||
<span className="script-eval-v5-uf-re" onClick={(e) => { e.stopPropagation(); handleReset(); }}>
|
||||
重新上传
|
||||
</span>
|
||||
@@ -474,7 +480,7 @@ function ScriptTokensPage() {
|
||||
<div className="script-eval-v5-upload-icon"><UploadOutlined /></div>
|
||||
<div className="script-eval-v5-upload-text">拖拽或点击上传</div>
|
||||
<button type="button" className="script-eval-v5-upload-btn" onClick={(e) => { e.stopPropagation(); fileInputRef.current?.click(); }}>
|
||||
+ 上传剧本
|
||||
<UploadOutlined /> 选择剧本
|
||||
</button>
|
||||
<div className="script-eval-v5-upload-hint">{TEXT_FILE_HINT}</div>
|
||||
</>
|
||||
@@ -547,10 +553,12 @@ function ScriptTokensPage() {
|
||||
disabled={loading || !hasContent}
|
||||
onClick={() => void handleEvaluate()}
|
||||
>
|
||||
{loading ? "◆ 评测中..." : "◆ 开始评测"}
|
||||
{loading ? <LoadingOutlined /> : <ThunderboltOutlined />}
|
||||
<span>{loading ? "评测中..." : "开始评测"}</span>
|
||||
</button>
|
||||
<button type="button" className="script-eval-v5-export-btn" disabled={!result} onClick={handleExportMarkdown}>
|
||||
导出评测报告
|
||||
<DownloadOutlined />
|
||||
<span>导出评测报告</span>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -584,6 +592,11 @@ function ScriptTokensPage() {
|
||||
<div className="page-loading-spinner" />
|
||||
<strong>AI 正在分析剧本...</strong>
|
||||
<p>正在调用模型进行六维评分，预计需要 15-30 秒</p>
|
||||
<div className="script-eval-v5-loading-steps" aria-hidden="true">
|
||||
<span>结构识别</span>
|
||||
<span>冲突评估</span>
|
||||
<span>商业潜力</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -670,13 +683,23 @@ function ScriptTokensPage() {
|
||||
<span>0%</span>
|
||||
</div>
|
||||
<div className="script-eval-report__chart-grid">
|
||||
{SCORE_DIMENSIONS.map((dim) => {
|
||||
{SCORE_DIMENSIONS.map((dim, dimIndex) => {
|
||||
const score = result.dimensionScores[dim.key] ?? 0;
|
||||
const pct = Math.max(0, Math.min(1, score / dim.maxScore));
|
||||
const lossPct = 1 - pct;
|
||||
const isPerfect = score === dim.maxScore;
|
||||
const isActive = activeDim === null || activeDim === dimIndex;
|
||||
return (
|
||||
<button key={dim.key} type="button" className="script-eval-report__bar-col">
|
||||
<button
|
||||
key={dim.key}
|
||||
type="button"
|
||||
className={`script-eval-report__bar-col${isActive ? "" : " is-dimmed"}`}
|
||||
onMouseEnter={() => setActiveDim(dimIndex)}
|
||||
onFocus={() => setActiveDim(dimIndex)}
|
||||
onMouseLeave={() => setActiveDim(null)}
|
||||
onBlur={() => setActiveDim(null)}
|
||||
aria-label={`${dim.label} ${score}/${dim.maxScore}，${dim.hint}`}
|
||||
>
|
||||
<div className="script-eval-report__bar-score">
|
||||
<b>{score}</b><small>/{dim.maxScore}</small>{isPerfect ? <em>*</em> : null}
|
||||
</div>
|
||||
@@ -691,6 +714,14 @@ function ScriptTokensPage() {
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="script-eval-report__chart-note">
|
||||
<BarChartOutlined />
|
||||
<span>
|
||||
{activeDim === null
|
||||
? "悬停维度可查看当前分项表现，优先从低分项制定改稿计划。"
|
||||
: `${SCORE_DIMENSIONS[activeDim].label}：${SCORE_DIMENSIONS[activeDim].detail}`}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="script-eval-report__findings">
|
||||
|
||||
@@ -142,6 +142,8 @@ function TokenUsagePage({
|
||||
onSelectView,
|
||||
}: TokenUsagePageProps) {
|
||||
const [enterpriseUsage, setEnterpriseUsage] = useState<WebEnterpriseUsageSummary | null>(null);
|
||||
const [enterpriseUsageLoading, setEnterpriseUsageLoading] = useState(false);
|
||||
const [enterpriseUsageError, setEnterpriseUsageError] = useState<string | null>(null);
|
||||
const isEnterpriseAdmin = session?.user.enterpriseRole === "admin";
|
||||
const isEnterpriseAccount = Boolean(session?.user.enterpriseId || session?.user.accountType === "enterprise");
|
||||
|
||||
@@ -152,10 +154,15 @@ function TokenUsagePage({
|
||||
setEnterpriseUsage(null);
|
||||
return;
|
||||
}
|
||||
setEnterpriseUsageLoading(true);
|
||||
setEnterpriseUsageError(null);
|
||||
try {
|
||||
setEnterpriseUsage(await loader());
|
||||
} catch (error) {
|
||||
setEnterpriseUsage(null);
|
||||
setEnterpriseUsageError(error instanceof Error ? error.message : "加载失败");
|
||||
} finally {
|
||||
setEnterpriseUsageLoading(false);
|
||||
}
|
||||
}, [session, isEnterpriseAdmin, loadEnterpriseUsage, loadPersonalUsage]);
|
||||
|
||||
@@ -222,22 +229,35 @@ function TokenUsagePage({
|
||||
{ label: "账户类型", value: isEnterpriseAccount ? "企业账户" : "个人账户", tone: "good" },
|
||||
{ label: "企业空间", value: enterpriseUsage?.enterpriseName || session?.user.enterpriseName || "-" },
|
||||
];
|
||||
const pageStatusClass = enterpriseUsageLoading
|
||||
? "is-syncing"
|
||||
: enterpriseUsageError
|
||||
? "has-sync-error"
|
||||
: isLowBalance
|
||||
? "has-low-balance"
|
||||
: "is-healthy";
|
||||
|
||||
return (
|
||||
<section className="script-token-page token-usage-page management-center-page" aria-label="管理中心">
|
||||
<section className={`script-token-page token-usage-page management-center-page ${pageStatusClass}`} aria-label="管理中心">
|
||||
<main className="management-center-shell">
|
||||
<header className="management-center-toolbar" aria-label="管理中心操作">
|
||||
<div className="management-center-toolbar__title">
|
||||
<button type="button" className="management-center-toolbar__back" aria-label="返回工具盒" onClick={onOpenMore}>
|
||||
<ArrowLeftOutlined />
|
||||
</button>
|
||||
<strong>管理中心</strong>
|
||||
<span>
|
||||
<strong>管理中心</strong>
|
||||
<small>用量、成员与模型调用监控</small>
|
||||
</span>
|
||||
</div>
|
||||
<button type="button" onClick={refreshEnterpriseUsage}>
|
||||
<span className={`management-center-status-pill ${enterpriseUsageError ? "is-error" : enterpriseUsageLoading ? "is-loading" : "is-online"}`}>
|
||||
{enterpriseUsageLoading ? "正在同步企业用量" : enterpriseUsageError || "服务器已连接"}
|
||||
</span>
|
||||
<button type="button" onClick={refreshEnterpriseUsage} disabled={enterpriseUsageLoading}>
|
||||
<ReloadOutlined />
|
||||
刷新数据
|
||||
</button>
|
||||
<button type="button">
|
||||
<button type="button" className="is-muted-action">
|
||||
<UserOutlined />
|
||||
成员管理
|
||||
</button>
|
||||
@@ -251,8 +271,9 @@ function TokenUsagePage({
|
||||
) : null}
|
||||
|
||||
<section className="management-metric-cards" aria-label="关键指标">
|
||||
{metricCards.map((card) => (
|
||||
{metricCards.map((card, index) => (
|
||||
<article key={card.key} className={`management-metric-card is-${card.tone}`}>
|
||||
<span className="management-metric-card__index">{String(index + 1).padStart(2, "0")}</span>
|
||||
<span className="management-metric-card__label">{card.label}</span>
|
||||
<strong className="management-metric-card__value">{card.value}</strong>
|
||||
<span className="management-metric-card__hint">{card.hint}</span>
|
||||
@@ -267,7 +288,7 @@ function TokenUsagePage({
|
||||
<BarChartOutlined />
|
||||
模型消耗分布
|
||||
</h2>
|
||||
<span>{modelBreakdown.length ? `${modelBreakdown.length} 个模型` : "LIVE"}</span>
|
||||
<span>{enterpriseUsageLoading ? "SYNC" : modelBreakdown.length ? `${modelBreakdown.length} 个模型` : "LIVE"}</span>
|
||||
</div>
|
||||
{modelBreakdown.length ? (
|
||||
<div className="management-model-list">
|
||||
@@ -294,7 +315,10 @@ function TokenUsagePage({
|
||||
|
||||
<article className="management-card management-status-card">
|
||||
<div className="management-card__head">
|
||||
<h2>系统状态</h2>
|
||||
<h2>
|
||||
<LineChartOutlined />
|
||||
系统状态
|
||||
</h2>
|
||||
</div>
|
||||
<dl>
|
||||
{systemStatus.map((item) => (
|
||||
@@ -348,7 +372,10 @@ function TokenUsagePage({
|
||||
|
||||
<section className="management-card management-records">
|
||||
<div className="management-card__head">
|
||||
<h2>调用记录</h2>
|
||||
<h2>
|
||||
<BarChartOutlined />
|
||||
调用记录
|
||||
</h2>
|
||||
<span>{records.length} 条记录</span>
|
||||
</div>
|
||||
<div className="management-record-table" role="table" aria-label="调用记录">
|
||||
|
||||
@@ -356,13 +356,13 @@ function WatermarkRemovalPage({
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div className="image-workbench-actions">
|
||||
<div className="image-workbench-actions watermark-removal-actions">
|
||||
<button type="button" className="image-workbench-primary" onClick={() => void handleStart()} disabled={isProcessing}>
|
||||
<DeleteOutlined />
|
||||
{isProcessing ? "处理中" : "开始去水印"}
|
||||
{isProcessing ? "处理中..." : "开始去水印"}
|
||||
</button>
|
||||
{isProcessing && (
|
||||
<button type="button" className="image-workbench-cancel" onClick={handleCancel} style={{ marginTop: 6 }}>
|
||||
<button type="button" className="image-workbench-cancel" onClick={handleCancel}>
|
||||
取消
|
||||
</button>
|
||||
)}
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
import { useCallback, useRef, useState } from "react";
|
||||
|
||||
export type GenStatus = "idle" | "ready" | "generating" | "done" | "failed";
|
||||
|
||||
export interface UseGenerationStatusReturn {
|
||||
status: GenStatus;
|
||||
error: string | null;
|
||||
abortRef: { current: boolean };
|
||||
start: () => void;
|
||||
succeed: () => void;
|
||||
fail: (msg: string) => void;
|
||||
reset: () => void;
|
||||
cancel: () => void;
|
||||
isGenerating: boolean;
|
||||
isFailed: boolean;
|
||||
isIdle: boolean;
|
||||
}
|
||||
|
||||
export function useGenerationStatus(): UseGenerationStatusReturn {
|
||||
const [status, setStatus] = useState<GenStatus>("idle");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const abortRef = useRef({ current: false });
|
||||
|
||||
const start = useCallback(() => {
|
||||
setStatus("generating");
|
||||
setError(null);
|
||||
abortRef.current = { current: false };
|
||||
}, []);
|
||||
|
||||
const succeed = useCallback(() => setStatus("done"), []);
|
||||
const fail = useCallback((msg: string) => { setStatus("failed"); setError(msg); }, []);
|
||||
const reset = useCallback(() => { setStatus("idle"); setError(null); }, []);
|
||||
const cancel = useCallback(() => { abortRef.current.current = true; }, []);
|
||||
|
||||
return {
|
||||
status, error, abortRef, start, succeed, fail, reset, cancel,
|
||||
isGenerating: status === "generating",
|
||||
isFailed: status === "failed",
|
||||
isIdle: status === "idle",
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
import { useEffect, useMemo, useRef, useCallback } from "react";
|
||||
import type { GenerationQueueItem } from "../stores/useGenerationStore";
|
||||
import { useGenerationStore } from "../stores/useGenerationStore";
|
||||
import {
|
||||
startBackgroundPolling,
|
||||
subscribeToTaskUpdates,
|
||||
} from "../services/backgroundTaskRunner";
|
||||
|
||||
interface UseGenerationTasksOptions {
|
||||
sourceView: string;
|
||||
autoResume?: boolean;
|
||||
}
|
||||
|
||||
export function useGenerationTasks(options: UseGenerationTasksOptions) {
|
||||
const { sourceView, autoResume = true } = options;
|
||||
const store = useGenerationStore();
|
||||
const pollingStartedRef = useRef(false);
|
||||
|
||||
// ── Auto-resume: re-subscribe to running tasks on mount ────
|
||||
useEffect(() => {
|
||||
if (!autoResume || pollingStartedRef.current) return;
|
||||
pollingStartedRef.current = true;
|
||||
|
||||
const active = store.getRunningTasks().filter((t) => t.sourceView === sourceView);
|
||||
if (active.length > 0) {
|
||||
startBackgroundPolling();
|
||||
}
|
||||
|
||||
return () => {
|
||||
pollingStartedRef.current = false;
|
||||
};
|
||||
}, [autoResume, sourceView, store]);
|
||||
|
||||
// ── Subscribe to live updates ───────────────────────────
|
||||
useEffect(() => {
|
||||
return subscribeToTaskUpdates((updated) => {
|
||||
store.updateTask(updated.id, updated);
|
||||
});
|
||||
}, [store]);
|
||||
|
||||
// ── View-scoped computed lists ──────────────────────────
|
||||
const myTasks = useMemo(
|
||||
() => store.queue.filter((t) => t.sourceView === sourceView),
|
||||
[store.queue, sourceView],
|
||||
);
|
||||
|
||||
const activeTasks = useMemo(
|
||||
() => myTasks.filter((t) => t.status === "running" || t.status === "pending"),
|
||||
[myTasks],
|
||||
);
|
||||
|
||||
const completedTasks = useMemo(
|
||||
() => myTasks.filter((t) => t.status === "completed"),
|
||||
[myTasks],
|
||||
);
|
||||
|
||||
const failedTasks = useMemo(
|
||||
() => myTasks.filter((t) => t.status === "failed"),
|
||||
[myTasks],
|
||||
);
|
||||
|
||||
// ── Actions ─────────────────────────────────────────────
|
||||
const submitTask = useCallback(
|
||||
(task: Omit<GenerationQueueItem, "id" | "createdAt">) => {
|
||||
const id = `gen-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
|
||||
store.addTask({ ...task, id, createdAt: Date.now() });
|
||||
return id;
|
||||
},
|
||||
[store],
|
||||
);
|
||||
|
||||
const updateTask = useCallback(
|
||||
(id: string, patch: Partial<GenerationQueueItem>) => {
|
||||
store.updateTask(id, patch);
|
||||
},
|
||||
[store],
|
||||
);
|
||||
|
||||
const markCompleted = useCallback(
|
||||
(id: string, resultUrl: string) => {
|
||||
store.updateTask(id, { status: "completed", progress: 100, resultUrl });
|
||||
},
|
||||
[store],
|
||||
);
|
||||
|
||||
const markFailed = useCallback(
|
||||
(id: string, error: string) => {
|
||||
store.updateTask(id, { status: "failed", error });
|
||||
},
|
||||
[store],
|
||||
);
|
||||
|
||||
const retryTask = useCallback(
|
||||
(id: string) => {
|
||||
const task = store.queue.find((t) => t.id === id);
|
||||
if (task) {
|
||||
store.updateTask(id, { status: "pending", progress: 0, error: null });
|
||||
}
|
||||
},
|
||||
[store],
|
||||
);
|
||||
|
||||
return {
|
||||
tasks: myTasks,
|
||||
activeTasks,
|
||||
completedTasks,
|
||||
failedTasks,
|
||||
submitTask,
|
||||
updateTask,
|
||||
markCompleted,
|
||||
markFailed,
|
||||
retryTask,
|
||||
hasActiveTasks: activeTasks.length > 0,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
import { useGenerationStore, type GenerationQueueItem } from "../stores/useGenerationStore";
|
||||
import { aiGenerationClient } from "../api/aiGenerationClient";
|
||||
|
||||
type PollCallback = (item: GenerationQueueItem) => void;
|
||||
|
||||
const activePollers = new Map<string, ReturnType<typeof setInterval>>();
|
||||
const pollCallbacks = new Set<PollCallback>();
|
||||
|
||||
const POLL_INTERVAL = 3000;
|
||||
const MAX_POLL_ATTEMPTS = 200; // 10 minutes max per task
|
||||
|
||||
export function subscribeToTaskUpdates(callback: PollCallback): () => void {
|
||||
pollCallbacks.add(callback);
|
||||
return () => { pollCallbacks.delete(callback); };
|
||||
}
|
||||
|
||||
function notifyCallbacks(item: GenerationQueueItem): void {
|
||||
pollCallbacks.forEach((cb) => cb(item));
|
||||
}
|
||||
|
||||
function pollTask(item: GenerationQueueItem, attemptsRef: { current: number }): void {
|
||||
const key = `poll-${item.id}`;
|
||||
if (activePollers.has(key)) return;
|
||||
|
||||
const interval = setInterval(async () => {
|
||||
const current = useGenerationStore.getState().queue.find((i) => i.id === item.id);
|
||||
if (!current || current.status === "completed" || current.status === "failed" || current.status === "cancelled") {
|
||||
cleanupPoll(key);
|
||||
return;
|
||||
}
|
||||
|
||||
attemptsRef.current++;
|
||||
if (attemptsRef.current > MAX_POLL_ATTEMPTS) {
|
||||
useGenerationStore.getState().updateTask(item.id, {
|
||||
status: "failed",
|
||||
error: "任务超时，请重新提交",
|
||||
});
|
||||
notifyCallbacks({ ...item, status: "failed", error: "任务超时，请重新提交" });
|
||||
cleanupPoll(key);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const status = await aiGenerationClient.getTaskStatus(current.taskId || item.taskId || "");
|
||||
const patch: Partial<GenerationQueueItem> = {
|
||||
progress: status.progress,
|
||||
resultUrl: status.resultUrl || current.resultUrl,
|
||||
error: status.error || current.error,
|
||||
};
|
||||
|
||||
if (status.status === "completed") {
|
||||
patch.status = "completed";
|
||||
useGenerationStore.getState().updateTask(item.id, patch);
|
||||
notifyCallbacks({ ...item, ...patch, status: "completed" });
|
||||
cleanupPoll(key);
|
||||
} else if (status.status === "failed" || status.status === "cancelled") {
|
||||
patch.status = "failed";
|
||||
useGenerationStore.getState().updateTask(item.id, patch);
|
||||
notifyCallbacks({ ...item, ...patch, status: "failed" });
|
||||
cleanupPoll(key);
|
||||
} else {
|
||||
patch.status = "running";
|
||||
useGenerationStore.getState().updateTask(item.id, patch);
|
||||
notifyCallbacks({ ...item, ...patch, status: "running" });
|
||||
}
|
||||
} catch {
|
||||
// Network error during poll — keep trying
|
||||
}
|
||||
}, POLL_INTERVAL);
|
||||
|
||||
activePollers.set(key, interval);
|
||||
}
|
||||
|
||||
function cleanupPoll(key: string): void {
|
||||
const interval = activePollers.get(key);
|
||||
if (interval) {
|
||||
clearInterval(interval);
|
||||
activePollers.delete(key);
|
||||
}
|
||||
}
|
||||
|
||||
export function startBackgroundPolling(): void {
|
||||
const tasks = useGenerationStore.getState().getRunningTasks();
|
||||
const attemptsMap = new Map<string, { current: number }>();
|
||||
|
||||
tasks.forEach((task) => {
|
||||
if (task.taskId) {
|
||||
if (!attemptsMap.has(task.id)) {
|
||||
attemptsMap.set(task.id, { current: 0 });
|
||||
}
|
||||
pollTask(task, attemptsMap.get(task.id)!);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function resumeTaskPolling(taskId: string, storeId: string): void {
|
||||
const task = useGenerationStore.getState().queue.find((i) => i.id === storeId);
|
||||
if (task && task.status !== "completed" && task.status !== "failed") {
|
||||
pollTask(task, { current: 0 });
|
||||
}
|
||||
}
|
||||
|
||||
export function stopAllPolling(): void {
|
||||
activePollers.forEach((interval) => clearInterval(interval));
|
||||
activePollers.clear();
|
||||
}
|
||||
|
||||
// ── Recovery on page load ──────────────────────────
|
||||
export function recoverAndResumeTasks(): void {
|
||||
const pendingTasks = useGenerationStore.getState().getRunningTasks();
|
||||
if (!pendingTasks.length) return;
|
||||
|
||||
pendingTasks.forEach((task) => {
|
||||
if (task.taskId) {
|
||||
// Mark as pending so the workbench/ecommerce can re-submit to polling
|
||||
useGenerationStore.getState().updateTask(task.id, { status: "pending" });
|
||||
} else {
|
||||
// No taskId means it was queued but never submitted — mark failed
|
||||
useGenerationStore.getState().updateTask(task.id, {
|
||||
status: "failed",
|
||||
error: "页面刷新后任务丢失，请重新提交",
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Start polling recovered tasks
|
||||
setTimeout(() => startBackgroundPolling(), 500);
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
import { create } from "zustand";
|
||||
import type { WebGenerationPreviewTask } from "../types";
|
||||
|
||||
export type QueueItemStatus = "pending" | "running" | "completed" | "failed" | "cancelled";
|
||||
|
||||
export interface GenerationQueueItem {
|
||||
id: string;
|
||||
taskId?: string;
|
||||
title: string;
|
||||
type: "image" | "video" | "agent" | "digital-human" | "character-mix" | "ecommerce-video";
|
||||
status: QueueItemStatus;
|
||||
progress: number;
|
||||
prompt: string;
|
||||
createdAt: number;
|
||||
sourceView: string; // which page created this: "ecommerce", "workbench", "canvas", "agent"
|
||||
resultUrl?: string | null;
|
||||
error?: string | null;
|
||||
params?: Record<string, unknown>;
|
||||
}
|
||||
|
||||
interface PersistedQueueSnapshot {
|
||||
version: 1;
|
||||
items: GenerationQueueItem[];
|
||||
savedAt: number;
|
||||
}
|
||||
|
||||
const STORAGE_KEY = "omniai:generation-queue";
|
||||
const MAX_ITEMS = 80;
|
||||
const STALE_MS = 2 * 60 * 60 * 1000; // 2 hours
|
||||
|
||||
function loadPersistedQueue(): GenerationQueueItem[] {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
if (!raw) return [];
|
||||
const snapshot = JSON.parse(raw) as PersistedQueueSnapshot;
|
||||
if (Date.now() - (snapshot.savedAt || 0) > STALE_MS) {
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
return [];
|
||||
}
|
||||
return snapshot.items.filter(
|
||||
(item) => item.status === "pending" || item.status === "running",
|
||||
);
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function persistQueue(items: GenerationQueueItem[]): void {
|
||||
try {
|
||||
const snapshot: PersistedQueueSnapshot = { version: 1, items, savedAt: Date.now() };
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(snapshot));
|
||||
} catch { /* quota exceeded */ }
|
||||
}
|
||||
|
||||
interface GenerationStoreState {
|
||||
queue: GenerationQueueItem[];
|
||||
addTask: (item: GenerationQueueItem) => void;
|
||||
updateTask: (id: string, patch: Partial<GenerationQueueItem>) => void;
|
||||
removeTask: (id: string) => void;
|
||||
getRunningTasks: () => GenerationQueueItem[];
|
||||
getPendingTasks: () => GenerationQueueItem[];
|
||||
getTasksByView: (sourceView: string) => GenerationQueueItem[];
|
||||
clearTerminal: () => void;
|
||||
}
|
||||
|
||||
function hashUserId(): string {
|
||||
try {
|
||||
const raw = localStorage.getItem("omniai-web-session");
|
||||
if (!raw) return "anon";
|
||||
const parsed = JSON.parse(raw) as { user?: { id?: number | string } };
|
||||
return String(parsed?.user?.id || "anon");
|
||||
} catch {
|
||||
return "anon";
|
||||
}
|
||||
}
|
||||
|
||||
const initialQueue = loadPersistedQueue();
|
||||
|
||||
export const useGenerationStore = create<GenerationStoreState>((set, get) => ({
|
||||
queue: initialQueue,
|
||||
|
||||
addTask: (item) => {
|
||||
set((state) => {
|
||||
const next = [item, ...state.queue].slice(0, MAX_ITEMS);
|
||||
persistQueue(next.filter((i) => i.status === "pending" || i.status === "running"));
|
||||
return { queue: next };
|
||||
});
|
||||
},
|
||||
|
||||
updateTask: (id, patch) => {
|
||||
set((state) => {
|
||||
const next = state.queue.map((item) =>
|
||||
item.id === id ? { ...item, ...patch } : item,
|
||||
);
|
||||
persistQueue(next.filter((i) => i.status === "pending" || i.status === "running"));
|
||||
return { queue: next };
|
||||
});
|
||||
},
|
||||
|
||||
removeTask: (id) => {
|
||||
set((state) => {
|
||||
const next = state.queue.filter((item) => item.id !== id);
|
||||
persistQueue(next.filter((i) => i.status === "pending" || i.status === "running"));
|
||||
return { queue: next };
|
||||
});
|
||||
},
|
||||
|
||||
getRunningTasks: () => get().queue.filter((i) => i.status === "running" || i.status === "pending"),
|
||||
getPendingTasks: () => get().queue.filter((i) => i.status === "pending"),
|
||||
getTasksByView: (sourceView) => get().queue.filter((i) => i.sourceView === sourceView),
|
||||
|
||||
clearTerminal: () => {
|
||||
set((state) => {
|
||||
const next = state.queue.filter(
|
||||
(i) => i.status === "pending" || i.status === "running",
|
||||
);
|
||||
persistQueue(next);
|
||||
return { queue: next };
|
||||
});
|
||||
},
|
||||
}));
|
||||
@@ -65,6 +65,13 @@
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Collapse when empty (e.g. KeepAlive pages rendered outside PageTransition) */
|
||||
.page-transition-wrap:empty {
|
||||
height: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* page-motion--exit moved to page-transition.css */
|
||||
|
||||
.page-loading-center {
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
}
|
||||
|
||||
.ecom-video-flowbar__pulse.is-active {
|
||||
background: #34d399;
|
||||
background: #00ff88;
|
||||
}
|
||||
|
||||
.ecom-video-flowbar__wave {
|
||||
@@ -97,7 +97,7 @@
|
||||
}
|
||||
|
||||
.ecom-video-step-dot.is-done {
|
||||
background: #34d399;
|
||||
background: #00ff88;
|
||||
}
|
||||
|
||||
.ecom-video-step-dot.is-active {
|
||||
@@ -139,7 +139,7 @@
|
||||
place-items: center;
|
||||
border: 1px solid #1c4d3a;
|
||||
border-radius: 8px;
|
||||
background: #34d399;
|
||||
background: #00ff88;
|
||||
color: #06110e;
|
||||
padding: 0;
|
||||
font-size: 17px;
|
||||
@@ -180,6 +180,9 @@
|
||||
overflow: auto;
|
||||
background: #101318;
|
||||
padding: 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ecom-video-flow-map {
|
||||
@@ -213,7 +216,7 @@
|
||||
}
|
||||
|
||||
.ecom-video-flow-lines path.is-active {
|
||||
stroke: #34d399;
|
||||
stroke: #00ff88;
|
||||
animation: ecom-video-path-dash 1.8s linear infinite;
|
||||
}
|
||||
|
||||
@@ -319,7 +322,7 @@
|
||||
|
||||
.ecom-video-flow-node.is-ready .ecom-video-flow-node__status-orb,
|
||||
.ecom-video-flow-node.is-completed .ecom-video-flow-node__status-orb {
|
||||
background: #34d399;
|
||||
background: #00ff88;
|
||||
}
|
||||
|
||||
.ecom-video-flow-node.is-running .ecom-video-flow-node__status-orb,
|
||||
@@ -390,7 +393,7 @@
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform: translateX(-100%);
|
||||
background: #34d399;
|
||||
background: #00ff88;
|
||||
}
|
||||
|
||||
.ecom-video-flow-connector.is-active i,
|
||||
@@ -499,6 +502,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #697486;
|
||||
font-size: 13px;
|
||||
@@ -541,7 +545,7 @@
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: #1c4d3a;
|
||||
color: #34d399;
|
||||
color: #00ff88;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
@@ -708,4 +712,382 @@
|
||||
.ecom-video-flow-node--scene {
|
||||
width: 118px;
|
||||
}
|
||||
|
||||
.ecom-video-tree {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ecom-video-tree__trunk {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ecom-video-tree__row {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════
|
||||
Tree Layout — 分支树状流程图 (参考图风格)
|
||||
原图 → 分支连接线 → [分镜文本 → 分镜图 → 分镜视频] × N
|
||||
═══════════════════════════════════════════════════ */
|
||||
|
||||
.ecom-video-tree {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* ── Source node ── */
|
||||
.ecom-video-tree__source {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.ecom-video-tree-node {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1.5px solid #2c3038;
|
||||
border-radius: 10px;
|
||||
background: #171c22;
|
||||
transition: border-color 280ms ease, box-shadow 280ms ease, transform 280ms ease;
|
||||
animation: ecom-tree-node-in 420ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
|
||||
}
|
||||
|
||||
.ecom-video-tree-node--source {
|
||||
width: 150px;
|
||||
height: 190px;
|
||||
flex-shrink: 0;
|
||||
border-color: #1c4d3a;
|
||||
background: #162820;
|
||||
}
|
||||
|
||||
.ecom-video-tree-node--source img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.ecom-video-tree-node__label {
|
||||
color: #a0b0aa;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ── Text node (分镜文本) ── */
|
||||
.ecom-video-tree-node--text {
|
||||
min-width: 120px;
|
||||
max-width: 150px;
|
||||
padding: 14px 12px;
|
||||
cursor: default;
|
||||
border-color: #2a3d30;
|
||||
background: #131d1a;
|
||||
}
|
||||
|
||||
.ecom-video-tree-node--text.is-completed {
|
||||
border-color: #1c4d3a;
|
||||
background: #162820;
|
||||
}
|
||||
|
||||
.ecom-video-tree-node--text.is-active {
|
||||
border-color: #1a4d4d;
|
||||
animation: ecom-tree-breathe 1.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.ecom-video-tree-node__inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.ecom-video-tree-node__title {
|
||||
color: #e2eaf4;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.ecom-video-tree-node__desc {
|
||||
color: #6b7a8a;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* ── Image node (分镜图) ── */
|
||||
.ecom-video-tree-node--image,
|
||||
.ecom-video-tree-node--video {
|
||||
width: 150px;
|
||||
height: 120px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ecom-video-tree-node--image img,
|
||||
.ecom-video-tree-node--image video,
|
||||
.ecom-video-tree-node--video img,
|
||||
.ecom-video-tree-node--video video {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.ecom-video-tree-node--image.is-completed,
|
||||
.ecom-video-tree-node--video.is-completed {
|
||||
border-color: #1c4d3a;
|
||||
background: #162820;
|
||||
}
|
||||
|
||||
.ecom-video-tree-node--image.is-active,
|
||||
.ecom-video-tree-node--video.is-active {
|
||||
border-color: #1a4d4d;
|
||||
animation: ecom-tree-breathe 1.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.ecom-video-tree-node--video.is-failed {
|
||||
border-color: #4d1a1a;
|
||||
background: #2a1b1d;
|
||||
}
|
||||
|
||||
.ecom-video-tree-node__placeholder {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
place-items: center;
|
||||
background: linear-gradient(135deg, #171c22 0%, #12161b 100%);
|
||||
color: #5a6a78;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.ecom-video-tree-node__placeholder span {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ecom-video-tree-node__tag {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
max-width: calc(100% - 16px);
|
||||
overflow: hidden;
|
||||
border: 1px solid #303540;
|
||||
border-radius: 999px;
|
||||
background: rgba(18, 20, 26, 0.9);
|
||||
backdrop-filter: blur(6px);
|
||||
color: #c8d4e0;
|
||||
padding: 3px 9px;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ecom-video-tree-node__progress {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #53e5ff;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.ecom-video-tree-node__retry {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 8px;
|
||||
z-index: 5;
|
||||
display: grid;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
place-items: center;
|
||||
border: 1px solid #4d1a1a;
|
||||
border-radius: 999px;
|
||||
background: #241417;
|
||||
color: #ffb1b1;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ── Trunk connector (分支连接线) ── */
|
||||
.ecom-video-tree__trunk {
|
||||
position: relative;
|
||||
width: 48px;
|
||||
flex-shrink: 0;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.ecom-video-tree__trunk-line {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background: #3a4550;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.ecom-video-tree__trunk-line::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, #00ff88, transparent);
|
||||
animation: ecom-tree-trunk-flow 2.4s ease-in-out infinite;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.ecom-video-tree__branches-line {
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.ecom-video-tree__branches-line::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: #3a4550;
|
||||
}
|
||||
|
||||
.ecom-video-tree__branch-tap {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #3a4550;
|
||||
}
|
||||
|
||||
.ecom-video-tree__branch-tap:nth-child(1) { top: 0; }
|
||||
.ecom-video-tree__branch-tap:nth-child(2) { top: 50%; transform: translateY(-50%); }
|
||||
.ecom-video-tree__branch-tap:nth-child(3) { bottom: 0; }
|
||||
|
||||
.ecom-video-tree__branch-tap::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, #00ff88, transparent);
|
||||
animation: ecom-tree-branch-flow 2.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.ecom-video-tree__branch-tap:nth-child(2)::after { animation-delay: 0.3s; }
|
||||
.ecom-video-tree__branch-tap:nth-child(3)::after { animation-delay: 0.6s; }
|
||||
|
||||
/* ── Arrow between nodes ── */
|
||||
.ecom-video-tree__arrow {
|
||||
flex-shrink: 0;
|
||||
width: 36px;
|
||||
height: 20px;
|
||||
color: #4a5565;
|
||||
transition: color 280ms ease;
|
||||
}
|
||||
|
||||
.ecom-video-tree__arrow svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ecom-video-tree__arrow svg path {
|
||||
transition: stroke 280ms ease;
|
||||
}
|
||||
|
||||
.ecom-video-tree__row:hover .ecom-video-tree__arrow {
|
||||
color: #00ff88;
|
||||
}
|
||||
|
||||
/* ── Rows container ── */
|
||||
.ecom-video-tree__rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-self: center;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.ecom-video-tree__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
animation: ecom-tree-row-in 480ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
|
||||
}
|
||||
|
||||
.ecom-video-tree__row--empty {
|
||||
opacity: 0.5;
|
||||
transition: opacity 320ms ease;
|
||||
}
|
||||
|
||||
.ecom-video-tree__row--empty.is-planning {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.ecom-video-tree__row--empty.is-planning .ecom-video-tree-node {
|
||||
border-color: rgba(var(--accent-rgb, 0, 255, 136), 0.15);
|
||||
}
|
||||
|
||||
/* ── Animations ── */
|
||||
@keyframes ecom-tree-node-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px) scale(0.96);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ecom-tree-row-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-16px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ecom-tree-breathe {
|
||||
0%, 100% {
|
||||
border-color: #1a4d4d;
|
||||
box-shadow: 0 0 0 0 rgba(83, 229, 255, 0);
|
||||
}
|
||||
50% {
|
||||
border-color: #53e5ff;
|
||||
box-shadow: 0 0 16px 2px rgba(83, 229, 255, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ecom-tree-trunk-flow {
|
||||
0% { opacity: 0; transform: translateX(-100%); }
|
||||
30% { opacity: 0.6; }
|
||||
70% { opacity: 0.6; }
|
||||
100% { opacity: 0; transform: translateX(100%); }
|
||||
}
|
||||
|
||||
@keyframes ecom-tree-branch-flow {
|
||||
0% { opacity: 0; transform: translateX(-100%); }
|
||||
30% { opacity: 0.5; }
|
||||
70% { opacity: 0.5; }
|
||||
100% { opacity: 0; transform: translateX(100%); }
|
||||
}
|
||||
|
||||
+1394
-67
File diff suppressed because it is too large
Load Diff
+1285
-32
File diff suppressed because it is too large
Load Diff
@@ -563,7 +563,10 @@ textarea.image-workbench-prompt {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background: var(--bg-inset);
|
||||
background:
|
||||
radial-gradient(circle, rgba(var(--accent-rgb), 0.12) 1px, transparent 1.4px),
|
||||
var(--bg-inset);
|
||||
background-size: 22px 22px;
|
||||
}
|
||||
|
||||
.image-workbench-canvas img {
|
||||
@@ -592,6 +595,7 @@ textarea.image-workbench-prompt {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
color: var(--fg-dim);
|
||||
font-size: 14px;
|
||||
@@ -625,16 +629,24 @@ textarea.image-workbench-prompt {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.image-workbench-camera-stage {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.image-workbench-inpaint-stage img,
|
||||
.image-workbench-camera-stage img {
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
max-width: 95%;
|
||||
max-height: 95%;
|
||||
border-radius: 8px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.image-workbench-inpaint-stage > span,
|
||||
.image-workbench-camera-stage > span {
|
||||
.image-workbench-camera-stage img {
|
||||
max-height: 68%;
|
||||
}
|
||||
|
||||
.image-workbench-inpaint-stage > span {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
left: 50%;
|
||||
@@ -647,6 +659,15 @@ textarea.image-workbench-prompt {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.image-workbench-camera-stage > span {
|
||||
padding: 4px 12px;
|
||||
border-radius: var(--radius-xs);
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Inpaint mask canvas */
|
||||
.image-workbench-inpaint-canvas {
|
||||
display: block;
|
||||
@@ -689,16 +710,8 @@ textarea.image-workbench-prompt {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.image-workbench-camera-stage > span {
|
||||
bottom: 64px;
|
||||
}
|
||||
|
||||
.image-workbench-camera-stage > .image-workbench-result-actions {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 50%;
|
||||
width: min(360px, calc(100% - 32px));
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.image-workbench-inpaint-tool.is-active {
|
||||
@@ -809,7 +822,7 @@ textarea.image-workbench-prompt {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image-workbench-result-grid {
|
||||
.image-workbench-panel--right .image-workbench-result-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
|
||||
gap: 8px;
|
||||
@@ -1467,6 +1480,27 @@ textarea.image-workbench-prompt {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.watermark-removal-actions {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 12px 0 0;
|
||||
}
|
||||
|
||||
.watermark-removal-actions .image-workbench-primary {
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.watermark-removal-actions .image-workbench-cancel {
|
||||
width: 100%;
|
||||
min-height: 42px;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.watermark-removal-compare {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@@ -1519,34 +1553,42 @@ textarea.image-workbench-prompt {
|
||||
|
||||
.watermark-removal-compare__actions {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
bottom: 16px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
width: min(480px, calc(100% - 32px));
|
||||
}
|
||||
|
||||
.watermark-removal-compare__actions button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 5px 12px;
|
||||
border: none;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
min-height: 64px;
|
||||
padding: 0 24px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-xs);
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
background: var(--bg-inset);
|
||||
color: var(--fg-body);
|
||||
font: inherit;
|
||||
font-size: 18px;
|
||||
font-weight: 750;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(4px);
|
||||
transition: background 0.15s;
|
||||
backdrop-filter: none;
|
||||
transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
|
||||
}
|
||||
|
||||
.watermark-removal-compare__actions button:hover:not(:disabled) {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-color: rgba(var(--accent-rgb), 0.42);
|
||||
background: rgba(var(--accent-rgb), 0.11);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.watermark-removal-compare__actions button:disabled {
|
||||
opacity: 0.5;
|
||||
opacity: 0.56;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -1563,33 +1605,33 @@ textarea.image-workbench-prompt {
|
||||
}
|
||||
|
||||
.image-workbench-generating strong {
|
||||
font-size: 15px;
|
||||
font-size: 20px;
|
||||
color: var(--fg-default);
|
||||
}
|
||||
|
||||
.image-workbench-progress-bar {
|
||||
width: 200px;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
width: 320px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--bg-inset);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-workbench-progress-fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
border-radius: 4px;
|
||||
background: var(--accent);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.image-workbench-cancel {
|
||||
margin-top: 8px;
|
||||
padding: 6px 16px;
|
||||
margin-top: 12px;
|
||||
padding: 8px 24px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-xs);
|
||||
background: transparent;
|
||||
color: var(--fg-muted);
|
||||
font-size: 13px;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
@@ -1600,14 +1642,17 @@ textarea.image-workbench-prompt {
|
||||
}
|
||||
|
||||
.image-workbench-result-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
margin: 0;
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
align-content: start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.image-workbench-result-item {
|
||||
@@ -1634,8 +1679,9 @@ textarea.image-workbench-prompt {
|
||||
.image-workbench-result-card {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
width: min(100%, 500px);
|
||||
align-content: start;
|
||||
gap: 8px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.image-workbench-result-actions {
|
||||
@@ -1647,16 +1693,16 @@ textarea.image-workbench-prompt {
|
||||
.image-workbench-result-actions button {
|
||||
display: inline-flex;
|
||||
min-width: 0;
|
||||
min-height: 34px;
|
||||
min-height: 48px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
gap: 8px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-xs);
|
||||
background: var(--bg-inset);
|
||||
color: var(--fg-body);
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
cursor: pointer;
|
||||
transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1 +1,17 @@
|
||||
/* Profile page rules move here as they are retired from legacy-pages.css. */
|
||||
|
||||
/* ── 代表作滚动容器：固定3列，刚好显示9个（3行），超出可滚动，隐藏滚动条 ── */
|
||||
.profile-page__works-scroll {
|
||||
max-height: 390px; /* 3行卡片：3 × 120(min-height) + 2 × 10(gap) = 380px，留10px余量 */
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE/Edge */
|
||||
}
|
||||
|
||||
.profile-page__works-scroll::-webkit-scrollbar {
|
||||
display: none; /* Chrome/Safari/Edge */
|
||||
}
|
||||
|
||||
.profile-page__works-scroll .profile-page__list-grid {
|
||||
grid-template-columns: repeat(3, 1fr); /* 固定3列，刚好3×3=9个可见 */
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1489,7 +1489,7 @@
|
||||
--eval-text-secondary: #94a3b8;
|
||||
--eval-text-tertiary: #64748b;
|
||||
--eval-text-placeholder: #475569;
|
||||
--eval-accent-start: #34d399;
|
||||
--eval-accent-start: #00ff88;
|
||||
--eval-accent-mid: #10b981;
|
||||
--eval-accent-end: #059669;
|
||||
--eval-accent-glow: rgba(16, 185, 129, 0.3);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.product-clone-page[data-tool="clone"].size-template-workbench {
|
||||
--clone-settings-panel-width: 640px;
|
||||
--size-green: #34d399;
|
||||
--size-green: #00ff88;
|
||||
--size-cyan: #38bdf8;
|
||||
--size-violet: #a78bfa;
|
||||
--size-amber: #fbbf24;
|
||||
@@ -106,7 +106,7 @@
|
||||
|
||||
.size-template-workbench .size-template-static-field.is-clickable > button:hover,
|
||||
.size-template-workbench .size-template-static-field.is-clickable > button[aria-expanded="true"] {
|
||||
border-color: #34d399;
|
||||
border-color: #00ff88;
|
||||
background: #202c28;
|
||||
}
|
||||
|
||||
@@ -155,7 +155,7 @@
|
||||
.size-template-platform-dialog button:hover,
|
||||
.size-template-platform-dialog button.is-active {
|
||||
background: #17352a;
|
||||
color: #34d399;
|
||||
color: #00ff88;
|
||||
}
|
||||
|
||||
@keyframes size-template-dialog-rise {
|
||||
@@ -241,7 +241,7 @@
|
||||
width: 54px;
|
||||
height: 2px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, #34d399, rgb(52 211 153 / 0%));
|
||||
background: linear-gradient(90deg, #00ff88, rgb(52 211 153 / 0%));
|
||||
box-shadow: 0 0 18px rgb(52 211 153 / 35%);
|
||||
}
|
||||
|
||||
@@ -355,7 +355,7 @@
|
||||
}
|
||||
|
||||
.size-template-preview-note > div:first-child .anticon {
|
||||
color: #34d399;
|
||||
color: #00ff88;
|
||||
}
|
||||
|
||||
.size-template-preview-note p {
|
||||
@@ -414,7 +414,7 @@
|
||||
}
|
||||
|
||||
.size-template-check-list .anticon {
|
||||
color: #34d399;
|
||||
color: #00ff88;
|
||||
}
|
||||
|
||||
@media (max-width: 1320px) {
|
||||
|
||||
@@ -376,23 +376,19 @@
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.studio-result-actions--with-clear {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.studio-result-actions button {
|
||||
display: inline-flex;
|
||||
min-width: 0;
|
||||
min-height: 36px;
|
||||
min-height: 48px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
gap: 8px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-xs);
|
||||
background: var(--bg-inset);
|
||||
color: var(--fg-body);
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
cursor: pointer;
|
||||
transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
|
||||
|
||||
@@ -3,15 +3,15 @@
|
||||
--toolbox-green: #00ff88;
|
||||
--toolbox-blue: #4fc3f7;
|
||||
--toolbox-purple: #a855f7;
|
||||
--toolbox-surface: rgba(14, 16, 38, 0.75);
|
||||
--toolbox-elevated: rgba(20, 22, 52, 0.85);
|
||||
--toolbox-surface: rgba(255, 255, 255, 0.04);
|
||||
--toolbox-elevated: rgba(255, 255, 255, 0.06);
|
||||
--toolbox-highlight: rgba(28, 31, 68, 0.9);
|
||||
--toolbox-border-subtle: rgba(0, 255, 136, 0.08);
|
||||
--toolbox-border-default: rgba(0, 255, 136, 0.14);
|
||||
--toolbox-border-hover: rgba(0, 255, 136, 0.28);
|
||||
--toolbox-text-primary: #f0f0f5;
|
||||
--toolbox-text-secondary: rgba(240, 240, 245, 0.6);
|
||||
--toolbox-text-tertiary: rgba(240, 240, 245, 0.4);
|
||||
--toolbox-text-primary: #e8eaef;
|
||||
--toolbox-text-secondary: #9aa1b8;
|
||||
--toolbox-text-tertiary: #62697f;
|
||||
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
@@ -20,7 +20,7 @@
|
||||
background:
|
||||
linear-gradient(180deg, #070b10 0%, #05080d 100%),
|
||||
radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0, 255, 136, 0.04) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 60% 50% at 80% 70%, rgba(79, 195, 247, 0.03) 0%, transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 80% 70%, rgba(42, 159, 212, 0.03) 0%, transparent 60%),
|
||||
radial-gradient(ellipse 50% 40% at 20% 80%, rgba(168, 85, 247, 0.03) 0%, transparent 60%);
|
||||
scroll-snap-align: start;
|
||||
scroll-snap-stop: normal;
|
||||
@@ -30,21 +30,21 @@
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
gap: clamp(20px, 3vw, 40px);
|
||||
padding: clamp(42px, 6vw, 82px) clamp(22px, 7vw, 92px);
|
||||
gap: clamp(18px, 2.8vw, 36px);
|
||||
padding: clamp(36px, 5.5vw, 68px) clamp(20px, 6vw, 76px);
|
||||
min-height: var(--home-section-min-height);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ===== Left Panel ===== */
|
||||
.omni-home__toolbox-left {
|
||||
width: clamp(340px, 30vw, 440px);
|
||||
width: clamp(320px, 30vw, 450px);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: 17px;
|
||||
justify-content: flex-start;
|
||||
padding-top: clamp(40px, 8vh, 100px);
|
||||
padding-top: clamp(34px, 6vh, 84px);
|
||||
}
|
||||
|
||||
.omni-home__toolbox-brand {
|
||||
@@ -54,31 +54,31 @@
|
||||
}
|
||||
|
||||
.omni-home__toolbox-brand-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: var(--toolbox-green);
|
||||
border-radius: 14px;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #0a0b12;
|
||||
font-size: 26px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-brand-icon .anticon {
|
||||
font-size: 28px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-brand-text {
|
||||
font-weight: 900;
|
||||
font-size: 30px;
|
||||
font-size: 34px;
|
||||
color: #fff;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-title {
|
||||
font-weight: 900;
|
||||
font-size: clamp(34px, 3.6vw, 46px);
|
||||
font-size: clamp(36px, 3.8vw, 50px);
|
||||
line-height: 1.15;
|
||||
background: linear-gradient(135deg, var(--toolbox-green), var(--toolbox-blue));
|
||||
-webkit-background-clip: text;
|
||||
@@ -87,9 +87,10 @@
|
||||
}
|
||||
|
||||
.omni-home__toolbox-subtitle {
|
||||
font-size: 17px;
|
||||
line-height: 1.6;
|
||||
font-size: 18px;
|
||||
line-height: 1.55;
|
||||
color: var(--toolbox-text-secondary);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-list {
|
||||
@@ -102,8 +103,8 @@
|
||||
.omni-home__toolbox-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
padding: 18px 22px;
|
||||
gap: 17px;
|
||||
padding: 17px 22px;
|
||||
border-radius: 16px;
|
||||
background: var(--toolbox-surface);
|
||||
border: 1px solid var(--toolbox-border-subtle);
|
||||
@@ -124,14 +125,14 @@
|
||||
}
|
||||
|
||||
.omni-home__toolbox-item-icon {
|
||||
font-size: 28px;
|
||||
font-size: 29px;
|
||||
flex-shrink: 0;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
border-radius: 13px;
|
||||
background: rgba(0, 255, 136, 0.08);
|
||||
}
|
||||
|
||||
@@ -139,18 +140,19 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-item-name {
|
||||
font-weight: 700;
|
||||
font-size: 17px;
|
||||
font-size: 19px;
|
||||
color: var(--toolbox-text-primary);
|
||||
}
|
||||
|
||||
.omni-home__toolbox-item-desc {
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
color: var(--toolbox-text-tertiary);
|
||||
line-height: 1.5;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@keyframes omni-toolbox-fadeSlideIn {
|
||||
@@ -160,14 +162,14 @@
|
||||
|
||||
.omni-home__toolbox-workflow {
|
||||
margin-top: auto;
|
||||
padding: 20px 24px;
|
||||
padding: 19px 24px;
|
||||
border-radius: 16px;
|
||||
background: var(--toolbox-surface);
|
||||
border: 1px solid var(--toolbox-border-subtle);
|
||||
}
|
||||
|
||||
.omni-home__toolbox-workflow-label {
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--toolbox-green);
|
||||
margin-bottom: 12px;
|
||||
@@ -178,18 +180,21 @@
|
||||
.omni-home__toolbox-workflow-steps {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
color: var(--toolbox-text-tertiary);
|
||||
}
|
||||
|
||||
.omni-home__toolbox-workflow-step {
|
||||
color: var(--toolbox-text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-workflow-arrow {
|
||||
color: var(--toolbox-green);
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ===== Grid Area ===== */
|
||||
@@ -829,17 +834,19 @@
|
||||
@media (max-width: 980px) {
|
||||
.omni-home__toolbox-shell {
|
||||
flex-direction: column;
|
||||
padding: 48px 22px 64px;
|
||||
padding: 36px 20px 48px;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-left {
|
||||
width: 100%;
|
||||
flex-shrink: unset;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-grid {
|
||||
width: 100%;
|
||||
min-height: clamp(480px, 70vw, 700px);
|
||||
min-height: clamp(400px, 60vw, 560px);
|
||||
}
|
||||
|
||||
.omni-home__toolbox-workflow {
|
||||
@@ -849,7 +856,7 @@
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.omni-home__toolbox-shell {
|
||||
padding: 36px 18px 48px;
|
||||
padding: 28px 16px 40px;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-title {
|
||||
|
||||
@@ -237,7 +237,8 @@
|
||||
}
|
||||
|
||||
.member-button {
|
||||
color: var(--cyan-strong);
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.member-button--community {
|
||||
|
||||
Reference in New Issue
Block a user