From 60607053457c7ad0f67a9983aa9ef53ad6f6903e Mon Sep 17 00:00:00 2001 From: Stringadmin Date: Fri, 5 Jun 2026 17:19:38 +0800 Subject: [PATCH] perf: split page css from main bundle --- src/components/NotFoundPage.tsx | 1 + src/features/agent/AgentPage.tsx | 1 + src/features/assets/AssetsPage.tsx | 1 + src/features/canvas/CanvasPage.tsx | 2 ++ .../character-mix/CharacterMixPage.tsx | 1 + src/features/community/CommunityPage.tsx | 1 + src/features/compliance/CompliancePage.tsx | 1 + .../dialog-generator/DialogGeneratorPage.tsx | 1 + .../digital-human/AvatarConsolePage.tsx | 1 + .../digital-human/DigitalHumanPage.tsx | 1 + src/features/ecommerce/EcommercePage.tsx | 35 +++++++++++++++++-- .../ecommerce/EcommerceTemplatesPage.tsx | 2 ++ .../ecommerce/EcommerceVideoWorkspace.tsx | 1 + .../image-workbench/ImageWorkbenchPage.tsx | 1 + src/features/more/MorePage.tsx | 1 + src/features/profile/ProfilePage.tsx | 1 + .../provider-health/ProviderHealthPage.tsx | 3 +- .../ResolutionUpscalePage.tsx | 1 + .../script-tokens/ScriptTokensPage.tsx | 2 ++ src/features/script-tokens/TokenUsagePage.tsx | 2 ++ .../subtitle-removal/SubtitleRemovalPage.tsx | 2 ++ .../WatermarkRemovalPage.tsx | 1 + src/features/workbench/WorkbenchPage.tsx | 1 + src/main.tsx | 1 - src/styles/index.css | 18 ---------- 25 files changed, 60 insertions(+), 23 deletions(-) diff --git a/src/components/NotFoundPage.tsx b/src/components/NotFoundPage.tsx index 2a09a9c..0d57245 100644 --- a/src/components/NotFoundPage.tsx +++ b/src/components/NotFoundPage.tsx @@ -1,5 +1,6 @@ import { HomeOutlined } from "@ant-design/icons"; import { useCallback } from "react"; +import "../styles/pages/not-found.css"; interface NotFoundPageProps { onGoHome: () => void; diff --git a/src/features/agent/AgentPage.tsx b/src/features/agent/AgentPage.tsx index a96d470..ad0d46d 100644 --- a/src/features/agent/AgentPage.tsx +++ b/src/features/agent/AgentPage.tsx @@ -14,6 +14,7 @@ import { ThunderboltOutlined, } from "@ant-design/icons"; import { useRef, useState } from "react"; +import "../../styles/pages/agent.css"; import WorkspacePageShell from "../../components/WorkspacePageShell"; import type { WebGenerationPreviewTask } from "../../types"; diff --git a/src/features/assets/AssetsPage.tsx b/src/features/assets/AssetsPage.tsx index e3cf85c..51b98a3 100644 --- a/src/features/assets/AssetsPage.tsx +++ b/src/features/assets/AssetsPage.tsx @@ -11,6 +11,7 @@ import { UserOutlined, } from "@ant-design/icons"; import { useCallback, useEffect, useMemo, useRef, useState, type JSX } from "react"; +import "../../styles/pages/assets.css"; import { assetClient, type ServerAssetItem } from "../../api/assetClient"; import { aiGenerationClient } from "../../api/aiGenerationClient"; import { useDebounce } from "../../hooks/useDebounce"; diff --git a/src/features/canvas/CanvasPage.tsx b/src/features/canvas/CanvasPage.tsx index f3988d8..3c30783 100644 --- a/src/features/canvas/CanvasPage.tsx +++ b/src/features/canvas/CanvasPage.tsx @@ -28,6 +28,8 @@ import { ReactFlow, } from "@xyflow/react"; +import "@xyflow/react/dist/style.css"; +import "../../styles/pages/canvas.css"; import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent, type CSSProperties, type MouseEvent, type WheelEvent } from "react"; import { aiGenerationClient } from "../../api/aiGenerationClient"; import { assetClient, type ServerAssetItem } from "../../api/assetClient"; diff --git a/src/features/character-mix/CharacterMixPage.tsx b/src/features/character-mix/CharacterMixPage.tsx index b93dc7e..d71ef0a 100644 --- a/src/features/character-mix/CharacterMixPage.tsx +++ b/src/features/character-mix/CharacterMixPage.tsx @@ -17,6 +17,7 @@ import { VideoCameraOutlined, } from "@ant-design/icons"; import { useCallback, useEffect, useRef, useState } from "react"; +import "../../styles/pages/image-workbench.css"; import StudioToolLayout from "../../components/StudioToolLayout"; import type { WebImageWorkbenchTool, WebViewKey } from "../../types"; import { aiGenerationClient } from "../../api/aiGenerationClient"; diff --git a/src/features/community/CommunityPage.tsx b/src/features/community/CommunityPage.tsx index bcc738c..7c1e97e 100644 --- a/src/features/community/CommunityPage.tsx +++ b/src/features/community/CommunityPage.tsx @@ -10,6 +10,7 @@ import { SearchOutlined, } from "@ant-design/icons"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import "../../styles/pages/community.css"; import { useDebounce } from "../../hooks/useDebounce"; import { communityClient, type ServerCommunityCase } from "../../api/communityClient"; import WorkspacePageShell from "../../components/WorkspacePageShell"; diff --git a/src/features/compliance/CompliancePage.tsx b/src/features/compliance/CompliancePage.tsx index 624754b..ec5e543 100644 --- a/src/features/compliance/CompliancePage.tsx +++ b/src/features/compliance/CompliancePage.tsx @@ -1,4 +1,5 @@ import { FileTextOutlined, SafetyOutlined } from "@ant-design/icons"; +import "../../styles/pages/compliance.css"; type ComplianceKind = "agreement" | "privacy"; diff --git a/src/features/dialog-generator/DialogGeneratorPage.tsx b/src/features/dialog-generator/DialogGeneratorPage.tsx index 4d99386..e67278c 100644 --- a/src/features/dialog-generator/DialogGeneratorPage.tsx +++ b/src/features/dialog-generator/DialogGeneratorPage.tsx @@ -1,4 +1,5 @@ import { useCallback, useRef, useState, type CSSProperties, type MouseEvent as ReactMouseEvent, type TouchEvent as ReactTouchEvent } from "react"; +import "../../styles/pages/dialog-generator.css"; type DialogStyle = "style1" | "style2" | "style3" | "style4"; diff --git a/src/features/digital-human/AvatarConsolePage.tsx b/src/features/digital-human/AvatarConsolePage.tsx index 2939295..205cb38 100644 --- a/src/features/digital-human/AvatarConsolePage.tsx +++ b/src/features/digital-human/AvatarConsolePage.tsx @@ -24,6 +24,7 @@ import { VideoCameraOutlined, } from "@ant-design/icons"; import { useMemo, useRef, useState, type CSSProperties, type PointerEvent, type ReactNode } from "react"; +import "../../styles/pages/avatar-console.css"; import type { WebViewKey } from "../../types"; import { bringAvatarEditorLayerForward, diff --git a/src/features/digital-human/DigitalHumanPage.tsx b/src/features/digital-human/DigitalHumanPage.tsx index 20092dd..0d331b5 100644 --- a/src/features/digital-human/DigitalHumanPage.tsx +++ b/src/features/digital-human/DigitalHumanPage.tsx @@ -18,6 +18,7 @@ import { UserOutlined, } from "@ant-design/icons"; import { useCallback, useEffect, useRef, useState } from "react"; +import "../../styles/pages/image-workbench.css"; import { aiGenerationClient } from "../../api/aiGenerationClient"; import { uploadAssetWithProgress } from "../../api/uploadWithProgress"; import { waitForTask } from "../../api/taskSubscription"; diff --git a/src/features/ecommerce/EcommercePage.tsx b/src/features/ecommerce/EcommercePage.tsx index 6fb7493..dd5704e 100644 --- a/src/features/ecommerce/EcommercePage.tsx +++ b/src/features/ecommerce/EcommercePage.tsx @@ -12,7 +12,8 @@ import { SettingOutlined, SkinOutlined, } from "@ant-design/icons"; -import { useEffect, useRef, useState, type CSSProperties, type ChangeEvent, type DragEvent, type ReactNode } from "react"; +import { useEffect, useMemo, useRef, useState, type CSSProperties, type ChangeEvent, type DragEvent, type ReactNode } from "react"; +import "../../styles/pages/ecommerce.css"; import { ossAssets } from "../../data/ossAssets"; import { EcommerceProgressBar } from "./EcommerceProgressBar"; import ImageMentionMenu, { getImageMentionQuery, insertImageMentionValue, type MentionImageOption } from "./ImageMentionMenu"; @@ -1214,6 +1215,34 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { requirement, }); + const latestCloneSettingSnapshot = useMemo( + () => createCloneSettingSnapshot(cloneSettingName, "clone-setting-latest"), + [ + cloneOutput, + platform, + market, + language, + ratio, + cloneSetCounts, + selectedCloneDetailModules, + cloneModelPanelTab, + selectedCloneModelScenes, + cloneModelCustomScene, + cloneModelGender, + cloneModelAge, + cloneModelEthnicity, + cloneModelBody, + cloneModelAppearance, + cloneVideoQuality, + cloneVideoDuration, + cloneVideoSmart, + cloneReferenceMode, + cloneReplicateLevel, + requirement, + cloneSettingName, + ], + ); + const persistLatestCloneSetting = () => { const snapshot = createCloneSettingSnapshot(cloneSettingName, "clone-setting-latest"); latestCloneSettingRef.current = snapshot; @@ -1261,8 +1290,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { }; useEffect(() => { - latestCloneSettingRef.current = createCloneSettingSnapshot(cloneSettingName, "clone-setting-latest"); - }); + latestCloneSettingRef.current = latestCloneSettingSnapshot; + }, [latestCloneSettingSnapshot]); useEffect(() => { const latestSetting = readCloneLatestSetting(); diff --git a/src/features/ecommerce/EcommerceTemplatesPage.tsx b/src/features/ecommerce/EcommerceTemplatesPage.tsx index 93a40f6..65362d9 100644 --- a/src/features/ecommerce/EcommerceTemplatesPage.tsx +++ b/src/features/ecommerce/EcommerceTemplatesPage.tsx @@ -8,6 +8,8 @@ import { TagsOutlined, } from "@ant-design/icons"; import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react"; +import "../../styles/pages/image-workbench.css"; +import "../../styles/pages/ecommerce.css"; import type { WebProjectSummary } from "../../types"; import { useDebounce } from "../../hooks/useDebounce"; import { templateCarouselCases, templateCases, templateCategories, type TemplateCase } from "./ecommerceTemplates"; diff --git a/src/features/ecommerce/EcommerceVideoWorkspace.tsx b/src/features/ecommerce/EcommerceVideoWorkspace.tsx index 0623183..8d9db81 100644 --- a/src/features/ecommerce/EcommerceVideoWorkspace.tsx +++ b/src/features/ecommerce/EcommerceVideoWorkspace.tsx @@ -1,4 +1,5 @@ import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react"; +import "../../styles/pages/ecommerce-video.css"; import { CloseOutlined, CopyOutlined, diff --git a/src/features/image-workbench/ImageWorkbenchPage.tsx b/src/features/image-workbench/ImageWorkbenchPage.tsx index a7f084f..17a5827 100644 --- a/src/features/image-workbench/ImageWorkbenchPage.tsx +++ b/src/features/image-workbench/ImageWorkbenchPage.tsx @@ -24,6 +24,7 @@ import { ThunderboltOutlined, } from "@ant-design/icons"; import { useCallback, useEffect, useRef, useState } from "react"; +import "../../styles/pages/image-workbench.css"; import type { WebImageWorkbenchTool, WebViewKey } from "../../types"; import { aiGenerationClient } from "../../api/aiGenerationClient"; import { waitForTask } from "../../api/taskSubscription"; diff --git a/src/features/more/MorePage.tsx b/src/features/more/MorePage.tsx index e5e42ef..7f24631 100644 --- a/src/features/more/MorePage.tsx +++ b/src/features/more/MorePage.tsx @@ -14,6 +14,7 @@ import { } from "@ant-design/icons"; import type { ReactNode } from "react"; import { useCallback, useEffect, useState } from "react"; +import "../../styles/pages/more.css"; import type { WebImageWorkbenchTool, WebViewKey } from "../../types"; interface MorePageProps { diff --git a/src/features/profile/ProfilePage.tsx b/src/features/profile/ProfilePage.tsx index f0a14a6..474a1b1 100644 --- a/src/features/profile/ProfilePage.tsx +++ b/src/features/profile/ProfilePage.tsx @@ -18,6 +18,7 @@ import { UserOutlined, } from "@ant-design/icons"; import { useEffect, useRef, useState, type ChangeEvent, type FormEvent } from "react"; +import "../../styles/pages/profile.css"; import { aiGenerationClient } from "../../api/aiGenerationClient"; import { assetClient } from "../../api/assetClient"; import { communityClient, type ServerCommunityCase } from "../../api/communityClient"; diff --git a/src/features/provider-health/ProviderHealthPage.tsx b/src/features/provider-health/ProviderHealthPage.tsx index c382e3c..aba3b18 100644 --- a/src/features/provider-health/ProviderHealthPage.tsx +++ b/src/features/provider-health/ProviderHealthPage.tsx @@ -1,4 +1,5 @@ import { useCallback, useEffect, useState } from "react"; +import "../../styles/pages/provider-health.css"; import { CheckCircleOutlined, CloseCircleOutlined, @@ -164,4 +165,4 @@ export default function ProviderHealthPage({ session, onOpenLogin }: ProviderHea ); -} \ No newline at end of file +} diff --git a/src/features/resolution-upscale/ResolutionUpscalePage.tsx b/src/features/resolution-upscale/ResolutionUpscalePage.tsx index c33690a..93e0484 100644 --- a/src/features/resolution-upscale/ResolutionUpscalePage.tsx +++ b/src/features/resolution-upscale/ResolutionUpscalePage.tsx @@ -16,6 +16,7 @@ import { VideoCameraOutlined, } from "@ant-design/icons"; import { useCallback, useEffect, useRef, useState } from "react"; +import "../../styles/pages/image-workbench.css"; import { aiGenerationClient } from "../../api/aiGenerationClient"; import { waitForTask } from "../../api/taskSubscription"; import { saveToolTaskState, loadToolTaskState, clearToolTaskState } from "../workbench/toolKeepalive"; diff --git a/src/features/script-tokens/ScriptTokensPage.tsx b/src/features/script-tokens/ScriptTokensPage.tsx index 3c8a53e..b553a84 100644 --- a/src/features/script-tokens/ScriptTokensPage.tsx +++ b/src/features/script-tokens/ScriptTokensPage.tsx @@ -9,6 +9,8 @@ import { UploadOutlined, } from "@ant-design/icons"; import { useEffect, useRef, useState, type ChangeEvent, type KeyboardEvent } from "react"; +import "../../styles/pages/script-tokens-v5.css"; +import "../../styles/pages/script-tokens.css"; import { evaluateScript } from "../../api/scriptEvalClient"; import { buildApiUrl, getStoredToken } from "../../api/serverConnection"; import { useSessionStore } from "../../stores"; diff --git a/src/features/script-tokens/TokenUsagePage.tsx b/src/features/script-tokens/TokenUsagePage.tsx index 848efe4..30c16da 100644 --- a/src/features/script-tokens/TokenUsagePage.tsx +++ b/src/features/script-tokens/TokenUsagePage.tsx @@ -11,6 +11,8 @@ import { WarningOutlined, } from "@ant-design/icons"; import { useCallback, useEffect, useMemo, useState } from "react"; +import "../../styles/pages/script-tokens-v5.css"; +import "../../styles/pages/script-tokens.css"; import type { WebEnterpriseUsageMember, WebEnterpriseUsageRecord, diff --git a/src/features/subtitle-removal/SubtitleRemovalPage.tsx b/src/features/subtitle-removal/SubtitleRemovalPage.tsx index cc11450..7ec16d8 100644 --- a/src/features/subtitle-removal/SubtitleRemovalPage.tsx +++ b/src/features/subtitle-removal/SubtitleRemovalPage.tsx @@ -13,6 +13,8 @@ import { VideoCameraOutlined, } from "@ant-design/icons"; import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react"; +import "../../styles/pages/image-workbench.css"; +import "../../styles/pages/subtitle-removal.css"; import { aiGenerationClient } from "../../api/aiGenerationClient"; import { waitForTask } from "../../api/taskSubscription"; import { saveToolTaskState, loadToolTaskState, clearToolTaskState } from "../workbench/toolKeepalive"; diff --git a/src/features/watermark-removal/WatermarkRemovalPage.tsx b/src/features/watermark-removal/WatermarkRemovalPage.tsx index 09ad991..ebb4259 100644 --- a/src/features/watermark-removal/WatermarkRemovalPage.tsx +++ b/src/features/watermark-removal/WatermarkRemovalPage.tsx @@ -13,6 +13,7 @@ import { SwapOutlined, } from "@ant-design/icons"; import { useCallback, useEffect, useRef, useState } from "react"; +import "../../styles/pages/image-workbench.css"; import { aiGenerationClient } from "../../api/aiGenerationClient"; import { waitForTask } from "../../api/taskSubscription"; import { saveToolTaskState, loadToolTaskState, clearToolTaskState } from "../workbench/toolKeepalive"; diff --git a/src/features/workbench/WorkbenchPage.tsx b/src/features/workbench/WorkbenchPage.tsx index 8800fa4..765603d 100644 --- a/src/features/workbench/WorkbenchPage.tsx +++ b/src/features/workbench/WorkbenchPage.tsx @@ -34,6 +34,7 @@ import { type ReactNode, type SyntheticEvent, } from "react"; +import "../../styles/pages/workbench.css"; import type { WebGenerationPreviewTask, WebUserSession } from "../../types"; import { aiGenerationClient } from "../../api/aiGenerationClient"; import { claimGenerationSlot, getActiveGenerationTaskCount, getGenerationUserKey, releaseGenerationSlot } from "../../api/generationConcurrency"; diff --git a/src/main.tsx b/src/main.tsx index 3efd374..805d641 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,6 +1,5 @@ import React from "react"; import ReactDOM from "react-dom/client"; -import "@xyflow/react/dist/style.css"; import "./styles/index.css"; import App from "./App"; import { reportError } from "./utils/errorReporting"; diff --git a/src/styles/index.css b/src/styles/index.css index 45a76ba..e9c2fba 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -9,28 +9,10 @@ @import "./pages/script-review-visual.css"; @import "./pages/script-review-showcase.css"; @import "./pages/model-generation-showcase.css"; -@import "./pages/workbench.css"; -@import "./pages/ecommerce.css"; -@import "./pages/ecommerce-video.css"; -@import "./pages/community.css"; -@import "./pages/assets.css"; -@import "./pages/more.css"; -@import "./pages/avatar-console.css"; @import "./pages/more-tools.css"; @import "./pages/studio-layout.css"; -@import "./pages/image-workbench.css"; -@import "./pages/subtitle-removal.css"; -@import "./pages/dialog-generator.css"; @import "./pages/size-template.css"; -@import "./pages/script-tokens-v5.css"; -@import "./pages/script-tokens.css"; -@import "./pages/profile.css"; -@import "./pages/canvas.css"; -@import "./pages/agent.css"; -@import "./pages/compliance.css"; -@import "./pages/provider-health.css"; @import "./pages/legacy-pages.css"; -@import "./pages/not-found.css"; @import "./components/recharge-modal.css"; @import "./components/dropzone.css"; @import "./components/skeleton.css";