perf: defer home page styles

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";

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";
 

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 },

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 },

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,

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;

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"

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;

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";