From 3d4001353d2d348399cf5855dd07e61c12b0472e Mon Sep 17 00:00:00 2001
From: Stringadmin <admin@omniai.net.cn>
Date: Fri, 5 Jun 2026 19:45:56 +0800
Subject: [PATCH] perf: route ecommerce utility styles on demand

---
 src/App.tsx                                   | 30 +++++++++++++++++++
 src/features/ecommerce/EcommercePage.tsx      |  1 +
 .../ecommerce/EcommerceTemplatesPage.tsx      |  1 +
 .../size-template/SizeTemplatePage.tsx        |  2 ++
 src/styles/index.css                          |  1 -
 5 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index 992f62f..cdb050f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -51,6 +51,7 @@ const AvatarConsolePage = lazy(() => import("./features/digital-human/AvatarCons
 const DigitalHumanPage = lazy(() => import("./features/digital-human/DigitalHumanPage"));
 const DialogGeneratorPage = lazy(() => import("./features/dialog-generator/DialogGeneratorPage"));
 const EcommercePage = lazy(() => import("./features/ecommerce/EcommercePage"));
+const EcommerceTemplatesPage = lazy(() => import("./features/ecommerce/EcommerceTemplatesPage"));
 const HomePage = lazy(() => import("./features/home/HomePage"));
 const ImageWorkbenchPage = lazy(() => import("./features/image-workbench/ImageWorkbenchPage"));
 const MorePage = lazy(() => import("./features/more/MorePage"));
@@ -61,6 +62,7 @@ const ResolutionUpscalePage = lazy(() => import("./features/resolution-upscale/R
 const WatermarkRemovalPage = lazy(() => import("./features/watermark-removal/WatermarkRemovalPage"));
 const SubtitleRemovalPage = lazy(() => import("./features/subtitle-removal/SubtitleRemovalPage"));
 const ScriptTokensPage = lazy(() => import("./features/script-tokens/ScriptTokensPage"));
+const SizeTemplatePage = lazy(() => import("./features/size-template/SizeTemplatePage"));
 const TokenUsagePage = lazy(() => import("./features/script-tokens/TokenUsagePage"));
 const WorkbenchPage = lazy(() => import("./features/workbench/WorkbenchPage"));
 import type { WorkbenchResultActionPayload } from "./features/workbench/WorkbenchPage";
@@ -106,6 +108,8 @@ const VIEW_KEYS = new Set<WebViewKey>([
   "assets",
   "ecommerceHub",
   "ecommerce",
+  "ecommerceTemplates",
+  "sizeTemplate",
   "scriptTokens",
   "tokenUsage",
   "imageWorkbench",
@@ -137,6 +141,8 @@ const LEGACY_PAGE_STYLE_VIEWS = new Set<WebViewKey>([
   "assets",
   "ecommerce",
   "ecommerceHub",
+  "ecommerceTemplates",
+  "sizeTemplate",
   "digitalHuman",
   "characterMix",
   "more",
@@ -1176,6 +1182,30 @@ function App() {
       case "ecommerce":
       case "ecommerceHub":
         return null;
+      case "ecommerceTemplates":
+        return (
+          <EcommerceTemplatesPage
+            projects={projects}
+            onOpenMore={() => handleSetView("more")}
+            onOpenEcommerce={() => handleSetView("ecommerce")}
+            onSelectTemplate={(template) => {
+              setPendingEcommerceTemplate(template);
+              handleSetView("ecommerce");
+            }}
+            onStartCreate={handleStartTemplateCanvasCreate}
+            onOpenProject={handleOpenProject}
+            onDeleteProject={handleDeleteProject}
+          />
+        );
+      case "sizeTemplate":
+        return (
+          <SizeTemplatePage
+            isAuthenticated={Boolean(session)}
+            onOpenMore={() => handleSetView("more")}
+            onOpenEcommerce={() => handleSetView("ecommerce")}
+            onSelectView={handleSetView}
+          />
+        );
       case "digitalHuman":
         return (
           <DigitalHumanPage
diff --git a/src/features/ecommerce/EcommercePage.tsx b/src/features/ecommerce/EcommercePage.tsx
index a32b086..9d975a8 100644
--- a/src/features/ecommerce/EcommercePage.tsx
+++ b/src/features/ecommerce/EcommercePage.tsx
@@ -14,6 +14,7 @@ import {
 } from "@ant-design/icons";
 import { useEffect, useMemo, useRef, useState, type CSSProperties, type ChangeEvent, type DragEvent, type ReactNode } from "react";
 import "../../styles/pages/ecommerce.css";
+import "../../styles/pages/local-theme-parity.css";
 import { ossAssets } from "../../data/ossAssets";
 import { EcommerceProgressBar } from "./EcommerceProgressBar";
 import ImageMentionMenu, { getImageMentionQuery, insertImageMentionValue, type MentionImageOption } from "./ImageMentionMenu";
diff --git a/src/features/ecommerce/EcommerceTemplatesPage.tsx b/src/features/ecommerce/EcommerceTemplatesPage.tsx
index 65362d9..e77b499 100644
--- a/src/features/ecommerce/EcommerceTemplatesPage.tsx
+++ b/src/features/ecommerce/EcommerceTemplatesPage.tsx
@@ -10,6 +10,7 @@ import {
 import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
 import "../../styles/pages/image-workbench.css";
 import "../../styles/pages/ecommerce.css";
+import "../../styles/pages/local-theme-parity.css";
 import type { WebProjectSummary } from "../../types";
 import { useDebounce } from "../../hooks/useDebounce";
 import { templateCarouselCases, templateCases, templateCategories, type TemplateCase } from "./ecommerceTemplates";
diff --git a/src/features/size-template/SizeTemplatePage.tsx b/src/features/size-template/SizeTemplatePage.tsx
index 7651bbc..cc32122 100644
--- a/src/features/size-template/SizeTemplatePage.tsx
+++ b/src/features/size-template/SizeTemplatePage.tsx
@@ -9,7 +9,9 @@ import {
 import { useEffect, useMemo, useRef, useState, type ChangeEvent, type DragEvent } from "react";
 import type { WebViewKey } from "../../types";
 import ImageMentionMenu, { getImageMentionQuery, insertImageMentionValue, type MentionImageOption } from "../ecommerce/ImageMentionMenu";
+import "../../styles/pages/ecommerce.css";
 import "../../styles/pages/size-template.css";
+import "../../styles/pages/local-theme-parity.css";
 
 interface SizeTemplatePageProps {
   isAuthenticated?: boolean;
diff --git a/src/styles/index.css b/src/styles/index.css
index 278aa7c..d1bbf12 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -9,4 +9,3 @@
 @import "./components/page-transition.css";
 @import "./components/motion.css";
 @import "./themes/dark-green.css";
-@import "./pages/local-theme-parity.css";