perf(core): 全站资产改服务端懒加载,撤掉 bootstrap 全量 allAssets

不再在启动时一次性拉全部资产(数据多时随之变慢/串多页),各页按需服务端分页/过滤:
- 生图(ImageWorkbench 模特库按 category=person、AssetFactory 按 ai 生成图)页面内懒加载。
- 商品库/项目向导封面图改用后端内嵌 cover_preview_url / images[].preview_url,不再反查全局 assets。
- 商品详情 AI 素材按 ?product 懒加载(上传/生成/采用三视图后刷新)。
- 工作台资产总数走轻量 /assets/summary/。
- App bootstrap 删除 api.allAssets() 与全局 assets state;loadData 仅留必要全局数据。
- 后端 ?product 过滤并集补上 ProductImage 关联资产,等价前端原 belongsToProduct。
- pipeline 用项目详情已内嵌的 *_url 显示,调用处传空 assets(不再依赖全局全量)。

闸验证:9 页功能正常、无分页瀑布、无接口报错;首屏不再含资产全量拉取。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
zyc
2026-06-17 18:25:05 +08:00
co-authored by Claude Opus 4.8
parent 59ab3c0404
commit 2f6d3f5823
7 changed files with 92 additions and 71 deletions
+14 -4
View File
@@ -1,17 +1,27 @@
import type { Asset, BillingSummary, Product, Project } from "../types";
import { useEffect, useState } from "react";
import type { BillingSummary, Product, Project } from "../types";
import type { Page } from "./route-config";
import { api } from "../api";
import { money, stageMeta, statusPill } from "./stage-config";
import { Progress } from "../components/pipeline-stage";
import { IconKitSvg } from "../components/IconKitSvg";
export function Dashboard({ products, projects, assets, billing, userName, navigate }: {
export function Dashboard({ products, projects, billing, userName, navigate }: {
products: Product[];
projects: Project[];
assets: Asset[];
billing: BillingSummary | null;
userName?: string;
navigate: (page: Page) => void;
}) {
// 资产总数:走轻量 summary 接口(各 tab 计数之和),不再吃全局 assets 全量数组
const [assetCount, setAssetCount] = useState<number | null>(null);
useEffect(() => {
let alive = true;
api.assetSummary()
.then((c) => { if (alive) setAssetCount(Object.values(c).reduce((a, b) => a + b, 0)); })
.catch(() => {});
return () => { alive = false; };
}, []);
const completed = projects.filter((project) => project.status === "completed").length;
const running = projects.filter((project) => !["completed", "failed"].includes(project.status)).length;
const productTitle = (id: string) => products.find((product) => product.id === id)?.title || "商品";
@@ -34,7 +44,7 @@ export function Dashboard({ products, projects, assets, billing, userName, navig
</div>
</div>
<div className="stats with-corners"><span className="corner-tr">+</span><span className="corner-bl">+</span><KpiStat label="总项目" badge="ALL" value={projects.length} delta={`↑ 本月 +${Math.max(projects.length, 0)}`} /><KpiStat label="进行中" badge="WIP" value={running} delta="待处理" /><KpiStat label="成片" badge="DONE" value={completed} delta="导出完成" /><button className="stat" type="button" onClick={() => navigate("account")}><div className="lbl"> <span className="badge">¥</span></div><div className="v">{money(billing?.account.balance)}</div><div className="bar"><span style={{ width: "38%" }} /></div><div className="sub"> {money(billing?.account.reserved_balance)}</div></button></div>
<div className="dash-grid"><div><div className="section-h"><h2></h2><button className="more" type="button" onClick={() => navigate("projects")}>[ ALL · {projects.length} ] </button></div><div className="card-hard">{projects.slice(0, 6).map((project) => <button className="recent-row" key={project.id} type="button" onClick={() => navigate("pipeline")}><div className="placeholder thumb"><span className="ph-frame">9:16</span></div><div className="recent-meta"><div className="name">{project.name}</div><div className="sub">{productTitle(project.product)} / AI / 4 </div></div><Progress status={project.current_stage} /><span className={`pill ${statusPill(project.status)}`}><span className="dot" />{stageMeta[project.current_stage]?.label || project.current_stage}</span><span className="btn btn-sm"></span></button>)}</div></div><div style={{ display: "flex", flexDirection: "column", gap: 24 }}><div><div className="section-h"><h2></h2><span className="more">[ /shortcuts ]</span></div><div className="shortcuts"><Shortcut name="package" title="" desc={`${products.length} SKU`} onClick={() => navigate("products")} /><Shortcut name="images" title="" desc={`${assets.length} `} onClick={() => navigate("library")} /><Shortcut name="creditCard" title="" desc={money(billing?.account.balance)} onClick={() => navigate("account")} /><Shortcut name="clapperboard" title="" desc={`${projects.length} `} onClick={() => navigate("projects")} /></div></div><div><div className="section-h"><h2></h2><span className="more">[ FAQ ]</span></div><div className="tip"><strong></strong> <span className="mono">[ ]</span> token </div></div></div></div>
<div className="dash-grid"><div><div className="section-h"><h2></h2><button className="more" type="button" onClick={() => navigate("projects")}>[ ALL · {projects.length} ] </button></div><div className="card-hard">{projects.slice(0, 6).map((project) => <button className="recent-row" key={project.id} type="button" onClick={() => navigate("pipeline")}><div className="placeholder thumb"><span className="ph-frame">9:16</span></div><div className="recent-meta"><div className="name">{project.name}</div><div className="sub">{productTitle(project.product)} / AI / 4 </div></div><Progress status={project.current_stage} /><span className={`pill ${statusPill(project.status)}`}><span className="dot" />{stageMeta[project.current_stage]?.label || project.current_stage}</span><span className="btn btn-sm"></span></button>)}</div></div><div style={{ display: "flex", flexDirection: "column", gap: 24 }}><div><div className="section-h"><h2></h2><span className="more">[ /shortcuts ]</span></div><div className="shortcuts"><Shortcut name="package" title="" desc={`${products.length} SKU`} onClick={() => navigate("products")} /><Shortcut name="images" title="" desc={`${assetCount ?? ""} `} onClick={() => navigate("library")} /><Shortcut name="creditCard" title="" desc={money(billing?.account.balance)} onClick={() => navigate("account")} /><Shortcut name="clapperboard" title="" desc={`${projects.length} `} onClick={() => navigate("projects")} /></div></div><div><div className="section-h"><h2></h2><span className="more">[ FAQ ]</span></div><div className="tip"><strong></strong> <span className="mono">[ ]</span> token </div></div></div></div>
</>
);
}