perf(core): 非资产全局态也改按页懒加载,bootstrap 从 ~10 接口瘦到 ~6
启动只保留「每页 shell 都要」的全局数据:商品/项目(侧栏+导航)、余额(顶栏)、 模型配置(多生成页+pipeline 共用)、未读数(侧栏徽标,page_size=1 轻量)。其余移到各页按需: - 账户页:流水(本就服务端分页)+ 趋势 + 团队成员 本页自取,充值后刷新。 - 团队页:成员 + 团队动态 本页自取,增删成员/充值后刷新。 - 生图工厂:任务历史 + 任务缩略图本页自取。 - 通知:bootstrap 只取 page_size=1 拿未读数(notificationsBadge),列表由消息中心/团队页各自拉。 - 全局默认分页改 DefaultPagination(支持 ?page_size 覆盖,默认 20 上限 200): 根治 projects/products 等列表端点忽略 page_size、数据过 20 即被迫翻页(同 assets 旧病)。 闸:9 页功能正常、无瀑布、API 检查全过;首屏接口数 5~8(原 8~13)。perf 预算下调到新基线。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { CircleDollarSign, KeyRound, UserPlus } from "lucide-react";
|
||||
import { api } from "../api";
|
||||
import type { BillingSummary, Notification, Team, TeamMember, User } from "../types";
|
||||
import type { Page } from "./route-config";
|
||||
import { money } from "./stage-config";
|
||||
@@ -27,13 +28,10 @@ const PERM_ROWS: Array<{ cap: string; cells: [string, string, string]; last?: bo
|
||||
{ cap: "创建项目 / 用 AI 流程", cells: ["✓", "✓", "✓"], last: true }
|
||||
];
|
||||
|
||||
export function TeamPage({ team, user, members, billing, notifications = [], notificationTotal, navigate, onCreateMember, onUpdateMember, onRemoveMember, onResetPassword, onRecharge }: {
|
||||
export function TeamPage({ team, user, billing, navigate, onCreateMember: onCreateMemberRaw, onUpdateMember: onUpdateMemberRaw, onRemoveMember: onRemoveMemberRaw, onResetPassword, onRecharge: onRechargeRaw }: {
|
||||
team: Team;
|
||||
user: User;
|
||||
members: TeamMember[];
|
||||
billing: BillingSummary | null;
|
||||
notifications?: Notification[];
|
||||
notificationTotal?: number; // 后端真实总数(只加载了近期 100 条,「共 N」用这个而非数组长度)
|
||||
navigate: (page: Page) => void;
|
||||
onCreateMember: (payload: { username: string; password: string; name?: string; role?: string; monthly_credit_limit?: number }) => void | Promise<unknown>;
|
||||
onUpdateMember: (id: string, payload: { role?: string; monthly_credit_limit?: number }) => void | Promise<unknown>;
|
||||
@@ -44,6 +42,24 @@ export function TeamPage({ team, user, members, billing, notifications = [], not
|
||||
const [modal, setModal] = useState<"" | "invite" | "limit" | "recharge">("");
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
// 团队成员 + 团队动态本页懒加载(不再走全局 bootstrap);成员/充值操作后 bump 刷新
|
||||
const [reloadFlag, setReloadFlag] = useState(0);
|
||||
const [members, setMembers] = useState<TeamMember[]>([]);
|
||||
const [notifications, setNotifications] = useState<Notification[]>([]);
|
||||
const [notificationTotal, setNotificationTotal] = useState(0);
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
api.teamMembers().then((m) => { if (alive) setMembers(m); }).catch(() => {});
|
||||
api.allNotifications().then((n) => { if (alive) { setNotifications(n.results); setNotificationTotal(n.count); } }).catch(() => {});
|
||||
return () => { alive = false; };
|
||||
}, [reloadFlag]);
|
||||
const reloadTeam = () => setReloadFlag((n) => n + 1);
|
||||
// 包一层:操作完成后刷新本页成员列表(余额由全局 action→loadData 刷新);透传返回值(调用处据此判成功)
|
||||
const onCreateMember = async (p: Parameters<typeof onCreateMemberRaw>[0]) => { const r = await onCreateMemberRaw(p); reloadTeam(); return r; };
|
||||
const onUpdateMember = async (id: string, p: Parameters<typeof onUpdateMemberRaw>[1]) => { const r = await onUpdateMemberRaw(id, p); reloadTeam(); return r; };
|
||||
const onRemoveMember = async (id: string) => { const r = await onRemoveMemberRaw(id); reloadTeam(); return r; };
|
||||
const onRecharge = async (amount: number, bonus: number) => { const r = await onRechargeRaw(amount, bonus); reloadTeam(); return r; };
|
||||
|
||||
// 创建账户表单
|
||||
const [cuUser, setCuUser] = useState("");
|
||||
const [cuPass, setCuPass] = useState("");
|
||||
|
||||
Reference in New Issue
Block a user