feat: 首页功能页样式与组件更新

2026-06-03 17:28:44 +08:00
parent a8266fc475
commit 7b41cf3e87
10 changed files with 3175 additions and 959 deletions
@@ -7,16 +7,13 @@ import {
  ShoppingOutlined,
  ThunderboltOutlined,
 } from "@ant-design/icons";
-import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
 import type { WebViewKey, WebImageWorkbenchTool } from "../../types";
 import { useScrollEntrance } from "../../hooks/useScrollEntrance";
 import WelcomeSplash from "./WelcomeSplash";
 import ToolboxSection from "./ToolboxSection";
 import ScriptReviewShowcase from "./ScriptReviewShowcase";
 import ModelGenerationShowcase from "./ModelGenerationShowcase";
-const ecommerceTemplate1 = "https://www.omniai.net.cn/static/home-ecommerce-template-1.png";
-const ecommerceTemplate2 = "https://www.omniai.net.cn/static/home-ecommerce-template-2.png";
-const ecommerceTemplate3 = "https://www.omniai.net.cn/static/home-ecommerce-template-3.png";

 function ScrollEntrance({ children, className, ...rest }: { children: React.ReactNode; className?: string } & React.HTMLAttributes<HTMLElement>) {
  const { ref, isVisible } = useScrollEntrance<HTMLElement>();
@@ -54,16 +51,6 @@ const HOME_CAROUSEL_IMAGES = [
 ];

 const HOME_FEATURES = [
-  {
-    key: "script",
-    eyebrow: "Script Review",
-    title: "剧本智能测评",
-    description: "用六维雷达评分拆解剧本质量，从结构、节奏、人物到商业潜力给出可执行的优化路径。",
-    imageUrl: featureScriptImage,
-    actionLabel: "开始测评",
-    icon: <FileSearchOutlined />,
-    stats: ["六维评分", "质量量化", "逐项优化"],
-  },
  {
    key: "model",
    eyebrow: "AI Generation",
@@ -84,6 +71,16 @@ const HOME_FEATURES = [
    icon: <ShoppingOutlined />,
    stats: ["多场景", "多角度", "批量输出"],
  },
+  {
+    key: "script",
+    eyebrow: "Script Review",
+    title: "剧本智能测评",
+    description: "用六维雷达评分拆解剧本质量，从结构、节奏、人物到商业潜力给出可执行的优化路径。",
+    imageUrl: featureScriptImage,
+    actionLabel: "开始测评",
+    icon: <FileSearchOutlined />,
+    stats: ["六维评分", "质量量化", "逐项优化"],
+  },
 ];

 const HOME_EXPERIENCE_POINTS = [
@@ -93,37 +90,96 @@ const HOME_EXPERIENCE_POINTS = [
  { label: "电商", meta: "商品视觉", tone: "amber" },
 ];

-const HOME_ECOMMERCE_TEMPLATES = [
-  {
-    title: "卖点详情图",
-    tag: "详情",
-    meta: "中文卖点标注",
-    imageUrl: ecommerceTemplate1,
-  },
-  {
-    title: "场景主图",
-    tag: "主图",
-    meta: "商品氛围构图",
-    imageUrl: ecommerceTemplate2,
-  },
-  {
-    title: "虚拟模特",
-    tag: "模特",
-    meta: "使用场景延展",
-    imageUrl: ecommerceTemplate3,
-  },
+const ECOMMERCE_MATRIX_FEATURES = [
+  { icon: "⚡", title: "高效工作流", description: "自动化处理，一键触发" },
+  { icon: "⊞", title: "矩阵式产出", description: "多场景、多尺寸批量生成" },
+  { icon: "◈", title: "一致性保证", description: "智能保持商品特征与风格统一" },
 ];

-const HOME_ECOMMERCE_TOOLS = [
-  { title: "主图", meta: "平台首图" },
-  { title: "详情", meta: "卖点拆解" },
-  { title: "模特", meta: "虚拟模特" },
-  { title: "短视频", meta: "首帧方案" },
+const ECOMMERCE_MATRIX_PROCESS = [
+  { icon: "📤", label: "上传原图", subLabel: "Upload" },
+  { icon: "🔍", label: "AI识别", subLabel: "Recognition" },
+  { icon: "⚙️", label: "生成处理", subLabel: "Processing" },
+  { icon: "📦", label: "矩阵产出", subLabel: "Output" },
+];
+
+const ECOMMERCE_MATRIX_AI_STEPS = ["智能识别主体", "3D虚拟模特", "场景生成", "详情图生成", "批量导出"];
+
+type EcommerceMatrixModelCard = {
+  kind: "model";
+  color: "brown" | "green" | "blue";
+  tag: string;
+  tagTone: string;
+  resolution: string;
+  square?: false;
+};
+
+type EcommerceMatrixSceneCard = {
+  kind: "scene";
+  color: "p1" | "p2" | "p3";
+  tag: string;
+  tagTone: string;
+  resolution: string;
+  square: true;
+  variant?: "greenery" | "blue";
+};
+
+type EcommerceMatrixLayoutCard = {
+  kind: "layout";
+  color: "c1" | "c2" | "c3";
+  tag: string;
+  tagTone: string;
+  resolution: string;
+  square: true;
+  badge: string;
+  badgeTone?: "purple";
+};
+
+type EcommerceMatrixCard = EcommerceMatrixModelCard | EcommerceMatrixSceneCard | EcommerceMatrixLayoutCard;
+
+const ECOMMERCE_MATRIX_OUTPUTS: Array<{
+  title: string;
+  subtitle: string;
+  cards: EcommerceMatrixCard[];
+}> = [
+  {
+    title: "3D 虚拟模特",
+    subtitle: "Virtual Model",
+    cards: [
+      { kind: "model", color: "brown", tag: "3D", tagTone: "tag-3d", resolution: "1024×1536" },
+      { kind: "model", color: "green", tag: "3D", tagTone: "tag-3d", resolution: "1024×1536" },
+      { kind: "model", color: "blue", tag: "3D", tagTone: "tag-3d", resolution: "1024×1536" },
+    ],
+  },
+  {
+    title: "场景图",
+    subtitle: "Scene Image",
+    cards: [
+      { kind: "scene", color: "p1", tag: "场景", tagTone: "tag-scene", resolution: "1024×1024", square: true },
+      { kind: "scene", color: "p2", tag: "场景", tagTone: "tag-scene", resolution: "1024×1024", square: true, variant: "greenery" },
+      { kind: "scene", color: "p3", tag: "场景", tagTone: "tag-scene", resolution: "1024×1024", square: true, variant: "blue" },
+    ],
+  },
+  {
+    title: "详情图",
+    subtitle: "Detail Image",
+    cards: [
+      { kind: "layout", color: "c1", tag: "详情", tagTone: "tag-layout", resolution: "1080×1080", square: true, badge: "优雅随行" },
+      { kind: "layout", color: "c2", tag: "详情", tagTone: "tag-layout", resolution: "1080×1080", square: true, badge: "限时特惠", badgeTone: "purple" },
+      { kind: "layout", color: "c3", tag: "详情", tagTone: "tag-layout", resolution: "1080×1080", square: true, badge: "新品首发" },
+    ],
+  },
 ];

 const HOME_CAROUSEL_SLOTS = [-4, -3, -2, -1, 0, 1, 2, 3, 4];
 const HOME_CAROUSEL_TRANSITION_MS = 860;

+type EcommerceFlowLine = {
+  d: string;
+  x: number;
+  y: number;
+};
+
 interface HomeCarouselMotion {
  direction: number;
  progress: 0 | 1;
@@ -159,38 +215,253 @@ function getHomeCarouselCardStyle(offset: number): CSSProperties {
  } as CSSProperties;
 }

-function EcommerceFeatureShowcase() {
+function EcommerceMatrixCardVisual({ card }: { card: EcommerceMatrixCard }) {
+  if (card.kind === "model") {
+    return (
+      <div className="mock-model">
+        <div className="silhouette" />
+        <div className={`mock-product-hold ${card.color}`} />
+      </div>
+    );
+  }
+
+  if (card.kind === "scene") {
+    return (
+      <div className="mock-scene">
+        {card.variant === "greenery" ? <div className="obj greenery" /> : <div className="obj decor-item is-soft-blue" />}
+        <div className={`obj table-top${card.variant === "greenery" ? " is-warm" : ""}`} />
+        <div className={`obj prod ${card.color}`} />
+      </div>
+    );
+  }
+
  return (
-    <div className="omni-home-ecommerce-showcase">
-      <div className="omni-home-ecommerce-showcase__depth" />
-      <div className="omni-home-ecommerce-showcase__grain" />
-
-      <div className="omni-home-ecommerce-showcase__prompt">
-        <span>商品图 + 生成要求</span>
-        <strong>生成整套电商视觉</strong>
-        <p>主图、详情页、虚拟模特、短视频首帧一次整理。</p>
+    <div className="mock-layout">
+      <div className="lay-img">
+        <div className={`mini-cup ${card.color}`} />
      </div>
+      <div className="lay-text">
+        <div className={`lay-line title${card.color === "c2" ? " is-short" : card.color === "c3" ? " is-wide" : ""}`} />
+        <div className={`lay-line sub${card.color === "c2" ? " is-medium" : ""}`} />
+        <div className={`lay-line short${card.color === "c3" ? " is-medium" : ""}`} />
+        <div className={`lay-badge${card.badgeTone === "purple" ? " purple" : ""}`}>{card.badge}</div>
+      </div>
+    </div>
+  );
+}

-      <div className="omni-home-ecommerce-showcase__tools" aria-hidden="true">
-        {HOME_ECOMMERCE_TOOLS.map((item) => (
-          <div key={item.title} className="omni-home-ecommerce-showcase__tool">
-            <b>{item.title}</b>
-            <small>{item.meta}</small>
+function EcommerceFeatureShowcase() {
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const inputCardRef = useRef<HTMLDivElement | null>(null);
+  const outputGroupRefs = useRef<Array<HTMLDivElement | null>>([]);
+  const [flowLines, setFlowLines] = useState<EcommerceFlowLine[]>(() =>
+    ECOMMERCE_MATRIX_OUTPUTS.map(() => ({ d: "", x: 0, y: 0 })),
+  );
+
+  useEffect(() => {
+    let frameId: number | null = null;
+
+    const updateFlowLines = () => {
+      const root = rootRef.current;
+      const inputCard = inputCardRef.current;
+      if (!root || !inputCard) return;
+
+      const rootRect = root.getBoundingClientRect();
+      const inputRect = inputCard.getBoundingClientRect();
+      const sx = inputRect.right - rootRect.left;
+      const sy = inputRect.top - rootRect.top + inputRect.height / 2;
+      const cornerRadius = 24;
+
+      const nextLines = outputGroupRefs.current.slice(0, ECOMMERCE_MATRIX_OUTPUTS.length).map((group) => {
+        if (!group) return { d: "", x: 0, y: 0 };
+
+        const groupRect = group.getBoundingClientRect();
+        const tx = groupRect.left - rootRect.left;
+        const ty = groupRect.top - rootRect.top + groupRect.height / 2;
+        const totalDistance = tx - sx;
+        const splitX = sx + totalDistance * 0.3;
+        const direction = ty > sy ? 1 : ty < sy ? -1 : 0;
+        const verticalDistance = Math.abs(ty - sy);
+        const resolvedRadius = Math.min(cornerRadius, verticalDistance / 2);
+
+        const d =
+          direction === 0
+            ? `M ${sx} ${sy} L ${tx} ${ty}`
+            : `M ${sx} ${sy} L ${splitX} ${sy} Q ${splitX + resolvedRadius} ${sy}, ${splitX + resolvedRadius} ${
+                sy + direction * resolvedRadius
+              } L ${splitX + resolvedRadius} ${ty - direction * resolvedRadius} Q ${splitX + resolvedRadius} ${ty}, ${
+                splitX + resolvedRadius * 2
+              } ${ty} L ${tx} ${ty}`;
+
+        return { d, x: tx, y: ty };
+      });
+
+      setFlowLines(nextLines);
+    };
+
+    const scheduleUpdate = () => {
+      if (frameId !== null) {
+        window.cancelAnimationFrame(frameId);
+      }
+      frameId = window.requestAnimationFrame(updateFlowLines);
+    };
+
+    scheduleUpdate();
+    window.addEventListener("resize", scheduleUpdate);
+
+    const resizeObserver = new ResizeObserver(scheduleUpdate);
+    if (rootRef.current) {
+      resizeObserver.observe(rootRef.current);
+    }
+
+    return () => {
+      if (frameId !== null) {
+        window.cancelAnimationFrame(frameId);
+      }
+      window.removeEventListener("resize", scheduleUpdate);
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  return (
+    <div ref={rootRef} className="omni-home-ecommerce-matrix">
+      <div className="bg-base" />
+      <div className="bg-grid" />
+      <div className="bg-stars" />
+      <div className="bg-vignette" />
+      <div className="bg-noise" />
+
+      <div className="page">
+        <div className="left-panel">
+          <h3 className="hero-title">
+            一张原图
+            <br />
+            矩阵生产全场景图文
+          </h3>
+
+          <p className="hero-desc">
+            从商品原图到3D虚拟模特、场景图、详情图
+            <br />
+            AI工作流自动化，批量生成，高效出图
+          </p>
+
+          <div className="features">
+            {ECOMMERCE_MATRIX_FEATURES.map((item) => (
+              <div key={item.title} className="feature-item">
+                <div className="feature-icon">{item.icon}</div>
+                <div className="feature-text">
+                  <h4>{item.title}</h4>
+                  <p>{item.description}</p>
+                </div>
+              </div>
+            ))}
          </div>
-        ))}
-      </div>

-      <div className="omni-home-ecommerce-showcase__gallery" aria-hidden="true">
-        {HOME_ECOMMERCE_TEMPLATES.map((item, index) => (
-          <article key={item.title} className={`omni-home-ecommerce-showcase__shot is-${index + 1}`}>
-            <img src={item.imageUrl} alt="" />
-            <div>
-              <span>{item.tag}</span>
-              <strong>{item.title}</strong>
-              <small>{item.meta}</small>
+          <div className="process-flow">
+            {ECOMMERCE_MATRIX_PROCESS.map((item, index) => (
+              <Fragment key={item.label}>
+                {index > 0 ? <span className="process-arrow">▸</span> : null}
+                <div className="process-step">
+                  <span className="step-icon">{item.icon}</span>
+                  <span className="step-label">{item.label}</span>
+                  <span className="step-sub">{item.subLabel}</span>
+                </div>
+              </Fragment>
+            ))}
+          </div>
+        </div>
+
+        <div className="center-panel">
+          <div ref={inputCardRef} className="input-card">
+            <div className="input-card-header">
+              <span className="input-card-label">商品原图 Input</span>
+              <span className="input-card-res">3000×3000</span>
            </div>
-          </article>
-        ))}
+            <div className="input-card-img">
+              <div className="product-placeholder">
+                <div className="cup cup-1">
+                  <div className="cup-lid" />
+                  <div className="cup-straw" />
+                  <div className="cup-tag">DRINK MORE</div>
+                </div>
+                <div className="cup cup-2">
+                  <div className="cup-lid" />
+                  <div className="cup-straw" />
+                  <div className="cup-tag">DRINK MORE</div>
+                </div>
+                <div className="cup cup-3">
+                  <div className="cup-lid" />
+                  <div className="cup-straw" />
+                  <div className="cup-tag">DRINK MORE</div>
+                </div>
+                <div className="books">
+                  <div className="book" />
+                  <div className="book" />
+                  <div className="book" />
+                  <div className="book" />
+                </div>
+                <div className="table-surface" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="right-panel">
+          <div className="ai-node">
+            <div className="ai-node-title">AI 工作流</div>
+            <div className="ai-node-list">
+              {ECOMMERCE_MATRIX_AI_STEPS.map((item) => (
+                <div key={item} className="ai-node-item">
+                  {item}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {ECOMMERCE_MATRIX_OUTPUTS.map((group, groupIndex) => (
+            <div
+              key={group.title}
+              ref={(node) => {
+                outputGroupRefs.current[groupIndex] = node;
+              }}
+              className="output-group"
+            >
+              <div className="output-label">
+                <h4>{group.title}</h4>
+                <p>{group.subtitle}</p>
+              </div>
+              <div className="output-cards">
+                {group.cards.map((card, cardIndex) => (
+                  <div key={`${group.title}-${cardIndex}`} className={`output-card${card.square ? " square" : ""}`}>
+                    <div className="output-card-img">
+                      <span className={`output-card-tag ${card.tagTone}`}>{card.tag}</span>
+                      <EcommerceMatrixCardVisual card={card} />
+                      <span className="output-card-res">{card.resolution}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <svg className="flow-svg" aria-hidden="true">
+          <defs>
+            <filter id="home-ecommerce-flow-glow">
+              <feGaussianBlur stdDeviation="2" result="blur" />
+              <feMerge>
+                <feMergeNode in="blur" />
+                <feMergeNode in="SourceGraphic" />
+              </feMerge>
+            </filter>
+          </defs>
+          {flowLines.map((line, index) => (
+            <Fragment key={index}>
+              <path className={`flow-path flow-path-${index + 1}`} d={line.d} filter="url(#home-ecommerce-flow-glow)" />
+              <circle className={`flow-dot flow-dot-${index + 1}`} cx={line.x} cy={line.y} r="4" filter="url(#home-ecommerce-flow-glow)" />
+            </Fragment>
+          ))}
+        </svg>
      </div>
    </div>
  );
@@ -367,19 +638,21 @@ function HomePage({ onOpenGenerate, onOpenCanvas, onOpenEcommerce, onOpenScriptR
      <main className="omni-home__feature-pages" aria-label="OmniAI 功能介绍">
        {HOME_FEATURES.map((feature, index) => (
          <section key={feature.key} className={`omni-home__feature-page is-${feature.key}${index % 2 ? " is-alt" : ""}`}>
-            <div className="omni-home__feature-copy">
-              <span>
-                {feature.icon}
-                {feature.eyebrow}
-              </span>
-              <h2>{feature.title}</h2>
-              <p>{feature.description}</p>
-              <button type="button" onClick={() => handleFeatureOpen(feature.key)}>
-                {feature.actionLabel}
-                <ArrowRightOutlined />
-              </button>
-            </div>
-            <div className="omni-home__feature-visual" aria-hidden="true">
+            {feature.key !== "script" && feature.key !== "model" && feature.key !== "ecommerce" ? (
+              <div className="omni-home__feature-copy">
+                <span>
+                  {feature.icon}
+                  {feature.eyebrow}
+                </span>
+                <h2>{feature.title}</h2>
+                <p>{feature.description}</p>
+                <button type="button" onClick={() => handleFeatureOpen(feature.key)}>
+                  {feature.actionLabel}
+                  <ArrowRightOutlined />
+                </button>
+              </div>
+            ) : null}
+            <div className="omni-home__feature-visual" aria-hidden={feature.key !== "script" && feature.key !== "model" && feature.key !== "ecommerce"}>
              {feature.key === "script" ? (
                <ScriptReviewShowcase />
              ) : feature.key === "model" ? (
@@ -390,14 +663,18 @@ function HomePage({ onOpenGenerate, onOpenCanvas, onOpenEcommerce, onOpenScriptR
                <img src={feature.imageUrl} alt="" />
              )}
            </div>
-            <div className="omni-home__feature-stats" aria-hidden="true">
-              {feature.stats.map((item) => (
-                <span key={item}>{item}</span>
-              ))}
-            </div>
+            {feature.key !== "script" && feature.key !== "model" && feature.key !== "ecommerce" ? (
+              <div className="omni-home__feature-stats" aria-hidden="true">
+                {feature.stats.map((item) => (
+                  <span key={item}>{item}</span>
+                ))}
+              </div>
+            ) : null}
          </section>
        ))}

+        <ToolboxSection onSelectView={onSelectView} onOpenImageTool={onOpenImageTool} />
+
        <section className="omni-home__experience" aria-label="点击体验">
          <div className="omni-home__experience-copy">
            <span>
@@ -430,8 +707,6 @@ function HomePage({ onOpenGenerate, onOpenCanvas, onOpenEcommerce, onOpenScriptR
            </button>
          </div>
        </section>
-
-        <ToolboxSection onSelectView={onSelectView} onOpenImageTool={onOpenImageTool} />
      </main>
    </section>
    </>