2026-06-08 05:56:38 +00:00
6 changed files with 143 additions and 56 deletions
@@ -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");
@@ -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 = [
-    "workbench",
-    "canvas",
-    "more",
-    "scriptTokens",
-    "tokenUsage",
-    "ecommerceTemplates",
-    "sizeTemplate",
-    "imageWorkbench",
-    "resolutionUpscale",
-    "digitalHuman",
-    "dialogGenerator",
-    "avatarConsole",
-    "characterMix",
-  ] as WebViewKey[];
-  const showPageScrollActions = showFloatingNav && !toolSurfaceViews.includes(activeView);
+  const showPageScrollActions = showFloatingNav && !TOOL_SURFACE_VIEW_SET.has(activeView);

  const visibleNavItems = useMemo(
    () => {
-      const orderedKeys: WebViewKey[] = [
-        "workbench",
-        "ecommerce",
-        "sizeTemplate",
-        "canvas",
-        "scriptTokens",
-        "tokenUsage",
-        "community",
-        "assets",
-        "more",
-      ];
-      return orderedKeys
+      return PRIMARY_NAV_ORDER
        .map((key) => navItems.find((item) => item.key === key))
        .filter((item): item is WebNavItem => Boolean(item));
    },
@@ -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>
@@ -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 hotUploadedRatioOption = cloneOutput === "hot" ? formatUploadedImageRatio(cloneReferenceImages[0]) : null;
-  const baseCloneRatioOptions = getPlatformRatioOptions(platform, cloneOutput);
-  const cloneRatioOptions = hotUploadedRatioOption
+  const productSetRatioOptions = useMemo(
+    () => getPlatformRatioOptions(productSetPlatform, productSetOutput),
+    [productSetOutput, productSetPlatform],
+  );
+  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;
-  const productSetLanguageOptions = getPlatformLanguageOptions(productSetPlatform, productSetMarket);
-  const cloneLanguageOptions = getPlatformLanguageOptions(platform, market);
-  const detailLanguageOptions = getPlatformLanguageOptions(detailPlatform, detailMarket);
+      : baseCloneRatioOptions,
+    [baseCloneRatioOptions, hotUploadedRatioOption],
+  );
+  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)}
-              productImageFiles={productImages.map((img) => img.file)}
+              productImageDataUrls={ecommerceVideoImageDataUrls}
+              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"}
@@ -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";
@@ -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 {
-    import("../components/toast/toastStore").then((m) => m.toast(msg, "success"));
-  } catch { /* toast system not loaded */ }
+  toast(msg, "success");
 }

 /** Call once on app init to pre-warm permission. */