diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx index 72e1776..b59f897 100644 --- a/src/components/AppShell.tsx +++ b/src/components/AppShell.tsx @@ -75,7 +75,7 @@ function AppShell({ const [navJustActivated, setNavJustActivated] = useState(null); const isAuthView = activeView === "login"; const isImmersiveView = activeView === "agent" || activeView === "avatarConsole"; - const showFloatingNav = !isAuthView && !isImmersiveView && activeView !== "home"; + const showFloatingNav = (!isAuthView || !!session) && !isImmersiveView && activeView !== "home"; const toolSurfaceViews = [ "workbench", "canvas", diff --git a/src/features/digital-human/DigitalHumanPage.tsx b/src/features/digital-human/DigitalHumanPage.tsx index 8db7a91..862dd33 100644 --- a/src/features/digital-human/DigitalHumanPage.tsx +++ b/src/features/digital-human/DigitalHumanPage.tsx @@ -567,7 +567,17 @@ function DigitalHumanPage({ )} {resultVideoUrl && ( -
+ + )} + {resultVideoUrl && ( +
-
)}
diff --git a/src/features/home/HomePage.tsx b/src/features/home/HomePage.tsx index d57e8b2..366ccc8 100644 --- a/src/features/home/HomePage.tsx +++ b/src/features/home/HomePage.tsx @@ -7,16 +7,13 @@ import { ShoppingOutlined, ThunderboltOutlined, } from "@ant-design/icons"; -import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react"; +import { Fragment, useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react"; import type { WebViewKey, WebImageWorkbenchTool } from "../../types"; import { useScrollEntrance } from "../../hooks/useScrollEntrance"; import WelcomeSplash from "./WelcomeSplash"; import ToolboxSection from "./ToolboxSection"; import ScriptReviewShowcase from "./ScriptReviewShowcase"; import ModelGenerationShowcase from "./ModelGenerationShowcase"; -const ecommerceTemplate1 = "https://www.omniai.net.cn/static/home-ecommerce-template-1.png"; -const ecommerceTemplate2 = "https://www.omniai.net.cn/static/home-ecommerce-template-2.png"; -const ecommerceTemplate3 = "https://www.omniai.net.cn/static/home-ecommerce-template-3.png"; function ScrollEntrance({ children, className, ...rest }: { children: React.ReactNode; className?: string } & React.HTMLAttributes) { const { ref, isVisible } = useScrollEntrance(); @@ -54,16 +51,6 @@ const HOME_CAROUSEL_IMAGES = [ ]; const HOME_FEATURES = [ - { - key: "script", - eyebrow: "Script Review", - title: "剧本智能测评", - description: "用六维雷达评分拆解剧本质量，从结构、节奏、人物到商业潜力给出可执行的优化路径。", - imageUrl: featureScriptImage, - actionLabel: "开始测评", - icon: , - stats: ["六维评分", "质量量化", "逐项优化"], - }, { key: "model", eyebrow: "AI Generation", @@ -84,6 +71,16 @@ const HOME_FEATURES = [ icon: , stats: ["多场景", "多角度", "批量输出"], }, + { + key: "script", + eyebrow: "Script Review", + title: "剧本智能测评", + description: "用六维雷达评分拆解剧本质量，从结构、节奏、人物到商业潜力给出可执行的优化路径。", + imageUrl: featureScriptImage, + actionLabel: "开始测评", + icon: , + stats: ["六维评分", "质量量化", "逐项优化"], + }, ]; const HOME_EXPERIENCE_POINTS = [ @@ -93,37 +90,96 @@ const HOME_EXPERIENCE_POINTS = [ { label: "电商", meta: "商品视觉", tone: "amber" }, ]; -const HOME_ECOMMERCE_TEMPLATES = [ - { - title: "卖点详情图", - tag: "详情", - meta: "中文卖点标注", - imageUrl: ecommerceTemplate1, - }, - { - title: "场景主图", - tag: "主图", - meta: "商品氛围构图", - imageUrl: ecommerceTemplate2, - }, - { - title: "虚拟模特", - tag: "模特", - meta: "使用场景延展", - imageUrl: ecommerceTemplate3, - }, +const ECOMMERCE_MATRIX_FEATURES = [ + { icon: "⚡", title: "高效工作流", description: "自动化处理，一键触发" }, + { icon: "⊞", title: "矩阵式产出", description: "多场景、多尺寸批量生成" }, + { icon: "◈", title: "一致性保证", description: "智能保持商品特征与风格统一" }, ]; -const HOME_ECOMMERCE_TOOLS = [ - { title: "主图", meta: "平台首图" }, - { title: "详情", meta: "卖点拆解" }, - { title: "模特", meta: "虚拟模特" }, - { title: "短视频", meta: "首帧方案" }, +const ECOMMERCE_MATRIX_PROCESS = [ + { icon: "📤", label: "上传原图", subLabel: "Upload" }, + { icon: "🔍", label: "AI识别", subLabel: "Recognition" }, + { icon: "⚙️", label: "生成处理", subLabel: "Processing" }, + { icon: "📦", label: "矩阵产出", subLabel: "Output" }, +]; + +const ECOMMERCE_MATRIX_AI_STEPS = ["智能识别主体", "3D虚拟模特", "场景生成", "详情图生成", "批量导出"]; + +type EcommerceMatrixModelCard = { + kind: "model"; + color: "brown" | "green" | "blue"; + tag: string; + tagTone: string; + resolution: string; + square?: false; +}; + +type EcommerceMatrixSceneCard = { + kind: "scene"; + color: "p1" | "p2" | "p3"; + tag: string; + tagTone: string; + resolution: string; + square: true; + variant?: "greenery" | "blue"; +}; + +type EcommerceMatrixLayoutCard = { + kind: "layout"; + color: "c1" | "c2" | "c3"; + tag: string; + tagTone: string; + resolution: string; + square: true; + badge: string; + badgeTone?: "purple"; +}; + +type EcommerceMatrixCard = EcommerceMatrixModelCard | EcommerceMatrixSceneCard | EcommerceMatrixLayoutCard; + +const ECOMMERCE_MATRIX_OUTPUTS: Array<{ + title: string; + subtitle: string; + cards: EcommerceMatrixCard[]; +}> = [ + { + title: "3D 虚拟模特", + subtitle: "Virtual Model", + cards: [ + { kind: "model", color: "brown", tag: "3D", tagTone: "tag-3d", resolution: "1024×1536" }, + { kind: "model", color: "green", tag: "3D", tagTone: "tag-3d", resolution: "1024×1536" }, + { kind: "model", color: "blue", tag: "3D", tagTone: "tag-3d", resolution: "1024×1536" }, + ], + }, + { + title: "场景图", + subtitle: "Scene Image", + cards: [ + { kind: "scene", color: "p1", tag: "场景", tagTone: "tag-scene", resolution: "1024×1024", square: true }, + { kind: "scene", color: "p2", tag: "场景", tagTone: "tag-scene", resolution: "1024×1024", square: true, variant: "greenery" }, + { kind: "scene", color: "p3", tag: "场景", tagTone: "tag-scene", resolution: "1024×1024", square: true, variant: "blue" }, + ], + }, + { + title: "详情图", + subtitle: "Detail Image", + cards: [ + { kind: "layout", color: "c1", tag: "详情", tagTone: "tag-layout", resolution: "1080×1080", square: true, badge: "优雅随行" }, + { kind: "layout", color: "c2", tag: "详情", tagTone: "tag-layout", resolution: "1080×1080", square: true, badge: "限时特惠", badgeTone: "purple" }, + { kind: "layout", color: "c3", tag: "详情", tagTone: "tag-layout", resolution: "1080×1080", square: true, badge: "新品首发" }, + ], + }, ]; const HOME_CAROUSEL_SLOTS = [-4, -3, -2, -1, 0, 1, 2, 3, 4]; const HOME_CAROUSEL_TRANSITION_MS = 860; +type EcommerceFlowLine = { + d: string; + x: number; + y: number; +}; + interface HomeCarouselMotion { direction: number; progress: 0 | 1; @@ -137,9 +193,9 @@ function getHomeCarouselCardStyle(offset: number): CSSProperties { const depth = Math.abs(offset); const direction = Math.sign(offset); const isActive = depth === 0; - const xByDepth = [0, 286, 456, 610, 735, 840]; + const xByDepth = [0, 190, 320, 430, 520, 590]; const yByDepth = [8, -2, -8, -13, -18, -24]; - const scaleByDepth = [1, 0.98, 0.94, 0.91, 0.88, 0.84]; + const scaleByDepth = [1, 1, 1, 1, 1, 1]; const x = direction * (xByDepth[depth] ?? xByDepth[xByDepth.length - 1]!); const y = yByDepth[depth] ?? yByDepth[yByDepth.length - 1]!; const z = isActive ? 90 : 28 - depth; @@ -159,38 +215,253 @@ function getHomeCarouselCardStyle(offset: number): CSSProperties { } as CSSProperties; } -function EcommerceFeatureShowcase() { +function EcommerceMatrixCardVisual({ card }: { card: EcommerceMatrixCard }) { + if (card.kind === "model") { + return ( +
+
+
+
+ ); + } + + if (card.kind === "scene") { + return ( +
+ {card.variant === "greenery" ?
:
} +
+
+
+ ); + } + return ( -
-
-
- -
- 商品图 + 生成要求 - 生成整套电商视觉 -

主图、详情页、虚拟模特、短视频首帧一次整理。

+
+
+
+
+
+
+
+
{card.badge}
+
+
+ ); +} -