From 719674b4add057fba256e007d9ae79f50d2b5881 Mon Sep 17 00:00:00 2001
From: Stringadmin <admin@omniai.net.cn>
Date: Fri, 5 Jun 2026 19:17:35 +0800
Subject: [PATCH] perf: defer home page styles

---
 src/features/home/HomePage.tsx                      |  1 +
 src/features/home/ModelGenerationShowcase.tsx       |  1 +
 src/features/home/ScriptReviewShowcase.tsx          |  1 +
 src/features/home/ScriptReviewVisual.tsx            |  1 +
 src/features/home/ToolboxSection.tsx                |  1 +
 src/features/home/WelcomeSplash.tsx                 |  1 +
 src/features/image-workbench/ImageWorkbenchPage.tsx |  9 ++++++---
 src/features/profile/ProfilePage.tsx                | 12 +++++++++---
 src/styles/index.css                                |  6 ------
 9 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/features/home/HomePage.tsx b/src/features/home/HomePage.tsx
index 2883532..6d954b3 100644
--- a/src/features/home/HomePage.tsx
+++ b/src/features/home/HomePage.tsx
@@ -11,6 +11,7 @@ import { Fragment, useCallback, useEffect, useMemo, useRef, useState, type CSSPr
 import type { WebViewKey, WebImageWorkbenchTool } from "../../types";
 import { useScrollEntrance } from "../../hooks/useScrollEntrance";
 import { ossAssets } from "../../data/ossAssets";
+import "../../styles/pages/home.css";
 import WelcomeSplash from "./WelcomeSplash";
 import ToolboxSection from "./ToolboxSection";
 import ScriptReviewShowcase from "./ScriptReviewShowcase";
diff --git a/src/features/home/ModelGenerationShowcase.tsx b/src/features/home/ModelGenerationShowcase.tsx
index 6cd0c9c..a92e63b 100644
--- a/src/features/home/ModelGenerationShowcase.tsx
+++ b/src/features/home/ModelGenerationShowcase.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import "../../styles/pages/model-generation-showcase.css";
 
 type ShowMode = "agent" | "image" | "video";
 
diff --git a/src/features/home/ScriptReviewShowcase.tsx b/src/features/home/ScriptReviewShowcase.tsx
index 5435bef..e29e5f1 100644
--- a/src/features/home/ScriptReviewShowcase.tsx
+++ b/src/features/home/ScriptReviewShowcase.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import "../../styles/pages/script-review-showcase.css";
 
 const DIMS = [
   { name: "钩子设计", score: 16, max: 20, hue: 145, desc: "吸引力·悬念·黄金三秒", isPerfect: false, isLow: false },
diff --git a/src/features/home/ScriptReviewVisual.tsx b/src/features/home/ScriptReviewVisual.tsx
index 14981b7..ed03861 100644
--- a/src/features/home/ScriptReviewVisual.tsx
+++ b/src/features/home/ScriptReviewVisual.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import "../../styles/pages/script-review-visual.css";
 
 const DIMS = [
   { name: "钩子设计", score: 19, max: 20, hue: 145 },
diff --git a/src/features/home/ToolboxSection.tsx b/src/features/home/ToolboxSection.tsx
index 44f1402..ac23134 100644
--- a/src/features/home/ToolboxSection.tsx
+++ b/src/features/home/ToolboxSection.tsx
@@ -1,6 +1,7 @@
 import { ToolOutlined } from "@ant-design/icons";
 import type { WebViewKey, WebImageWorkbenchTool } from "../../types";
 import { ossAssets } from "../../data/ossAssets";
+import "../../styles/pages/toolbox.css";
 
 const {
   imageBefore: toolImageBefore,
diff --git a/src/features/home/WelcomeSplash.tsx b/src/features/home/WelcomeSplash.tsx
index e9a0271..dc8f5c5 100644
--- a/src/features/home/WelcomeSplash.tsx
+++ b/src/features/home/WelcomeSplash.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
+import "../../styles/pages/welcome-splash.css";
 
 interface WelcomeSplashProps {
   onEnter: () => void;
diff --git a/src/features/image-workbench/ImageWorkbenchPage.tsx b/src/features/image-workbench/ImageWorkbenchPage.tsx
index bbe351b..783ed6c 100644
--- a/src/features/image-workbench/ImageWorkbenchPage.tsx
+++ b/src/features/image-workbench/ImageWorkbenchPage.tsx
@@ -38,6 +38,9 @@ type WorkMode = "single" | "blend";
 type OutputSize = "9:16" | "16:9" | "4:3" | "3:4" | "1:1";
 type OutputCount = 1 | 2 | 3 | 4;
 
+const OUTPUT_SIZE_OPTIONS: OutputSize[] = ["9:16", "16:9", "4:3", "3:4", "1:1"];
+const OUTPUT_COUNT_OPTIONS: OutputCount[] = [1, 2, 3, 4];
+
 const SIZE_TO_RATIO: Record<OutputSize, string> = {
   "9:16": "9:16",
   "16:9": "16:9",
@@ -761,7 +764,7 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
               <h3>参数</h3>
               <span className="image-workbench-field-label">输出分辨率</span>
               <div className="image-workbench-segmented">
-                {(["9:16", "16:9", "4:3", "3:4", "1:1"] as OutputSize[]).map((s) => (
+                {OUTPUT_SIZE_OPTIONS.map((s) => (
                   <button key={s} type="button" className={outputSize === s ? "is-active" : ""} onClick={() => setOutputSize(s)}>
                     {s}
                   </button>
@@ -1317,7 +1320,7 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
             <h3>输出</h3>
             <span className="image-workbench-field-label">尺寸</span>
             <div className="image-workbench-segmented">
-              {(["9:16", "16:9", "4:3", "3:4", "1:1"] as OutputSize[]).map((s) => (
+              {OUTPUT_SIZE_OPTIONS.map((s) => (
                 <button key={s} type="button" className={outputSize === s ? "is-active" : ""} onClick={() => setOutputSize(s)}>
                   {s}
                 </button>
@@ -1326,7 +1329,7 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
             <div className="image-workbench-count">
               <span>数量</span>
               <div>
-                {([1, 2, 3, 4] as OutputCount[]).map((count) => (
+                {OUTPUT_COUNT_OPTIONS.map((count) => (
                   <button
                     key={count}
                     type="button"
diff --git a/src/features/profile/ProfilePage.tsx b/src/features/profile/ProfilePage.tsx
index 0e7a164..c28eac0 100644
--- a/src/features/profile/ProfilePage.tsx
+++ b/src/features/profile/ProfilePage.tsx
@@ -17,7 +17,7 @@ import {
   ShareAltOutlined,
   UserOutlined,
 } from "@ant-design/icons";
-import { useEffect, useRef, useState, type ChangeEvent, type FormEvent } from "react";
+import { useEffect, useMemo, useRef, useState, type ChangeEvent, type FormEvent } from "react";
 import "../../styles/pages/profile.css";
 import { aiGenerationClient } from "../../api/aiGenerationClient";
 import { assetClient } from "../../api/assetClient";
@@ -255,8 +255,14 @@ function ProfilePage({
   const [bioStatusNotice, setBioStatusNotice] = useState<string | null>(null);
   const [bannerUrl, setBannerUrl] = useState(() => session?.user.backgroundUrl || readLocalProfileValue(userId, "background"));
 
-  const completedTasks = tasks.filter((task) => task.status === "completed");
-  const visibleWorks = completedTasks.length ? completedTasks : tasks.slice(0, 6);
+  const completedTasks = useMemo(
+    () => tasks.filter((task) => task.status === "completed"),
+    [tasks],
+  );
+  const visibleWorks = useMemo(
+    () => (completedTasks.length ? completedTasks : tasks.slice(0, 6)),
+    [completedTasks, tasks],
+  );
   const totalBalance = usage.balanceCents + (session?.user.enterpriseBalanceCents || 0);
   const packageLabel = session?.user.activePackages?.[0]?.name || "按量积分";
   const avatarUrl = session?.user.avatarUrl || localAvatarUrl || null;
diff --git a/src/styles/index.css b/src/styles/index.css
index d58bd11..2abf894 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -3,12 +3,6 @@
 @import "./shell/app-shell.css";
 @import "./components/primitives.css";
 @import "./components/legacy-components.css";
-@import "./pages/home.css";
-@import "./pages/welcome-splash.css";
-@import "./pages/toolbox.css";
-@import "./pages/script-review-visual.css";
-@import "./pages/script-review-showcase.css";
-@import "./pages/model-generation-showcase.css";
 @import "./pages/more-tools.css";
 @import "./pages/studio-layout.css";
 @import "./pages/size-template.css";