feat: 首页下方剧本评测展示页替换为ScriptReviewShowcase，团队token监控替换为ModelGenerationShowcase

src/features/home/HomePage.tsx

@@ -12,7 +12,11 @@ import type { WebViewKey, WebImageWorkbenchTool } from "../../types";
 import { useScrollEntrance } from "../../hooks/useScrollEntrance";
 import WelcomeSplash from "./WelcomeSplash";
 import ToolboxSection from "./ToolboxSection";
-import ScriptReviewVisual from "./ScriptReviewVisual";
+import ScriptReviewShowcase from "./ScriptReviewShowcase";
+import ModelGenerationShowcase from "./ModelGenerationShowcase";
+import ecommerceTemplate1 from "../../assets/home-features/home-ecommerce-template-1.png";
+import ecommerceTemplate2 from "../../assets/home-features/home-ecommerce-template-2.png";
+import ecommerceTemplate3 from "../../assets/home-features/home-ecommerce-template-3.png";
 
 function ScrollEntrance({ children, className, ...rest }: { children: React.ReactNode; className?: string } & React.HTMLAttributes<HTMLElement>) {
   const { ref, isVisible } = useScrollEntrance<HTMLElement>();
@@ -61,14 +65,14 @@ const HOME_FEATURES = [
     stats: ["六维评分", "质量量化", "逐项优化"],
   },
   {
-    key: "token",
-    eyebrow: "Team Tokens",
-    title: "团队 Token 监控",
-    description: "实时追踪团队 Token 消耗、项目分布和成员使用情况，让预算、配额和成本都能被清楚管理。",
+    key: "model",
+    eyebrow: "AI Generation",
+    title: "模型生成",
+    description: "通过AI模型生成文本、图片、视频，三种模式覆盖全内容类型，Agent对话式交互智能产出。",
     imageUrl: featureTokenImage,
-    actionLabel: "查看面板",
-    icon: <DashboardOutlined />,
-    stats: ["实时概览", "成员明细", "成本分析"],
+    actionLabel: "开始生成",
+    icon: <ThunderboltOutlined />,
+    stats: ["文本生成", "图片生成", "视频生成"],
   },
   {
     key: "ecommerce",
@@ -89,6 +93,34 @@ 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 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;
 
@@ -127,6 +159,43 @@ function getHomeCarouselCardStyle(offset: number): CSSProperties {
   } as CSSProperties;
 }
 
+function EcommerceFeatureShowcase() {
+  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>
+
+      <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="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>
+          </article>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenTokenMonitor, onSelectView, onOpenImageTool }: HomePageProps) {
   const [splashDismissed, setSplashDismissed] = useState(() => sessionStorage.getItem("omniai:splash-seen") === "1");
   const [activeSlideIndex, setActiveSlideIndex] = useState(0);
@@ -205,8 +274,8 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
       (onOpenScriptReview ?? onOpenGenerate)();
       return;
     }
-    if (featureKey === "token") {
-      (onOpenTokenMonitor ?? onOpenGenerate)();
+    if (featureKey === "model") {
+      onOpenGenerate();
       return;
     }
     if (featureKey === "ecommerce") {
@@ -312,7 +381,11 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
             </div>
             <div className="omni-home__feature-visual" aria-hidden="true">
               {feature.key === "script" ? (
-                <ScriptReviewVisual />
+                <ScriptReviewShowcase />
+              ) : feature.key === "model" ? (
+                <ModelGenerationShowcase />
+              ) : feature.key === "ecommerce" ? (
+                <EcommerceFeatureShowcase />
               ) : (
                 <img src={feature.imageUrl} alt="" />
               )}