Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| f0f6f66d60 | |||
| da45196c6e | |||
| da06187a9c | |||
| 87d81d2c86 | |||
| 178c2ec695 | |||
| 324ebf5ce5 | |||
| 9ababfda46 |
@@ -73,7 +73,7 @@ function AppShell({
|
||||
const [navJustActivated, setNavJustActivated] = useState<WebViewKey | null>(null);
|
||||
const isAuthView = activeView === "login";
|
||||
const isImmersiveView = activeView === "agent" || activeView === "avatarConsole";
|
||||
const showFloatingNav = (!isAuthView || !!session) && !isImmersiveView && activeView !== "home";
|
||||
const showFloatingNav = !isAuthView && !isImmersiveView && activeView !== "home";
|
||||
const toolSurfaceViews = [
|
||||
"workbench",
|
||||
"canvas",
|
||||
|
||||
@@ -567,17 +567,7 @@ function DigitalHumanPage({
|
||||
</button>
|
||||
)}
|
||||
{resultVideoUrl && (
|
||||
<button type="button" className="studio-generate-btn" onClick={() => {
|
||||
setResultVideoUrl("");
|
||||
setActiveTaskId("");
|
||||
setTaskProgress(0);
|
||||
setNotice("已清空工作区");
|
||||
}}>
|
||||
清空
|
||||
</button>
|
||||
)}
|
||||
{resultVideoUrl && (
|
||||
<div className="studio-result-actions">
|
||||
<div className="studio-result-actions studio-result-actions--with-clear">
|
||||
<button type="button" onClick={() => void handleDownloadResult()} disabled={isDownloadingResult}>
|
||||
<DownloadOutlined />
|
||||
{isDownloadingResult ? "保存中" : "保存本地"}
|
||||
@@ -586,6 +576,14 @@ function DigitalHumanPage({
|
||||
<InboxOutlined />
|
||||
{isSavingResultAsset ? "加入中" : "加入资产库"}
|
||||
</button>
|
||||
<button type="button" onClick={() => {
|
||||
setResultVideoUrl("");
|
||||
setActiveTaskId("");
|
||||
setTaskProgress(0);
|
||||
setNotice("已清空工作区");
|
||||
}}>
|
||||
清空
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
+65
-340
@@ -7,13 +7,16 @@ import {
|
||||
ShoppingOutlined,
|
||||
ThunderboltOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { Fragment, useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
|
||||
import { 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>();
|
||||
@@ -51,6 +54,16 @@ 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",
|
||||
@@ -71,16 +84,6 @@ const HOME_FEATURES = [
|
||||
icon: <ShoppingOutlined />,
|
||||
stats: ["多场景", "多角度", "批量输出"],
|
||||
},
|
||||
{
|
||||
key: "script",
|
||||
eyebrow: "Script Review",
|
||||
title: "剧本智能测评",
|
||||
description: "用六维雷达评分拆解剧本质量,从结构、节奏、人物到商业潜力给出可执行的优化路径。",
|
||||
imageUrl: featureScriptImage,
|
||||
actionLabel: "开始测评",
|
||||
icon: <FileSearchOutlined />,
|
||||
stats: ["六维评分", "质量量化", "逐项优化"],
|
||||
},
|
||||
];
|
||||
|
||||
const HOME_EXPERIENCE_POINTS = [
|
||||
@@ -90,96 +93,37 @@ const HOME_EXPERIENCE_POINTS = [
|
||||
{ label: "电商", meta: "商品视觉", tone: "amber" },
|
||||
];
|
||||
|
||||
const ECOMMERCE_MATRIX_FEATURES = [
|
||||
{ icon: "⚡", title: "高效工作流", description: "自动化处理,一键触发" },
|
||||
{ icon: "⊞", title: "矩阵式产出", description: "多场景、多尺寸批量生成" },
|
||||
{ icon: "◈", title: "一致性保证", description: "智能保持商品特征与风格统一" },
|
||||
const HOME_ECOMMERCE_TEMPLATES = [
|
||||
{
|
||||
title: "卖点详情图",
|
||||
tag: "详情",
|
||||
meta: "中文卖点标注",
|
||||
imageUrl: ecommerceTemplate1,
|
||||
},
|
||||
{
|
||||
title: "场景主图",
|
||||
tag: "主图",
|
||||
meta: "商品氛围构图",
|
||||
imageUrl: ecommerceTemplate2,
|
||||
},
|
||||
{
|
||||
title: "虚拟模特",
|
||||
tag: "模特",
|
||||
meta: "使用场景延展",
|
||||
imageUrl: ecommerceTemplate3,
|
||||
},
|
||||
];
|
||||
|
||||
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_ECOMMERCE_TOOLS = [
|
||||
{ title: "主图", meta: "平台首图" },
|
||||
{ title: "详情", meta: "卖点拆解" },
|
||||
{ title: "模特", meta: "虚拟模特" },
|
||||
{ title: "短视频", meta: "首帧方案" },
|
||||
];
|
||||
|
||||
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;
|
||||
@@ -193,9 +137,9 @@ function getHomeCarouselCardStyle(offset: number): CSSProperties {
|
||||
const depth = Math.abs(offset);
|
||||
const direction = Math.sign(offset);
|
||||
const isActive = depth === 0;
|
||||
const xByDepth = [0, 190, 320, 430, 520, 590];
|
||||
const xByDepth = [0, 286, 456, 610, 735, 840];
|
||||
const yByDepth = [8, -2, -8, -13, -18, -24];
|
||||
const scaleByDepth = [1, 1, 1, 1, 1, 1];
|
||||
const scaleByDepth = [1, 0.98, 0.94, 0.91, 0.88, 0.84];
|
||||
const x = direction * (xByDepth[depth] ?? xByDepth[xByDepth.length - 1]!);
|
||||
const y = yByDepth[depth] ?? yByDepth[yByDepth.length - 1]!;
|
||||
const z = isActive ? 90 : 28 - depth;
|
||||
@@ -215,255 +159,40 @@ function getHomeCarouselCardStyle(offset: number): CSSProperties {
|
||||
} as CSSProperties;
|
||||
}
|
||||
|
||||
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="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>
|
||||
);
|
||||
}
|
||||
|
||||
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="omni-home-ecommerce-showcase">
|
||||
<div className="omni-home-ecommerce-showcase__depth" />
|
||||
<div className="omni-home-ecommerce-showcase__grain" />
|
||||
|
||||
<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 className="omni-home-ecommerce-showcase__prompt">
|
||||
<span>商品图 + 生成要求</span>
|
||||
<strong>生成整套电商视觉</strong>
|
||||
<p>主图、详情页、虚拟模特、短视频首帧一次整理。</p>
|
||||
</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>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<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 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>
|
||||
</Fragment>
|
||||
</article>
|
||||
))}
|
||||
</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>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -638,7 +367,6 @@ 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" : ""}`}>
|
||||
{feature.key !== "script" && feature.key !== "model" && feature.key !== "ecommerce" ? (
|
||||
<div className="omni-home__feature-copy">
|
||||
<span>
|
||||
{feature.icon}
|
||||
@@ -651,8 +379,7 @@ function HomePage({ onOpenGenerate, onOpenCanvas, onOpenEcommerce, onOpenScriptR
|
||||
<ArrowRightOutlined />
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="omni-home__feature-visual" aria-hidden={feature.key !== "script" && feature.key !== "model" && feature.key !== "ecommerce"}>
|
||||
<div className="omni-home__feature-visual" aria-hidden="true">
|
||||
{feature.key === "script" ? (
|
||||
<ScriptReviewShowcase />
|
||||
) : feature.key === "model" ? (
|
||||
@@ -663,18 +390,14 @@ function HomePage({ onOpenGenerate, onOpenCanvas, onOpenEcommerce, onOpenScriptR
|
||||
<img src={feature.imageUrl} alt="" />
|
||||
)}
|
||||
</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>
|
||||
@@ -707,6 +430,8 @@ 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: 16, max: 20, hue: 165, 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: 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,12 +27,6 @@ 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();
|
||||
@@ -85,34 +79,6 @@ function ScriptReviewShowcase() {
|
||||
|
||||
return (
|
||||
<div className="omni-script-review-showcase" id="script-review-showcase">
|
||||
<div className="srs-left-panel">
|
||||
<div className="srs-brand-section">
|
||||
<h1>剧本智能测评</h1>
|
||||
<p>用六维雷达评分拆解剧本质量,从结构、节奏、人物到商业潜力给出可执行的优化路径。</p>
|
||||
</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>
|
||||
|
||||
<div className="srs-results-panel">
|
||||
{/* Score Hero */}
|
||||
<div className="srs-score-hero">
|
||||
<div className="srs-score-left">
|
||||
@@ -236,7 +202,6 @@ function ScriptReviewShowcase() {
|
||||
</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: "95%", maxHeight: "95%", borderRadius: 8, objectFit: "contain" }} />
|
||||
<img src={inpaintResultImages[0]} alt="重绘结果" style={{ maxWidth: "90%", maxHeight: "90%", 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,16 +1284,12 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
|
||||
))}
|
||||
</div>
|
||||
) : referenceImage ? (
|
||||
<div className="studio-canvas-image">
|
||||
<img src={referenceImage} alt="参考图预览" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="studio-canvas-ghost">
|
||||
<div className="studio-canvas-ghost__icon">
|
||||
<div className="image-workbench-empty">
|
||||
<PictureOutlined />
|
||||
</div>
|
||||
<div className="studio-canvas-ghost__title">上传参考图后在此预览</div>
|
||||
<div className="studio-canvas-ghost__hint">生成结果也会显示在这里</div>
|
||||
<strong>上传参考图后在此预览</strong>
|
||||
<span>生成结果也会显示在这里</span>
|
||||
</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,
|
||||
@@ -179,6 +224,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");
|
||||
@@ -187,6 +235,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"));
|
||||
@@ -445,8 +496,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 />
|
||||
@@ -458,23 +530,21 @@ function ProfilePage({
|
||||
const renderActivePanel = () => {
|
||||
if (activePanel === "works") {
|
||||
return visibleWorks.length ? (
|
||||
<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>{task.type}</span>
|
||||
<span>{formatTaskType(task.type)}</span>
|
||||
</div>
|
||||
<p>{task.prompt}</p>
|
||||
<div className="profile-page__list-card-meta">
|
||||
<span>{task.status}</span>
|
||||
<span>{task.createdAt}</span>
|
||||
<span>{formatTaskStatus(task.status)}</span>
|
||||
<span>{formatProfileDate(task.createdAt)}</span>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
renderEmptyState("向全世界展示你最得意的创作。", "开始创作", onOpenWorkbench)
|
||||
);
|
||||
@@ -487,7 +557,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"
|
||||
@@ -519,12 +589,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>
|
||||
))}
|
||||
@@ -587,15 +657,39 @@ function ProfilePage({
|
||||
</span>
|
||||
</div>
|
||||
<strong className="profile-page__username">{displayName}</strong>
|
||||
{isBioEditing ? (
|
||||
<div className="profile-page__bio-editor">
|
||||
<textarea
|
||||
className="profile-page__bio"
|
||||
value={profileBio}
|
||||
onChange={(event) => setProfileBio(event.target.value)}
|
||||
onBlur={handleBioBlur}
|
||||
placeholder={displayedBio}
|
||||
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>
|
||||
|
||||
@@ -614,18 +708,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>
|
||||
@@ -681,13 +778,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>
|
||||
@@ -706,13 +815,31 @@ function ProfilePage({
|
||||
<source src={AUTH_SHOWCASE_VIDEO_URL} type="video/mp4" />
|
||||
</video>
|
||||
<div className="auth-page__video-overlay">
|
||||
<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>
|
||||
</div>
|
||||
@@ -723,6 +850,7 @@ function ProfilePage({
|
||||
<span className="auth-page__logo">
|
||||
<img src={AUTH_LOGO_URL} alt="OmniAI" />
|
||||
</span>
|
||||
<span className="auth-page__form-kicker">{mode === "login" ? "账户登录" : "新用户注册"}</span>
|
||||
<h2 className="auth-page__title">{mode === "login" ? "欢迎回来" : "创建账号"}</h2>
|
||||
<p className="auth-page__subtitle">
|
||||
{mode === "login" ? "登录后继续你的 AI 创作之旅" : "注册即可免费体验全部功能"}
|
||||
@@ -762,7 +890,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>
|
||||
|
||||
@@ -818,6 +947,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">
|
||||
@@ -855,6 +989,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>
|
||||
@@ -869,6 +1008,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}
|
||||
@@ -884,6 +1028,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>
|
||||
@@ -909,6 +1058,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}
|
||||
</>
|
||||
|
||||
@@ -356,13 +356,13 @@ function WatermarkRemovalPage({
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div className="image-workbench-actions watermark-removal-actions">
|
||||
<div className="image-workbench-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}>
|
||||
<button type="button" className="image-workbench-cancel" onClick={handleCancel} style={{ marginTop: 6 }}>
|
||||
取消
|
||||
</button>
|
||||
)}
|
||||
|
||||
@@ -236,6 +236,7 @@ function WorkbenchPage({
|
||||
const keepaliveTasksRef = useRef<Record<string, WorkbenchKeepaliveTask>>(readStoredKeepaliveTasks());
|
||||
const taskAbortControllersRef = useRef<Map<string, AbortController>>(new Map());
|
||||
const lastScrollTopRef = useRef(0);
|
||||
const scrollActionsHideTimerRef = useRef<number | null>(null);
|
||||
const shouldFollowNewMessagesRef = useRef(true);
|
||||
const pendingScrollToLatestRef = useRef(true);
|
||||
const renderedMessageIdsRef = useRef<string[]>([]);
|
||||
@@ -273,6 +274,8 @@ function WorkbenchPage({
|
||||
const [promptSelectionRange, setPromptSelectionRange] = useState({ start: 0, end: 0 });
|
||||
const [mentionActiveIndex, setMentionActiveIndex] = useState(0);
|
||||
const [composerHidden, setComposerHidden] = useState(false);
|
||||
const [scrollActionsVisible, setScrollActionsVisible] = useState(false);
|
||||
const [scrollActionDirection, setScrollActionDirection] = useState<"top" | "bottom" | null>(null);
|
||||
const [workspaceStarted, setWorkspaceStarted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -441,6 +444,27 @@ function WorkbenchPage({
|
||||
"--accent-glow": `0 0 24px rgba(${accentRgb}, 0.22)`,
|
||||
} as CSSProperties;
|
||||
|
||||
const revealScrollActionsTemporarily = useCallback((direction: "top" | "bottom") => {
|
||||
setScrollActionDirection(direction);
|
||||
setScrollActionsVisible(true);
|
||||
if (scrollActionsHideTimerRef.current !== null) {
|
||||
window.clearTimeout(scrollActionsHideTimerRef.current);
|
||||
}
|
||||
scrollActionsHideTimerRef.current = window.setTimeout(() => {
|
||||
setScrollActionsVisible(false);
|
||||
setScrollActionDirection(null);
|
||||
scrollActionsHideTimerRef.current = null;
|
||||
}, 950);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (scrollActionsHideTimerRef.current !== null) {
|
||||
window.clearTimeout(scrollActionsHideTimerRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const scrollMessagesToLatest = useCallback((behavior: ScrollBehavior = "smooth") => {
|
||||
const scroll = () => {
|
||||
const surface = messagesSurfaceRef.current;
|
||||
@@ -451,6 +475,7 @@ function WorkbenchPage({
|
||||
|
||||
setComposerHidden(false);
|
||||
shouldFollowNewMessagesRef.current = true;
|
||||
revealScrollActionsTemporarily("bottom");
|
||||
surface.scrollTo({ top: surface.scrollHeight, behavior });
|
||||
lastScrollTopRef.current = surface.scrollTop;
|
||||
};
|
||||
@@ -459,7 +484,7 @@ function WorkbenchPage({
|
||||
scroll();
|
||||
window.setTimeout(scroll, 80);
|
||||
});
|
||||
}, []);
|
||||
}, [revealScrollActionsTemporarily]);
|
||||
|
||||
const imageSettingGroups = useMemo<WorkbenchFieldGroup[]>(
|
||||
() => [
|
||||
@@ -1373,6 +1398,9 @@ function WorkbenchPage({
|
||||
const delta = top - lastScrollTopRef.current;
|
||||
const atTop = top <= edgeThreshold;
|
||||
const atBottom = top + surface.clientHeight >= surface.scrollHeight - edgeThreshold;
|
||||
if (surface.scrollHeight > surface.clientHeight + edgeThreshold && Math.abs(delta) > 1) {
|
||||
revealScrollActionsTemporarily(delta > 0 ? "bottom" : "top");
|
||||
}
|
||||
shouldFollowNewMessagesRef.current = atBottom;
|
||||
if (atTop || atBottom) {
|
||||
setComposerHidden(false);
|
||||
@@ -1384,7 +1412,7 @@ function WorkbenchPage({
|
||||
|
||||
surface.addEventListener("scroll", handleScroll, { passive: true });
|
||||
return () => surface.removeEventListener("scroll", handleScroll);
|
||||
}, [hasActivatedWorkspace]);
|
||||
}, [hasActivatedWorkspace, revealScrollActionsTemporarily]);
|
||||
|
||||
const scrollMessagesSurface = useCallback((direction: "top" | "bottom") => {
|
||||
const surface = messagesSurfaceRef.current;
|
||||
@@ -1392,8 +1420,9 @@ function WorkbenchPage({
|
||||
|
||||
const top = direction === "top" ? 0 : surface.scrollHeight;
|
||||
setComposerHidden(false);
|
||||
revealScrollActionsTemporarily(direction);
|
||||
surface.scrollTo({ top, behavior: "smooth" });
|
||||
}, []);
|
||||
}, [revealScrollActionsTemporarily]);
|
||||
|
||||
const closeToolbarMenus = () => setToolbarMenuId(null);
|
||||
const toggleToolbarMenu = (menuId: Exclude<ToolbarMenuId, null>) => {
|
||||
@@ -3022,10 +3051,13 @@ function WorkbenchPage({
|
||||
{renderComposerToolbar(false, isGenerating)}
|
||||
</div>
|
||||
</section>
|
||||
<div className="wb-chat-scroll-actions" aria-label="聊天滚动">
|
||||
<div
|
||||
className={`wb-chat-scroll-actions${scrollActionsVisible ? " is-visible" : ""}${scrollActionDirection ? ` is-${scrollActionDirection}` : ""}`}
|
||||
aria-label="聊天滚动"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="wb-chat-scroll-actions__button"
|
||||
className="wb-chat-scroll-actions__button wb-chat-scroll-actions__button--top"
|
||||
title="返回聊天顶部"
|
||||
aria-label="返回聊天顶部"
|
||||
onClick={() => scrollMessagesSurface("top")}
|
||||
@@ -3034,7 +3066,7 @@ function WorkbenchPage({
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="wb-chat-scroll-actions__button"
|
||||
className="wb-chat-scroll-actions__button wb-chat-scroll-actions__button--bottom"
|
||||
title="到达聊天底部"
|
||||
aria-label="到达聊天底部"
|
||||
onClick={() => scrollMessagesSurface("bottom")}
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
}
|
||||
|
||||
.ecom-video-flowbar__pulse.is-active {
|
||||
background: #00ff88;
|
||||
background: #34d399;
|
||||
}
|
||||
|
||||
.ecom-video-flowbar__wave {
|
||||
@@ -97,7 +97,7 @@
|
||||
}
|
||||
|
||||
.ecom-video-step-dot.is-done {
|
||||
background: #00ff88;
|
||||
background: #34d399;
|
||||
}
|
||||
|
||||
.ecom-video-step-dot.is-active {
|
||||
@@ -139,7 +139,7 @@
|
||||
place-items: center;
|
||||
border: 1px solid #1c4d3a;
|
||||
border-radius: 8px;
|
||||
background: #00ff88;
|
||||
background: #34d399;
|
||||
color: #06110e;
|
||||
padding: 0;
|
||||
font-size: 17px;
|
||||
@@ -213,7 +213,7 @@
|
||||
}
|
||||
|
||||
.ecom-video-flow-lines path.is-active {
|
||||
stroke: #00ff88;
|
||||
stroke: #34d399;
|
||||
animation: ecom-video-path-dash 1.8s linear infinite;
|
||||
}
|
||||
|
||||
@@ -319,7 +319,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: #00ff88;
|
||||
background: #34d399;
|
||||
}
|
||||
|
||||
.ecom-video-flow-node.is-running .ecom-video-flow-node__status-orb,
|
||||
@@ -390,7 +390,7 @@
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform: translateX(-100%);
|
||||
background: #00ff88;
|
||||
background: #34d399;
|
||||
}
|
||||
|
||||
.ecom-video-flow-connector.is-active i,
|
||||
@@ -541,7 +541,7 @@
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: #1c4d3a;
|
||||
color: #00ff88;
|
||||
color: #34d399;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
+67
-196
@@ -124,7 +124,7 @@
|
||||
|
||||
.product-clone-page[data-tool="set"] .product-set-upload:hover,
|
||||
.product-clone-page[data-tool="set"] .product-set-upload.is-dragging {
|
||||
border-color: #00ff88;
|
||||
border-color: #34d399;
|
||||
background: #1a2421;
|
||||
}
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: #20282a;
|
||||
color: #00ff88;
|
||||
color: #34d399;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
@@ -153,7 +153,7 @@
|
||||
min-width: 168px;
|
||||
height: 52px;
|
||||
border-radius: 10px;
|
||||
background: #00ff88;
|
||||
background: #34d399;
|
||||
color: #03130d;
|
||||
padding: 0 22px;
|
||||
font-size: 20px;
|
||||
@@ -226,8 +226,8 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="set"] .product-set-output-grid button.is-active {
|
||||
border-color: #00ff88;
|
||||
background: #00ff88;
|
||||
border-color: #34d399;
|
||||
background: #34d399;
|
||||
color: #04130e;
|
||||
}
|
||||
|
||||
@@ -395,7 +395,7 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="set"] .product-set-floating-detail textarea:focus {
|
||||
border-color: #00ff88;
|
||||
border-color: #34d399;
|
||||
box-shadow: 0 0 0 3px rgb(52 211 153 / 14%);
|
||||
}
|
||||
|
||||
@@ -404,7 +404,7 @@
|
||||
min-width: 148px;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
background: #00ff88;
|
||||
background: #34d399;
|
||||
color: #04130e;
|
||||
padding: 0 18px;
|
||||
font-size: 17px;
|
||||
@@ -1044,9 +1044,9 @@
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-settings-toggle:hover,
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-settings-toggle:focus-visible {
|
||||
border-color: #00ff88;
|
||||
border-color: #34d399;
|
||||
background: #202c28;
|
||||
color: #00ff88;
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-settings-toggle:active {
|
||||
@@ -1072,7 +1072,7 @@
|
||||
height: 30px;
|
||||
place-items: center;
|
||||
border-radius: 7px;
|
||||
background: #00ff88;
|
||||
background: #34d399;
|
||||
color: #06130d;
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
@@ -1087,7 +1087,7 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-logo strong span {
|
||||
color: #00ff88;
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-logo em {
|
||||
@@ -1102,9 +1102,9 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-logo em.is-ready {
|
||||
border-color: #00ff88;
|
||||
border-color: #34d399;
|
||||
background: #17352a;
|
||||
color: #00ff88;
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-card {
|
||||
@@ -1153,7 +1153,7 @@
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:hover,
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-zone.is-dragging {
|
||||
border-color: #00ff88;
|
||||
border-color: #34d399;
|
||||
background: #202c28;
|
||||
}
|
||||
|
||||
@@ -1162,7 +1162,7 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:focus-visible {
|
||||
outline: 2px solid #00ff88;
|
||||
outline: 2px solid #34d399;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
@@ -1180,7 +1180,7 @@
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: #262a33;
|
||||
color: #00ff88;
|
||||
color: #34d399;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@@ -1198,7 +1198,7 @@
|
||||
min-width: 122px;
|
||||
height: 38px;
|
||||
border-radius: 9px;
|
||||
background: #00ff88;
|
||||
background: #34d399;
|
||||
color: #06130d;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
@@ -1320,8 +1320,8 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-tag-group button.is-active {
|
||||
border-color: #00ff88;
|
||||
background: #00ff88;
|
||||
border-color: #34d399;
|
||||
background: #34d399;
|
||||
color: #06130d;
|
||||
}
|
||||
|
||||
@@ -1360,7 +1360,7 @@
|
||||
flex: 0 0 auto;
|
||||
border-radius: 999px;
|
||||
background: #17352a;
|
||||
color: #00ff88;
|
||||
color: #34d399;
|
||||
padding: 3px 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
@@ -1390,14 +1390,14 @@
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 999px;
|
||||
background: #00ff88;
|
||||
background: #34d399;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-platform-spec p {
|
||||
margin: 0;
|
||||
border-top: 1px solid #303540;
|
||||
color: #00ff88;
|
||||
color: #34d399;
|
||||
padding-top: 9px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
@@ -1511,7 +1511,7 @@
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-count-stepper button:hover:not(:disabled) {
|
||||
background: #26342f;
|
||||
color: #00ff88;
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-count-stepper button:active:not(:disabled) {
|
||||
@@ -1588,7 +1588,7 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-tabs button.is-active {
|
||||
background: #00ff88;
|
||||
background: #34d399;
|
||||
color: #06130d;
|
||||
}
|
||||
|
||||
@@ -1617,7 +1617,7 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload:hover {
|
||||
border-color: #00ff88;
|
||||
border-color: #34d399;
|
||||
background: #202c28;
|
||||
}
|
||||
|
||||
@@ -1752,7 +1752,7 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-link input:focus {
|
||||
border-color: #00ff88;
|
||||
border-color: #34d399;
|
||||
box-shadow: 0 0 0 3px rgb(52 211 153 / 10%);
|
||||
}
|
||||
|
||||
@@ -1787,7 +1787,7 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-replicate-levels button.is-active {
|
||||
border-color: #00ff88;
|
||||
border-color: #34d399;
|
||||
background: #26342f;
|
||||
}
|
||||
|
||||
@@ -1899,7 +1899,7 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-module-list button.is-active {
|
||||
border-color: #00ff88;
|
||||
border-color: #34d399;
|
||||
background: #26342f;
|
||||
}
|
||||
|
||||
@@ -1966,8 +1966,8 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-model-tabs button.is-active {
|
||||
border-color: #00ff88;
|
||||
background: #00ff88;
|
||||
border-color: #34d399;
|
||||
background: #34d399;
|
||||
color: #06130d;
|
||||
}
|
||||
|
||||
@@ -2046,13 +2046,13 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-model-scene-grid button.is-active {
|
||||
border-color: #00ff88;
|
||||
border-color: #34d399;
|
||||
background: #26342f;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-model-scene-grid button.is-active > span {
|
||||
border-color: #00ff88;
|
||||
background: #00ff88;
|
||||
border-color: #34d399;
|
||||
background: #34d399;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-model-scene-grid button:active {
|
||||
@@ -2119,7 +2119,7 @@
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-model-select > button:hover,
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-model-select > button.is-open {
|
||||
border-color: #00ff88;
|
||||
border-color: #34d399;
|
||||
background: #26342f;
|
||||
box-shadow: 0 0 0 3px rgb(52 211 153 / 10%);
|
||||
}
|
||||
@@ -2129,7 +2129,7 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-model-select > button:focus-visible {
|
||||
border-color: #00ff88;
|
||||
border-color: #34d399;
|
||||
box-shadow: 0 0 0 3px rgb(52 211 153 / 16%);
|
||||
}
|
||||
|
||||
@@ -2227,7 +2227,7 @@
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-model-select__menu button:hover,
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-model-select__menu button.is-active {
|
||||
background: #17352a;
|
||||
color: #00ff88;
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-model-select__menu button:active {
|
||||
@@ -2290,7 +2290,7 @@
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-model-textarea textarea:focus,
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-model-select-grid select:focus {
|
||||
border-color: #00ff88;
|
||||
border-color: #34d399;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-video-panel {
|
||||
@@ -2342,7 +2342,7 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-video-title-row strong {
|
||||
color: #00ff88;
|
||||
color: #34d399;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
white-space: nowrap;
|
||||
@@ -2382,7 +2382,7 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-video-options button.is-active {
|
||||
border-color: #00ff88;
|
||||
border-color: #34d399;
|
||||
background: #26342f;
|
||||
}
|
||||
|
||||
@@ -2428,7 +2428,7 @@
|
||||
height: 5px;
|
||||
border-radius: 999px;
|
||||
background:
|
||||
linear-gradient(90deg, #00ff88 0 var(--clone-video-duration-progress), #3a4050 var(--clone-video-duration-progress) 100%);
|
||||
linear-gradient(90deg, #34d399 0 var(--clone-video-duration-progress), #3a4050 var(--clone-video-duration-progress) 100%);
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-duration-control input::-webkit-slider-thumb {
|
||||
@@ -2438,15 +2438,15 @@
|
||||
appearance: none;
|
||||
border: 3px solid #101115;
|
||||
border-radius: 999px;
|
||||
background: #00ff88;
|
||||
box-shadow: 0 0 0 1px #00ff88;
|
||||
background: #34d399;
|
||||
box-shadow: 0 0 0 1px #34d399;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-duration-control input::-moz-range-track {
|
||||
height: 5px;
|
||||
border-radius: 999px;
|
||||
background:
|
||||
linear-gradient(90deg, #00ff88 0 var(--clone-video-duration-progress), #3a4050 var(--clone-video-duration-progress) 100%);
|
||||
linear-gradient(90deg, #34d399 0 var(--clone-video-duration-progress), #3a4050 var(--clone-video-duration-progress) 100%);
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-duration-control input::-moz-range-thumb {
|
||||
@@ -2454,8 +2454,8 @@
|
||||
height: 14px;
|
||||
border: 3px solid #101115;
|
||||
border-radius: 999px;
|
||||
background: #00ff88;
|
||||
box-shadow: 0 0 0 1px #00ff88;
|
||||
background: #34d399;
|
||||
box-shadow: 0 0 0 1px #34d399;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-duration-scale {
|
||||
@@ -2494,7 +2494,7 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-video-smart.is-on {
|
||||
border-color: #00ff88;
|
||||
border-color: #34d399;
|
||||
background: #26342f;
|
||||
}
|
||||
|
||||
@@ -2547,12 +2547,12 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-video-smart.is-on i {
|
||||
border-color: #00ff88;
|
||||
border-color: #34d399;
|
||||
background: #17352a;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-video-smart.is-on i::after {
|
||||
background: #00ff88;
|
||||
background: #34d399;
|
||||
transform: translateX(16px);
|
||||
}
|
||||
|
||||
@@ -2590,7 +2590,7 @@
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-basic-select > button:hover,
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-basic-select > button.is-open {
|
||||
border-color: #00ff88;
|
||||
border-color: #34d399;
|
||||
background: #202c28;
|
||||
}
|
||||
|
||||
@@ -2613,7 +2613,7 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-basic-select > button:focus-visible {
|
||||
outline: 2px solid #00ff88;
|
||||
outline: 2px solid #34d399;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@@ -2684,7 +2684,7 @@
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-basic-select__menu button:hover,
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-basic-select__menu button.is-active {
|
||||
background: #17352a;
|
||||
color: #00ff88;
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
@keyframes clone-ai-select-fade {
|
||||
@@ -2707,7 +2707,7 @@
|
||||
min-height: 52px;
|
||||
border: 0;
|
||||
border-radius: 11px;
|
||||
background: #00ff88;
|
||||
background: #34d399;
|
||||
color: #06130d;
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
@@ -2769,7 +2769,7 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-preview-header b {
|
||||
color: #00ff88;
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-empty-state {
|
||||
@@ -2833,7 +2833,7 @@
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-main-result:hover,
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-result-grid button:hover {
|
||||
border-color: #00ff88;
|
||||
border-color: #34d399;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
@@ -2890,7 +2890,7 @@
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-flow-arrow {
|
||||
width: 54px;
|
||||
height: 26px;
|
||||
background: #00ff88;
|
||||
background: #34d399;
|
||||
clip-path: polygon(0 34%, 58% 34%, 58% 0, 100% 50%, 58% 100%, 58% 66%, 0 66%);
|
||||
animation: clone-ai-arrow-pulse 1.35s ease-in-out infinite;
|
||||
}
|
||||
@@ -2935,7 +2935,7 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-send-button:hover:not(:disabled) {
|
||||
border-color: #00ff88;
|
||||
border-color: #34d399;
|
||||
background: #202c28;
|
||||
}
|
||||
|
||||
@@ -2963,7 +2963,7 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-send-button {
|
||||
background: #00ff88;
|
||||
background: #34d399;
|
||||
color: #06130d;
|
||||
}
|
||||
|
||||
@@ -7147,7 +7147,7 @@
|
||||
|
||||
.product-clone-page[data-tool="set"] .product-set-upload:hover,
|
||||
.product-clone-page[data-tool="set"] .product-set-upload.is-dragging {
|
||||
border-color: #00ff88;
|
||||
border-color: #34d399;
|
||||
background: #eefbf5;
|
||||
}
|
||||
|
||||
@@ -7212,7 +7212,7 @@
|
||||
}
|
||||
|
||||
.product-set-textarea-wrap textarea:focus {
|
||||
border-color: #00ff88;
|
||||
border-color: #34d399;
|
||||
box-shadow: 0 0 0 3px rgb(52 211 153 / 16%);
|
||||
}
|
||||
|
||||
@@ -7297,7 +7297,7 @@
|
||||
place-items: center;
|
||||
border-radius: 14px;
|
||||
background: #eefbf5;
|
||||
color: #00ff88;
|
||||
color: #34d399;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
@@ -7568,7 +7568,7 @@
|
||||
|
||||
.product-clone-page[data-tool="set"] .product-set-upload:hover,
|
||||
.product-clone-page[data-tool="set"] .product-set-upload.is-dragging {
|
||||
border-color: #00ff88;
|
||||
border-color: #34d399;
|
||||
background: #1a2421;
|
||||
}
|
||||
|
||||
@@ -7579,7 +7579,7 @@
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: #20282a;
|
||||
color: #00ff88;
|
||||
color: #34d399;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
@@ -7597,7 +7597,7 @@
|
||||
min-width: 168px;
|
||||
height: 52px;
|
||||
border-radius: 10px;
|
||||
background: #00ff88;
|
||||
background: #34d399;
|
||||
color: #03130d;
|
||||
padding: 0 22px;
|
||||
font-size: 20px;
|
||||
@@ -7670,8 +7670,8 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="set"] .product-set-output-grid button.is-active {
|
||||
border-color: #00ff88;
|
||||
background: #00ff88;
|
||||
border-color: #34d399;
|
||||
background: #34d399;
|
||||
color: #04130e;
|
||||
}
|
||||
|
||||
@@ -7835,7 +7835,7 @@
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="set"] .product-set-floating-detail textarea:focus {
|
||||
border-color: #00ff88;
|
||||
border-color: #34d399;
|
||||
box-shadow: 0 0 0 3px rgb(52 211 153 / 14%);
|
||||
}
|
||||
|
||||
@@ -7844,7 +7844,7 @@
|
||||
min-width: 148px;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
background: #00ff88;
|
||||
background: #34d399;
|
||||
color: #04130e;
|
||||
padding: 0 18px;
|
||||
font-size: 17px;
|
||||
@@ -7933,132 +7933,3 @@
|
||||
.clone-ai-adwizard__risk.is-medium { color: #faad14; }
|
||||
.clone-ai-adwizard__risk.is-high { color: #ff4d4f; }
|
||||
.clone-ai-adwizard__issues { margin: 0; padding-left: 16px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
|
||||
|
||||
/* ===== Ecommerce Template Apple Carousel ===== */
|
||||
.ecommerce-template-apple-carousel {
|
||||
position: relative;
|
||||
width: min(100%, 1160px);
|
||||
min-height: clamp(340px, 34vw, 480px);
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.ecommerce-template-apple-carousel__stage {
|
||||
position: relative;
|
||||
width: min(100%, 1080px);
|
||||
height: clamp(320px, 30vw, 440px);
|
||||
margin: 0 auto;
|
||||
overflow: visible;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.ecommerce-template-apple-carousel__deck {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.ecommerce-template-apple-card {
|
||||
--apple-card-offset: 0;
|
||||
--apple-card-depth: 0;
|
||||
--apple-card-z: 20;
|
||||
--apple-card-x: 0;
|
||||
--apple-card-y: 0;
|
||||
--apple-card-z-offset: 0;
|
||||
--apple-card-rotate-y: 0deg;
|
||||
--apple-card-rotate-z: 0deg;
|
||||
--apple-card-scale: 1;
|
||||
--apple-card-opacity: 1;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: grid;
|
||||
width: clamp(200px, 16vw, 270px);
|
||||
height: clamp(114px, 9.2vw, 153px);
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: clamp(10px, 1.1vw, 16px);
|
||||
background: #0d1110;
|
||||
color: #101412;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
opacity: var(--apple-card-opacity);
|
||||
box-shadow:
|
||||
0 10px 24px rgb(0 0 0 / 16%),
|
||||
inset 0 -1px 0 rgb(0 0 0 / 8%);
|
||||
transform:
|
||||
translate(-50%, -50%)
|
||||
translateX(var(--apple-card-x))
|
||||
translateY(var(--apple-card-y))
|
||||
translateZ(var(--apple-card-z-offset))
|
||||
rotateY(var(--apple-card-rotate-y))
|
||||
rotateZ(var(--apple-card-rotate-z))
|
||||
scale(var(--apple-card-scale));
|
||||
transform-origin: center;
|
||||
transform-style: preserve-3d;
|
||||
transition:
|
||||
transform 760ms cubic-bezier(0.22, 1, 0.36, 1),
|
||||
opacity 640ms cubic-bezier(0.22, 1, 0.36, 1),
|
||||
box-shadow 640ms cubic-bezier(0.22, 1, 0.36, 1),
|
||||
width 760ms cubic-bezier(0.22, 1, 0.36, 1),
|
||||
height 760ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
z-index: var(--apple-card-z);
|
||||
}
|
||||
|
||||
.ecommerce-template-apple-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
linear-gradient(180deg, rgb(255 255 255 / 12%), transparent 24%),
|
||||
linear-gradient(0deg, rgb(0 0 0 / 18%), transparent 44%);
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.ecommerce-template-apple-card img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
object-fit: cover;
|
||||
filter:
|
||||
saturate(1.06)
|
||||
contrast(1.02)
|
||||
drop-shadow(0 16px 16px rgb(0 0 0 / 14%));
|
||||
transform: translateZ(10px);
|
||||
transition:
|
||||
filter 640ms cubic-bezier(0.22, 1, 0.36, 1),
|
||||
transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.ecommerce-template-apple-card.is-active {
|
||||
width: clamp(360px, 34vw, 580px);
|
||||
height: clamp(203px, 19.2vw, 328px);
|
||||
border-radius: clamp(14px, 1.6vw, 24px);
|
||||
box-shadow:
|
||||
0 18px 40px rgb(0 0 0 / 26%),
|
||||
inset 0 -1px 0 rgb(0 0 0 / 8%);
|
||||
}
|
||||
|
||||
.ecommerce-template-apple-card.is-active img {
|
||||
filter:
|
||||
saturate(1.1)
|
||||
contrast(1.04)
|
||||
drop-shadow(0 20px 18px rgb(0 0 0 / 16%));
|
||||
transform: translateZ(18px) scale(1.02);
|
||||
}
|
||||
|
||||
.ecommerce-template-apple-card:hover {
|
||||
box-shadow:
|
||||
0 26px 54px rgb(0 0 0 / 32%),
|
||||
inset 0 -1px 0 rgb(0 0 0 / 8%);
|
||||
}
|
||||
|
||||
.ecommerce-template-apple-carousel.is-resetting .ecommerce-template-apple-card,
|
||||
.ecommerce-template-apple-carousel.is-resetting .ecommerce-template-apple-card img {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
+93
-1302
File diff suppressed because it is too large
Load Diff
@@ -563,10 +563,7 @@ textarea.image-workbench-prompt {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle, rgba(var(--accent-rgb), 0.12) 1px, transparent 1.4px),
|
||||
var(--bg-inset);
|
||||
background-size: 22px 22px;
|
||||
background: var(--bg-inset);
|
||||
}
|
||||
|
||||
.image-workbench-canvas img {
|
||||
@@ -595,7 +592,6 @@ textarea.image-workbench-prompt {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
color: var(--fg-dim);
|
||||
font-size: 14px;
|
||||
@@ -629,24 +625,16 @@ 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: 95%;
|
||||
max-height: 95%;
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
border-radius: 8px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.image-workbench-camera-stage img {
|
||||
max-height: 68%;
|
||||
}
|
||||
|
||||
.image-workbench-inpaint-stage > span {
|
||||
.image-workbench-inpaint-stage > span,
|
||||
.image-workbench-camera-stage > span {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
left: 50%;
|
||||
@@ -659,15 +647,6 @@ 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;
|
||||
@@ -710,8 +689,16 @@ 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 {
|
||||
@@ -822,7 +809,7 @@ textarea.image-workbench-prompt {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image-workbench-panel--right .image-workbench-result-grid {
|
||||
.image-workbench-result-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
|
||||
gap: 8px;
|
||||
@@ -1480,27 +1467,6 @@ 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;
|
||||
@@ -1553,42 +1519,34 @@ textarea.image-workbench-prompt {
|
||||
|
||||
.watermark-removal-compare__actions {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
width: min(480px, calc(100% - 32px));
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.watermark-removal-compare__actions button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
min-height: 64px;
|
||||
padding: 0 24px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
gap: 4px;
|
||||
padding: 5px 12px;
|
||||
border: none;
|
||||
border-radius: var(--radius-xs);
|
||||
background: var(--bg-inset);
|
||||
color: var(--fg-body);
|
||||
font: inherit;
|
||||
font-size: 18px;
|
||||
font-weight: 750;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
backdrop-filter: none;
|
||||
transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
|
||||
backdrop-filter: blur(4px);
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.watermark-removal-compare__actions button:hover:not(:disabled) {
|
||||
border-color: rgba(var(--accent-rgb), 0.42);
|
||||
background: rgba(var(--accent-rgb), 0.11);
|
||||
color: var(--accent);
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.watermark-removal-compare__actions button:disabled {
|
||||
opacity: 0.56;
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -1605,33 +1563,33 @@ textarea.image-workbench-prompt {
|
||||
}
|
||||
|
||||
.image-workbench-generating strong {
|
||||
font-size: 20px;
|
||||
font-size: 15px;
|
||||
color: var(--fg-default);
|
||||
}
|
||||
|
||||
.image-workbench-progress-bar {
|
||||
width: 320px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
width: 200px;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background: var(--bg-inset);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-workbench-progress-fill {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
border-radius: 3px;
|
||||
background: var(--accent);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.image-workbench-cancel {
|
||||
margin-top: 12px;
|
||||
padding: 8px 24px;
|
||||
margin-top: 8px;
|
||||
padding: 6px 16px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-xs);
|
||||
background: transparent;
|
||||
color: var(--fg-muted);
|
||||
font-size: 15px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
@@ -1642,17 +1600,14 @@ textarea.image-workbench-prompt {
|
||||
}
|
||||
|
||||
.image-workbench-result-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 24px;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
gap: 16px;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.image-workbench-result-item {
|
||||
@@ -1679,9 +1634,8 @@ textarea.image-workbench-prompt {
|
||||
.image-workbench-result-card {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
width: min(100%, 500px);
|
||||
align-content: start;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.image-workbench-result-actions {
|
||||
@@ -1693,16 +1647,16 @@ textarea.image-workbench-prompt {
|
||||
.image-workbench-result-actions button {
|
||||
display: inline-flex;
|
||||
min-width: 0;
|
||||
min-height: 48px;
|
||||
min-height: 34px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
gap: 5px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-xs);
|
||||
background: var(--bg-inset);
|
||||
color: var(--fg-body);
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
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,17 +1 @@
|
||||
/* 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: #00ff88;
|
||||
--eval-accent-start: #34d399;
|
||||
--eval-accent-mid: #10b981;
|
||||
--eval-accent-end: #059669;
|
||||
--eval-accent-glow: rgba(16, 185, 129, 0.3);
|
||||
@@ -3400,6 +3400,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 520px;
|
||||
max-height: 520px;
|
||||
padding: 18px 22px;
|
||||
border: none;
|
||||
outline: none;
|
||||
@@ -3409,6 +3410,7 @@
|
||||
font-size: 14px;
|
||||
line-height: 1.9;
|
||||
resize: none;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.script-eval-v4-text-input::placeholder {
|
||||
@@ -4268,6 +4270,11 @@
|
||||
.script-eval-v4-text-shell,
|
||||
.script-eval-v4-text-input {
|
||||
min-height: calc(100vh - 422px);
|
||||
max-height: calc(100vh - 422px);
|
||||
}
|
||||
|
||||
.script-eval-v4-text-input {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.script-eval-v4-score-card {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.product-clone-page[data-tool="clone"].size-template-workbench {
|
||||
--clone-settings-panel-width: 640px;
|
||||
--size-green: #00ff88;
|
||||
--size-green: #34d399;
|
||||
--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: #00ff88;
|
||||
border-color: #34d399;
|
||||
background: #202c28;
|
||||
}
|
||||
|
||||
@@ -155,7 +155,7 @@
|
||||
.size-template-platform-dialog button:hover,
|
||||
.size-template-platform-dialog button.is-active {
|
||||
background: #17352a;
|
||||
color: #00ff88;
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
@keyframes size-template-dialog-rise {
|
||||
@@ -241,7 +241,7 @@
|
||||
width: 54px;
|
||||
height: 2px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, #00ff88, rgb(52 211 153 / 0%));
|
||||
background: linear-gradient(90deg, #34d399, 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: #00ff88;
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
.size-template-preview-note p {
|
||||
@@ -414,7 +414,7 @@
|
||||
}
|
||||
|
||||
.size-template-check-list .anticon {
|
||||
color: #00ff88;
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
@media (max-width: 1320px) {
|
||||
|
||||
@@ -376,19 +376,23 @@
|
||||
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: 48px;
|
||||
min-height: 36px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-xs);
|
||||
background: var(--bg-inset);
|
||||
color: var(--fg-body);
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
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(255, 255, 255, 0.04);
|
||||
--toolbox-elevated: rgba(255, 255, 255, 0.06);
|
||||
--toolbox-surface: rgba(14, 16, 38, 0.75);
|
||||
--toolbox-elevated: rgba(20, 22, 52, 0.85);
|
||||
--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: #e8eaef;
|
||||
--toolbox-text-secondary: #9aa1b8;
|
||||
--toolbox-text-tertiary: #62697f;
|
||||
--toolbox-text-primary: #f0f0f5;
|
||||
--toolbox-text-secondary: rgba(240, 240, 245, 0.6);
|
||||
--toolbox-text-tertiary: rgba(240, 240, 245, 0.4);
|
||||
|
||||
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(42, 159, 212, 0.03) 0%, transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 80% 70%, rgba(79, 195, 247, 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(18px, 2.8vw, 36px);
|
||||
padding: clamp(36px, 5.5vw, 68px) clamp(20px, 6vw, 76px);
|
||||
gap: clamp(20px, 3vw, 40px);
|
||||
padding: clamp(42px, 6vw, 82px) clamp(22px, 7vw, 92px);
|
||||
min-height: var(--home-section-min-height);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ===== Left Panel ===== */
|
||||
.omni-home__toolbox-left {
|
||||
width: clamp(320px, 30vw, 450px);
|
||||
width: clamp(340px, 30vw, 440px);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 17px;
|
||||
gap: 16px;
|
||||
justify-content: flex-start;
|
||||
padding-top: clamp(34px, 6vh, 84px);
|
||||
padding-top: clamp(40px, 8vh, 100px);
|
||||
}
|
||||
|
||||
.omni-home__toolbox-brand {
|
||||
@@ -54,31 +54,31 @@
|
||||
}
|
||||
|
||||
.omni-home__toolbox-brand-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
background: var(--toolbox-green);
|
||||
border-radius: 15px;
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #0a0b12;
|
||||
font-size: 28px;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-brand-icon .anticon {
|
||||
font-size: 30px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-brand-text {
|
||||
font-weight: 900;
|
||||
font-size: 34px;
|
||||
font-size: 30px;
|
||||
color: #fff;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-title {
|
||||
font-weight: 900;
|
||||
font-size: clamp(36px, 3.8vw, 50px);
|
||||
font-size: clamp(34px, 3.6vw, 46px);
|
||||
line-height: 1.15;
|
||||
background: linear-gradient(135deg, var(--toolbox-green), var(--toolbox-blue));
|
||||
-webkit-background-clip: text;
|
||||
@@ -87,10 +87,9 @@
|
||||
}
|
||||
|
||||
.omni-home__toolbox-subtitle {
|
||||
font-size: 18px;
|
||||
line-height: 1.55;
|
||||
font-size: 17px;
|
||||
line-height: 1.6;
|
||||
color: var(--toolbox-text-secondary);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-list {
|
||||
@@ -103,8 +102,8 @@
|
||||
.omni-home__toolbox-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 17px;
|
||||
padding: 17px 22px;
|
||||
gap: 16px;
|
||||
padding: 18px 22px;
|
||||
border-radius: 16px;
|
||||
background: var(--toolbox-surface);
|
||||
border: 1px solid var(--toolbox-border-subtle);
|
||||
@@ -125,14 +124,14 @@
|
||||
}
|
||||
|
||||
.omni-home__toolbox-item-icon {
|
||||
font-size: 29px;
|
||||
font-size: 28px;
|
||||
flex-shrink: 0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 13px;
|
||||
border-radius: 12px;
|
||||
background: rgba(0, 255, 136, 0.08);
|
||||
}
|
||||
|
||||
@@ -140,19 +139,18 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-item-name {
|
||||
font-weight: 700;
|
||||
font-size: 19px;
|
||||
font-size: 17px;
|
||||
color: var(--toolbox-text-primary);
|
||||
}
|
||||
|
||||
.omni-home__toolbox-item-desc {
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
color: var(--toolbox-text-tertiary);
|
||||
line-height: 1.4;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@keyframes omni-toolbox-fadeSlideIn {
|
||||
@@ -162,14 +160,14 @@
|
||||
|
||||
.omni-home__toolbox-workflow {
|
||||
margin-top: auto;
|
||||
padding: 19px 24px;
|
||||
padding: 20px 24px;
|
||||
border-radius: 16px;
|
||||
background: var(--toolbox-surface);
|
||||
border: 1px solid var(--toolbox-border-subtle);
|
||||
}
|
||||
|
||||
.omni-home__toolbox-workflow-label {
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--toolbox-green);
|
||||
margin-bottom: 12px;
|
||||
@@ -180,21 +178,18 @@
|
||||
.omni-home__toolbox-workflow-steps {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
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: 16px;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ===== Grid Area ===== */
|
||||
@@ -834,19 +829,17 @@
|
||||
@media (max-width: 980px) {
|
||||
.omni-home__toolbox-shell {
|
||||
flex-direction: column;
|
||||
padding: 36px 20px 48px;
|
||||
gap: 24px;
|
||||
padding: 48px 22px 64px;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-left {
|
||||
width: 100%;
|
||||
flex-shrink: unset;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-grid {
|
||||
width: 100%;
|
||||
min-height: clamp(400px, 60vw, 560px);
|
||||
min-height: clamp(480px, 70vw, 700px);
|
||||
}
|
||||
|
||||
.omni-home__toolbox-workflow {
|
||||
@@ -856,7 +849,7 @@
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.omni-home__toolbox-shell {
|
||||
padding: 28px 16px 40px;
|
||||
padding: 36px 18px 48px;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-title {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user