OmniAI Developer
717 lines
26 KiB
TypeScript
717 lines
26 KiB
TypeScript
import {
|
||
ArrowRightOutlined,
|
||
DashboardOutlined,
|
||
FileSearchOutlined,
|
||
PlayCircleOutlined,
|
||
PlusOutlined,
|
||
ShoppingOutlined,
|
||
ThunderboltOutlined,
|
||
} from "@ant-design/icons";
|
||
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";
|
||
|
||
function ScrollEntrance({ children, className, ...rest }: { children: React.ReactNode; className?: string } & React.HTMLAttributes<HTMLElement>) {
|
||
const { ref, isVisible } = useScrollEntrance<HTMLElement>();
|
||
return (
|
||
<section ref={ref} className={`${className ?? ""} scroll-entrance${isVisible ? " is-visible" : ""}`} {...rest}>
|
||
{children}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
const OSS_MUBAN = "https://stringtest.oss-cn-hangzhou.aliyuncs.com/muban";
|
||
const heroImage1 = `${OSS_MUBAN}/hero-1.png`;
|
||
const heroImage2 = `${OSS_MUBAN}/hero-2.png`;
|
||
const heroImage3 = `${OSS_MUBAN}/hero-3.png`;
|
||
const featureEcommerceImage = `${OSS_MUBAN}/feature-ecommerce.jpg`;
|
||
const featureScriptImage = `${OSS_MUBAN}/feature-script.jpg`;
|
||
const featureTokenImage = `${OSS_MUBAN}/feature-token.jpg`;
|
||
|
||
interface HomePageProps {
|
||
onOpenGenerate: () => void;
|
||
onOpenCanvas?: () => void;
|
||
onOpenEcommerce: () => void;
|
||
onOpenScriptReview?: () => void;
|
||
onOpenTokenMonitor?: () => void;
|
||
onSelectView: (view: WebViewKey) => void;
|
||
onOpenImageTool?: (tool: WebImageWorkbenchTool) => void;
|
||
}
|
||
|
||
const HOME_BACKGROUND_VIDEO = "https://stringtest.oss-cn-hangzhou.aliyuncs.com/muban/hero-bg.mp4";
|
||
|
||
const HOME_CAROUSEL_IMAGES = [
|
||
{ imageUrl: heroImage1, title: "灵感生成" },
|
||
{ imageUrl: heroImage2, title: "画布创作" },
|
||
{ imageUrl: heroImage3, title: "商业素材" },
|
||
];
|
||
|
||
const HOME_FEATURES = [
|
||
{
|
||
key: "model",
|
||
eyebrow: "AI Generation",
|
||
title: "模型生成",
|
||
description: "通过AI模型生成文本、图片、视频，三种模式覆盖全内容类型，Agent对话式交互智能产出。",
|
||
imageUrl: featureTokenImage,
|
||
actionLabel: "开始生成",
|
||
icon: <ThunderboltOutlined />,
|
||
stats: ["文本生成", "图片生成", "视频生成"],
|
||
},
|
||
{
|
||
key: "ecommerce",
|
||
eyebrow: "AI Commerce",
|
||
title: "AI 电商生成",
|
||
description: "上传产品图后自动生成主图、场景图、详情素材和短视频方案，快速覆盖多平台商品视觉。",
|
||
imageUrl: featureEcommerceImage,
|
||
actionLabel: "开始生成",
|
||
icon: <ShoppingOutlined />,
|
||
stats: ["多场景", "多角度", "批量输出"],
|
||
},
|
||
{
|
||
key: "script",
|
||
eyebrow: "Script Review",
|
||
title: "剧本智能测评",
|
||
description: "用六维雷达评分拆解剧本质量，从结构、节奏、人物到商业潜力给出可执行的优化路径。",
|
||
imageUrl: featureScriptImage,
|
||
actionLabel: "开始测评",
|
||
icon: <FileSearchOutlined />,
|
||
stats: ["六维评分", "质量量化", "逐项优化"],
|
||
},
|
||
];
|
||
|
||
const HOME_EXPERIENCE_POINTS = [
|
||
{ label: "生成", meta: "图像 / 视频", tone: "green" },
|
||
{ label: "测评", meta: "剧本质量", tone: "cyan" },
|
||
{ label: "成本", meta: "Token 用量", tone: "violet" },
|
||
{ label: "电商", meta: "商品视觉", tone: "amber" },
|
||
];
|
||
|
||
const ECOMMERCE_MATRIX_FEATURES = [
|
||
{ icon: "⚡", title: "高效工作流", description: "自动化处理，一键触发" },
|
||
{ icon: "⊞", title: "矩阵式产出", description: "多场景、多尺寸批量生成" },
|
||
{ icon: "◈", title: "一致性保证", description: "智能保持商品特征与风格统一" },
|
||
];
|
||
|
||
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;
|
||
}
|
||
|
||
function getPositiveModulo(value: number, length: number) {
|
||
return ((value % length) + length) % length;
|
||
}
|
||
|
||
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 yByDepth = [8, -2, -8, -13, -18, -24];
|
||
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;
|
||
const scale = scaleByDepth[depth] ?? scaleByDepth[scaleByDepth.length - 1]!;
|
||
|
||
return {
|
||
"--apple-card-offset": offset,
|
||
"--apple-card-depth": depth,
|
||
"--apple-card-z": 80 - depth,
|
||
"--apple-card-x": `${x}px`,
|
||
"--apple-card-y": `${y}px`,
|
||
"--apple-card-z-offset": `${z}px`,
|
||
"--apple-card-rotate-y": "0deg",
|
||
"--apple-card-rotate-z": "0deg",
|
||
"--apple-card-scale": String(scale),
|
||
"--apple-card-opacity": String(depth > 4 ? 0 : 1),
|
||
} 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="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 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>
|
||
<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>
|
||
);
|
||
}
|
||
|
||
function HomePage({ onOpenGenerate, onOpenCanvas, onOpenEcommerce, onOpenScriptReview, onOpenTokenMonitor, onSelectView, onOpenImageTool }: HomePageProps) {
|
||
const [splashDismissed, setSplashDismissed] = useState(() => sessionStorage.getItem("omniai:splash-seen") === "1");
|
||
const [activeSlideIndex, setActiveSlideIndex] = useState(0);
|
||
const [carouselMotion, setCarouselMotion] = useState<HomeCarouselMotion | null>(null);
|
||
const [carouselIsResetting, setCarouselIsResetting] = useState(false);
|
||
const carouselFrameRef = useRef<number | null>(null);
|
||
const carouselResetFrameRef = useRef<number | null>(null);
|
||
const carouselTimerRef = useRef<number | null>(null);
|
||
const carouselSlotOffsets = useMemo(() => {
|
||
const direction = carouselMotion?.direction ?? 0;
|
||
const minSlot = HOME_CAROUSEL_SLOTS[0]! + Math.min(direction, 0);
|
||
const maxSlot = HOME_CAROUSEL_SLOTS[HOME_CAROUSEL_SLOTS.length - 1]! + Math.max(direction, 0);
|
||
return Array.from({ length: maxSlot - minSlot + 1 }, (_, index) => minSlot + index);
|
||
}, [carouselMotion?.direction]);
|
||
|
||
const startCarouselShift = useCallback(
|
||
(rawDirection: number) => {
|
||
const direction = Math.sign(rawDirection);
|
||
if (!direction || HOME_CAROUSEL_IMAGES.length <= 1 || carouselMotion) return;
|
||
|
||
if (carouselFrameRef.current !== null) {
|
||
window.cancelAnimationFrame(carouselFrameRef.current);
|
||
}
|
||
if (carouselTimerRef.current !== null) {
|
||
window.clearTimeout(carouselTimerRef.current);
|
||
}
|
||
if (carouselResetFrameRef.current !== null) {
|
||
window.cancelAnimationFrame(carouselResetFrameRef.current);
|
||
}
|
||
|
||
setCarouselIsResetting(false);
|
||
setCarouselMotion({ direction, progress: 0 });
|
||
carouselFrameRef.current = window.requestAnimationFrame(() => {
|
||
carouselFrameRef.current = window.requestAnimationFrame(() => {
|
||
setCarouselMotion((current) => (current?.direction === direction ? { direction, progress: 1 } : current));
|
||
});
|
||
});
|
||
carouselTimerRef.current = window.setTimeout(() => {
|
||
setCarouselIsResetting(true);
|
||
setActiveSlideIndex((current) => getPositiveModulo(current + direction, HOME_CAROUSEL_IMAGES.length));
|
||
setCarouselMotion(null);
|
||
carouselResetFrameRef.current = window.requestAnimationFrame(() => {
|
||
carouselResetFrameRef.current = window.requestAnimationFrame(() => {
|
||
setCarouselIsResetting(false);
|
||
});
|
||
});
|
||
}, HOME_CAROUSEL_TRANSITION_MS);
|
||
},
|
||
[carouselMotion],
|
||
);
|
||
|
||
useEffect(() => {
|
||
const timerId = window.setInterval(() => {
|
||
startCarouselShift(-1);
|
||
}, 2600);
|
||
return () => window.clearInterval(timerId);
|
||
}, [startCarouselShift]);
|
||
|
||
useEffect(
|
||
() => () => {
|
||
if (carouselFrameRef.current !== null) {
|
||
window.cancelAnimationFrame(carouselFrameRef.current);
|
||
}
|
||
if (carouselTimerRef.current !== null) {
|
||
window.clearTimeout(carouselTimerRef.current);
|
||
}
|
||
if (carouselResetFrameRef.current !== null) {
|
||
window.cancelAnimationFrame(carouselResetFrameRef.current);
|
||
}
|
||
},
|
||
[],
|
||
);
|
||
|
||
const handleFeatureOpen = (featureKey: string) => {
|
||
if (featureKey === "script") {
|
||
(onOpenScriptReview ?? onOpenGenerate)();
|
||
return;
|
||
}
|
||
if (featureKey === "model") {
|
||
onOpenGenerate();
|
||
return;
|
||
}
|
||
if (featureKey === "ecommerce") {
|
||
onOpenEcommerce();
|
||
return;
|
||
}
|
||
onOpenGenerate();
|
||
};
|
||
|
||
return (
|
||
<>
|
||
{!splashDismissed && (
|
||
<WelcomeSplash
|
||
onEnter={() => {
|
||
sessionStorage.setItem("omniai:splash-seen", "1");
|
||
setSplashDismissed(true);
|
||
}}
|
||
/>
|
||
)}
|
||
<section className="omni-home page-motion">
|
||
{splashDismissed && (
|
||
<video
|
||
className="omni-home__bg-video"
|
||
src={HOME_BACKGROUND_VIDEO}
|
||
autoPlay
|
||
muted
|
||
loop
|
||
playsInline
|
||
preload="metadata"
|
||
aria-hidden="true"
|
||
/>
|
||
)}
|
||
<div className="omni-home__scrim" aria-hidden="true" />
|
||
<div className="omni-home__shell">
|
||
<section className="omni-home__hero" aria-label="OmniAI 首页">
|
||
<div className="omni-home__copy">
|
||
<h1>OmniAI 创作中心</h1>
|
||
<p>从灵感到成片，一站式整合生成、AIGC与电商，让创作安静专注。</p>
|
||
</div>
|
||
|
||
<div className={`omni-home__carousel${carouselIsResetting ? " is-resetting" : ""}`} aria-label="创作案例轮播">
|
||
<div className="omni-home__carousel-stage">
|
||
<div className="omni-home__carousel-deck">
|
||
{carouselSlotOffsets.map((slotOffset) => {
|
||
const itemIndex = getPositiveModulo(activeSlideIndex + slotOffset, HOME_CAROUSEL_IMAGES.length);
|
||
const slide = HOME_CAROUSEL_IMAGES[itemIndex];
|
||
const visualOffset = slotOffset - (carouselMotion?.direction ?? 0) * (carouselMotion?.progress ?? 0);
|
||
const isActive = visualOffset === 0;
|
||
|
||
if (!slide) return null;
|
||
|
||
return (
|
||
<button
|
||
key={slotOffset}
|
||
type="button"
|
||
className={`omni-home__carousel-card${isActive ? " is-active" : ""}`}
|
||
style={getHomeCarouselCardStyle(visualOffset)}
|
||
aria-label={`切换到${slide.title}`}
|
||
aria-pressed={isActive}
|
||
onClick={() => {
|
||
if (!isActive) startCarouselShift(slotOffset);
|
||
}}
|
||
>
|
||
<img src={slide.imageUrl} alt={slide.title} />
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="omni-home__actions" aria-label="首页入口">
|
||
<button type="button" className="omni-home__entry" onClick={onOpenGenerate}>
|
||
<PlusOutlined />
|
||
<span>新手</span>
|
||
</button>
|
||
<button type="button" className="omni-home__entry omni-home__entry--primary" onClick={onOpenCanvas || onOpenGenerate}>
|
||
<PlayCircleOutlined />
|
||
<span>老手</span>
|
||
</button>
|
||
<button type="button" className="omni-home__entry" onClick={onOpenEcommerce}>
|
||
<ShoppingOutlined />
|
||
<span>电商</span>
|
||
</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<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}
|
||
{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" ? (
|
||
<ModelGenerationShowcase />
|
||
) : feature.key === "ecommerce" ? (
|
||
<EcommerceFeatureShowcase />
|
||
) : (
|
||
<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>
|
||
<ThunderboltOutlined />
|
||
Click To Experience
|
||
</span>
|
||
<h2>一站进入 OmniAI</h2>
|
||
<p>选择入口，直接开始生成、评测、监控或电商作图。</p>
|
||
</div>
|
||
<div className="omni-home__experience-visual" aria-hidden="true">
|
||
<div className="omni-home__experience-line is-top" />
|
||
<div className="omni-home__experience-line is-bottom" />
|
||
<div className="omni-home__experience-routes">
|
||
{HOME_EXPERIENCE_POINTS.map((point) => (
|
||
<span key={point.label} className={`omni-home__experience-route is-${point.tone}`}>
|
||
<b>{point.label}</b>
|
||
<small>{point.meta}</small>
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div className="omni-home__experience-actions">
|
||
<button type="button" className="is-primary" onClick={onOpenGenerate}>
|
||
<PlayCircleOutlined />
|
||
立即体验生成
|
||
</button>
|
||
<button type="button" onClick={onOpenEcommerce}>
|
||
<ShoppingOutlined />
|
||
体验电商生成
|
||
</button>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</section>
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default HomePage;
|