src/App.tsx

@@ -127,6 +127,27 @@ const VIEW_KEYS = new Set<WebViewKey>([
 ]);
 
 const PUBLIC_VIEW_SET = new Set<WebViewKey>(["home", "login", "community", "more", "dialogGenerator", "userAgreement", "privacyPolicy", "not-found"]);
+const LEGACY_PAGE_STYLE_VIEWS = new Set<WebViewKey>([
+  "login",
+  "workbench",
+  "canvas",
+  "community",
+  "communityReview",
+  "communityCaseAdd",
+  "assets",
+  "ecommerce",
+  "ecommerceHub",
+  "digitalHuman",
+  "characterMix",
+  "more",
+]);
+
+let legacyPageStylesPromise: Promise<unknown> | null = null;
+
+function loadLegacyPageStyles(): Promise<unknown> {
+  legacyPageStylesPromise ??= import("./styles/pages/legacy-pages.css");
+  return legacyPageStylesPromise;
+}
 
 function normalizeViewKey(rawView: string): WebViewKey {
   const normalized =
@@ -357,6 +378,12 @@ function App() {
     if (isEcommerceActive && !ecommerceEverMounted) setEcommerceEverMounted(true);
   }, [isEcommerceActive]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  useEffect(() => {
+    if (LEGACY_PAGE_STYLE_VIEWS.has(activeView) || ecommerceEverMounted) {
+      void loadLegacyPageStyles();
+    }
+  }, [activeView, ecommerceEverMounted]);
+
   // Dismiss boot splash after first render
   useEffect(() => {
     const splash = document.getElementById("app-boot-splash");

src/components/AppShell.tsx

@@ -41,6 +41,32 @@ interface AppShellProps {
 }
 
 const BRAND_LOGO_URL = ossAssets.brand.logo;
+const TOOL_SURFACE_VIEW_SET = new Set<WebViewKey>([
+  "workbench",
+  "canvas",
+  "more",
+  "scriptTokens",
+  "tokenUsage",
+  "ecommerceTemplates",
+  "sizeTemplate",
+  "imageWorkbench",
+  "resolutionUpscale",
+  "digitalHuman",
+  "dialogGenerator",
+  "avatarConsole",
+  "characterMix",
+] as WebViewKey[]);
+const PRIMARY_NAV_ORDER: WebViewKey[] = [
+  "workbench",
+  "ecommerce",
+  "sizeTemplate",
+  "canvas",
+  "scriptTokens",
+  "tokenUsage",
+  "community",
+  "assets",
+  "more",
+];
 
 function formatBalance(cents: number): string {
   const value = Math.max(0, cents) / 100;
@@ -76,37 +102,11 @@ function AppShell({
   const isAuthView = activeView === "login";
   const isImmersiveView = activeView === "agent" || activeView === "avatarConsole";
   const showFloatingNav = (!isAuthView || !!session) && !isImmersiveView && activeView !== "home";
-  const toolSurfaceViews = [
+  const showPageScrollActions = showFloatingNav && !TOOL_SURFACE_VIEW_SET.has(activeView);
-    "workbench",
-    "canvas",
-    "more",
-    "scriptTokens",
-    "tokenUsage",
-    "ecommerceTemplates",
-    "sizeTemplate",
-    "imageWorkbench",
-    "resolutionUpscale",
-    "digitalHuman",
-    "dialogGenerator",
-    "avatarConsole",
-    "characterMix",
-  ] as WebViewKey[];
-  const showPageScrollActions = showFloatingNav && !toolSurfaceViews.includes(activeView);
 
   const visibleNavItems = useMemo(
     () => {
-      const orderedKeys: WebViewKey[] = [
+      return PRIMARY_NAV_ORDER
-        "workbench",
-        "ecommerce",
-        "sizeTemplate",
-        "canvas",
-        "scriptTokens",
-        "tokenUsage",
-        "community",
-        "assets",
-        "more",
-      ];
-      return orderedKeys
         .map((key) => navItems.find((item) => item.key === key))
         .filter((item): item is WebNavItem => Boolean(item));
     },

src/features/canvas/CanvasPage.tsx

@@ -578,7 +578,17 @@ function CanvasPage({
   // Save immediately when user leaves page or switches tab (placed after runCanvasAutoSave definition)
   // — see useEffect below near runCanvasAutoSave
 
-  const canvasAssets = serverAssets.filter((asset) => asset.imageUrl);
+  const canvasAssets = useMemo(
+    () => serverAssets.filter((asset) => asset.imageUrl),
+    [serverAssets],
+  );
+  const assetCountsByCategory = useMemo(() => {
+    const counts = new Map<string, number>();
+    for (const asset of serverAssets) {
+      counts.set(asset.type, (counts.get(asset.type) ?? 0) + 1);
+    }
+    return counts;
+  }, [serverAssets]);
   const shouldShowEmptyProjectState =
     projectsLoaded && projects.length === 0 && !projectId && workflow.source === "blank" && workflow.nodes.length === 0;
   const isWaitingForProjects = isAuthenticated && !projectsLoaded;
@@ -2640,10 +2650,13 @@ function CanvasPage({
     setConnectorDrag(null);
   };
 
-  const collapsedPackageNodeKeys = new Set(
+  const collapsedPackageNodeKeys = useMemo(
+    () => new Set(
       nodePackages.flatMap((nodePackage) =>
         nodePackage.collapsed ? nodePackage.nodeIds.map((node) => getCanvasSelectionKey(node)) : []
       )
+    ),
+    [nodePackages],
   );
   const isNodeCollapsedInPackage = (kind: CanvasNodeKind, id: string) =>
     collapsedPackageNodeKeys.has(getCanvasSelectionKey({ kind, id }));
@@ -2684,6 +2697,18 @@ function CanvasPage({
       return positionedLink ? [positionedLink] : [];
     }),
   ].filter((link) => !isLinkCollapsedInPackage(link));
+  const visibleTextNodes = useMemo(
+    () => textNodes.filter((textNode) => !isNodeCollapsedInPackage("text", textNode.id)),
+    [collapsedPackageNodeKeys, textNodes],
+  );
+  const visibleImageNodes = useMemo(
+    () => imageNodes.filter((imageNode) => !isNodeCollapsedInPackage("image", imageNode.id)),
+    [collapsedPackageNodeKeys, imageNodes],
+  );
+  const visibleVideoNodes = useMemo(
+    () => videoNodes.filter((videoNode) => !isNodeCollapsedInPackage("video", videoNode.id)),
+    [collapsedPackageNodeKeys, videoNodes],
+  );
   const pendingLinkPreview =
     pendingLinkPort && pendingLinkPreviewPoint
       ? (() => {
@@ -4002,7 +4027,7 @@ function CanvasPage({
               ) : null}
             </svg>
           ) : null}
-          {textNodes.filter((textNode) => !isNodeCollapsedInPackage("text", textNode.id)).map((textNode) => {
+          {visibleTextNodes.map((textNode) => {
             const textNodeSelected = isSelectedNode("text", textNode.id);
             const textNodeActive = isActiveSelectedNode("text", textNode.id);
             const textNodeResizing = nodeResizeDrag?.kind === "text" && nodeResizeDrag.nodeId === textNode.id;
@@ -4270,7 +4295,7 @@ function CanvasPage({
             </div>
             );
           })}
-          {imageNodes.filter((imageNode) => !isNodeCollapsedInPackage("image", imageNode.id)).map((imageNode) => {
+          {visibleImageNodes.map((imageNode) => {
             const imageNodeSelected = isSelectedNode("image", imageNode.id);
             const imageNodeActive = isActiveSelectedNode("image", imageNode.id);
             const imageNodeResizing = nodeResizeDrag?.kind === "image" && nodeResizeDrag.nodeId === imageNode.id;
@@ -4774,7 +4799,7 @@ function CanvasPage({
             </div>
             );
           })}
-          {videoNodes.filter((videoNode) => !isNodeCollapsedInPackage("video", videoNode.id)).map((videoNode) => {
+          {visibleVideoNodes.map((videoNode) => {
             const videoNodeSelected = isSelectedNode("video", videoNode.id);
             const videoNodeActive = isActiveSelectedNode("video", videoNode.id);
             const videoNodeResizing = nodeResizeDrag?.kind === "video" && nodeResizeDrag.nodeId === videoNode.id;
@@ -5485,7 +5510,7 @@ function CanvasPage({
                             onClick={() => setSelectedExistingCategory(category.key)}
                           >
                             {category.label}
-                            <span>{serverAssets.filter((asset) => asset.type === category.key).length} 个素材</span>
+                            <span>{assetCountsByCategory.get(category.key) ?? 0} 个素材</span>
                           </button>
                         ))}
                       </div>

src/features/ecommerce/EcommercePage.tsx

@@ -901,25 +901,58 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   const [selectedDetailModules, setSelectedDetailModules] = useState<string[]>(defaultDetailModuleIds);
   const [detailStatus, setDetailStatus] = useState<DetailStatus>("idle");
   const [detailResultUrl, setDetailResultUrl] = useState<string | null>(null);
-  const productSetRatioOptions = getPlatformRatioOptions(productSetPlatform, productSetOutput);
+  const productSetRatioOptions = useMemo(
-  const hotUploadedRatioOption = cloneOutput === "hot" ? formatUploadedImageRatio(cloneReferenceImages[0]) : null;
+    () => getPlatformRatioOptions(productSetPlatform, productSetOutput),
-  const baseCloneRatioOptions = getPlatformRatioOptions(platform, cloneOutput);
+    [productSetOutput, productSetPlatform],
-  const cloneRatioOptions = hotUploadedRatioOption
+  );
+  const hotUploadedRatioOption = useMemo(
+    () => cloneOutput === "hot" ? formatUploadedImageRatio(cloneReferenceImages[0]) : null,
+    [cloneOutput, cloneReferenceImages],
+  );
+  const baseCloneRatioOptions = useMemo(
+    () => getPlatformRatioOptions(platform, cloneOutput),
+    [cloneOutput, platform],
+  );
+  const cloneRatioOptions = useMemo(
+    () => hotUploadedRatioOption
       ? getUniqueRatioOptions([...baseCloneRatioOptions, hotUploadedRatioOption])
-    : baseCloneRatioOptions;
+      : baseCloneRatioOptions,
-  const productSetLanguageOptions = getPlatformLanguageOptions(productSetPlatform, productSetMarket);
+    [baseCloneRatioOptions, hotUploadedRatioOption],
-  const cloneLanguageOptions = getPlatformLanguageOptions(platform, market);
+  );
-  const detailLanguageOptions = getPlatformLanguageOptions(detailPlatform, detailMarket);
+  const productSetLanguageOptions = useMemo(
+    () => getPlatformLanguageOptions(productSetPlatform, productSetMarket),
+    [productSetMarket, productSetPlatform],
+  );
+  const cloneLanguageOptions = useMemo(
+    () => getPlatformLanguageOptions(platform, market),
+    [market, platform],
+  );
+  const detailLanguageOptions = useMemo(
+    () => getPlatformLanguageOptions(detailPlatform, detailMarket),
+    [detailMarket, detailPlatform],
+  );
   const ecommerceMentionImages: MentionImageOption[] = [
     ...productImages.map((image, index) => ({ ...image, label: `商品图 ${index + 1}` })),
     ...cloneReferenceImages.map((image, index) => ({ ...image, label: `参考图 ${index + 1}` })),
   ];
 
+  const ecommerceVideoImageDataUrls = useMemo(
+    () => productImages.map((img) => img.src),
+    [productImages],
+  );
+  const ecommerceVideoImageFiles = useMemo(
+    () => productImages.map((img) => img.file),
+    [productImages],
+  );
+
   const selectedProductSetOutput =
     productSetOutputOptions.find((option) => option.key === productSetOutput) ?? productSetOutputOptions[0]!;
   const selectedCloneOutput = cloneOutputOptions.find((option) => option.key === cloneOutput) ?? cloneOutputOptions[1]!;
   const productSetPreviewReady = productSetStatus === "done";
-  const cloneSetTotal = Object.values(cloneSetCounts).reduce((sum, value) => sum + value, 0);
+  const cloneSetTotal = useMemo(
+    () => Object.values(cloneSetCounts).reduce((sum, value) => sum + value, 0),
+    [cloneSetCounts],
+  );
   const canGenerateSet = setImages.length > 0 && productSetStatus !== "generating";
   const canGenerate = (cloneOutput === "video-outfit"
     ? Boolean(videoOutfitVideoFile && videoOutfitRefFile)
@@ -928,9 +961,12 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   const canGenerateDetail = detailProductImages.length > 0 && detailStatus !== "generating";
   const cloneVideoDurationProgress =
     ((cloneVideoDuration - cloneVideoDurationMin) / (cloneVideoDurationMax - cloneVideoDurationMin)) * 100;
-  const cloneVideoDurationStyle: CSSProperties = {
+  const cloneVideoDurationStyle: CSSProperties = useMemo(
+    () => ({
       "--clone-video-duration-progress": `${cloneVideoDurationProgress}%`,
-  } as CSSProperties;
+    }) as CSSProperties,
+    [cloneVideoDurationProgress],
+  );
 
   const trackEcommerceTask = (taskId: string) => {
     activeEcommerceTaskIdsRef.current.add(taskId);
@@ -2647,8 +2683,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
           <main className="product-clone-preview product-clone-preview--video" style={{ padding: 0, overflow: "hidden" }}>
             <EcommerceVideoWorkspace
               isAuthenticated={Boolean((_props as Record<string, unknown>).isAuthenticated)}
-              productImageDataUrls={productImages.map((img) => img.src)}
+              productImageDataUrls={ecommerceVideoImageDataUrls}
-              productImageFiles={productImages.map((img) => img.file)}
+              productImageFiles={ecommerceVideoImageFiles}
               requirement={requirement}
               platform={platform}
               aspectRatio={ratio.includes("9：16") || ratio.includes("9:16") ? "9:16" : ratio.includes("16：9") || ratio.includes("16:9") ? "16:9" : ratio.includes("3：4") || ratio.includes("3:4") ? "3:4" : "9:16"}

src/styles/index.css

@@ -12,7 +12,6 @@
 @import "./pages/more-tools.css";
 @import "./pages/studio-layout.css";
 @import "./pages/size-template.css";
-@import "./pages/legacy-pages.css";
 @import "./components/recharge-modal.css";
 @import "./components/dropzone.css";
 @import "./components/skeleton.css";

src/utils/generationNotifier.ts

@@ -3,6 +3,8 @@
  * Falls back gracefully when Notification API is unavailable.
  */
 
+import { toast } from "../components/toast/toastStore";
+
 let permissionGranted = false;
 
 async function requestPermission(): Promise<boolean> {
@@ -35,9 +37,7 @@ export function notifyTaskCompleted(label: string, mode: "image" | "video" = "im
 
 // Use the existing toast system for in-app notifications
 function dispatchGenToast(msg: string) {
-  try {
+  toast(msg, "success");
-    import("../components/toast/toastStore").then((m) => m.toast(msg, "success"));
-  } catch { /* toast system not loaded */ }
 }
 
 /** Call once on app init to pre-warm permission. */