zycandClaude Opus 4.8
8ba76e5bb7
- 资产 preview_url 从「逐图签发预签名 URL」改为虚拟主机式公读直链 (https://{bucket}.{host}/{key})。桶公读已验证免签可访问;直链稳定可被浏览器/CDN 缓存,而签名链每次都变、1h 过期反而打不到缓存。boto3 也移出序列化热路径。 - allNotifications 不再逐页翻全部(原 O(N) 随消息增长拖慢每次刷新),只取首页 100 条 (侧边栏徽标 unread_count + 团队动态仅展示最近 6 条已足够);「共 N」改用后端真实 count。 - perf-probe:page_size 由 API 级硬闸确定性守住后,浏览器端「资产翻页」降为提示 (翻 1~2 页是资产真超 200 的合法分页,仅 ≥3 页才疑似 page_size 失效)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
878 lines
41 KiB
TypeScript
878 lines
41 KiB
TypeScript
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import { api, ApiError, getToken, setToken } from "./api";
|
|
import { IconKitSvg } from "./components/IconKitSvg";
|
|
import type {
|
|
AITask,
|
|
Asset,
|
|
BillingSummary,
|
|
BillingTrend,
|
|
ExportPoll,
|
|
Ledger,
|
|
LoginSession,
|
|
ModelConfig,
|
|
Notification,
|
|
Product,
|
|
Project,
|
|
Team,
|
|
TeamMember,
|
|
User,
|
|
UserPreference
|
|
} from "./types";
|
|
import { CornerMarks, Decorations, Sidebar, ToastLike } from "./components/app-shell";
|
|
import {
|
|
AccountPage,
|
|
AssetFactoryPage,
|
|
AuthScreen,
|
|
Dashboard,
|
|
ImageWorkbenchPage,
|
|
LibraryPage,
|
|
MessagesPage,
|
|
ModelPhotoDemoPage,
|
|
PipelinePage,
|
|
ProductCreateUploadPage,
|
|
ProductDetailPage,
|
|
ProductsPage,
|
|
ProjectWizardPage,
|
|
ProjectsPage,
|
|
SettingsPage,
|
|
TeamPage
|
|
} from "./routes";
|
|
import type { AuthMode, NavigateOptions, Notice, Page, ResolvedRoute } from "./routes/route-config";
|
|
import { pathForPage, resolveRoute, routeLabels } from "./routes/route-config";
|
|
import { money } from "./routes/stage-config";
|
|
|
|
const crumbLabels: Partial<Record<Page, string>> = {
|
|
dashboard: "工作台",
|
|
products: "商品库",
|
|
productDetail: "商品详情",
|
|
productCreateUpload: "商品库",
|
|
projects: "视频项目",
|
|
projectWizard: "新建视频项目",
|
|
pipeline: "生产管线",
|
|
library: "资产库",
|
|
account: "消费",
|
|
team: "团队",
|
|
messages: "消息中心",
|
|
assetFactory: "图片生成",
|
|
imageOptimize: "图片创作",
|
|
modelPhoto: "模特上身图",
|
|
modelPhotoDemoA: "模特图方案 A",
|
|
modelPhotoDemoB: "模特图方案 B",
|
|
platformCover: "平台套图",
|
|
settings: "设置",
|
|
settingsNotify: "设置"
|
|
};
|
|
|
|
/* 图片生成工作台·跨刷新持久化:把在跑的任务 id + 已出结果按 mode 存本地,
|
|
刷新后可恢复"生成中"占位并继续轮询(worker 在后台出图,任务永不丢)。 */
|
|
const imgwbKey = (mode?: string) => `airshelf:imgwb:${mode || "image"}`;
|
|
type ImgwbSaved = { pending?: string[]; results?: Asset[]; count?: number; ts?: number };
|
|
function loadImgwb(mode?: string): ImgwbSaved | null {
|
|
try {
|
|
const raw = localStorage.getItem(imgwbKey(mode));
|
|
if (!raw) return null;
|
|
const saved = JSON.parse(raw) as ImgwbSaved;
|
|
// 过期保护:1 小时前的残留不再恢复,避免显示陈旧"生成中"
|
|
if (saved.ts && Date.now() - saved.ts > 60 * 60 * 1000) {
|
|
localStorage.removeItem(imgwbKey(mode));
|
|
return null;
|
|
}
|
|
return saved;
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
function saveImgwb(mode: string | undefined, patch: ImgwbSaved) {
|
|
try {
|
|
const prev = loadImgwb(mode) || {};
|
|
localStorage.setItem(imgwbKey(mode), JSON.stringify({ ...prev, ...patch, ts: Date.now() }));
|
|
} catch {
|
|
/* localStorage 不可用时静默降级,不影响生成 */
|
|
}
|
|
}
|
|
|
|
export function App() {
|
|
const [route, setRoute] = useState<ResolvedRoute>(() => resolveRoute());
|
|
const page = route.page;
|
|
const [authMode, setAuthMode] = useState<AuthMode>(route.authMode);
|
|
const [authed, setAuthed] = useState<boolean>(() => Boolean(getToken()));
|
|
const [booting, setBooting] = useState<boolean>(() => Boolean(getToken()));
|
|
|
|
const [user, setUser] = useState<User | null>(null);
|
|
const [team, setTeam] = useState<Team | null>(null);
|
|
const [products, setProducts] = useState<Product[]>([]);
|
|
const [projects, setProjects] = useState<Project[]>([]);
|
|
const [assets, setAssets] = useState<Asset[]>([]);
|
|
const [teamMembers, setTeamMembers] = useState<TeamMember[]>([]);
|
|
const [modelConfigs, setModelConfigs] = useState<ModelConfig[]>([]);
|
|
const [aiTasks, setAiTasks] = useState<AITask[]>([]);
|
|
const [billing, setBilling] = useState<BillingSummary | null>(null);
|
|
const [ledgers, setLedgers] = useState<Ledger[]>([]);
|
|
const [billingTrend, setBillingTrend] = useState<BillingTrend | null>(null);
|
|
const [notifications, setNotifications] = useState<Notification[]>([]);
|
|
const [notificationTotal, setNotificationTotal] = useState(0); // 后端真实总数(团队动态「共 N」用,与已加载的近期 100 条区分)
|
|
const [unreadCount, setUnreadCount] = useState(0);
|
|
const [projectDetail, setProjectDetail] = useState<Project | null>(null);
|
|
const [exportResult, setExportResult] = useState<ExportPoll | null>(null);
|
|
const [preferences, setPreferences] = useState<UserPreference | null>(null);
|
|
const [sessions, setSessions] = useState<LoginSession[]>([]);
|
|
|
|
const [activeProductId, setActiveProductId] = useState(route.productId || "");
|
|
const [activeProjectId, setActiveProjectId] = useState(route.projectId || "");
|
|
const [notice, setNotice] = useState<Notice>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
// 右上角 toast 自动消失:成功/信息 3s,错误 5s(此前 notice 不会自己清,导致「提示一直挂着」)
|
|
useEffect(() => {
|
|
if (!notice) return;
|
|
const timer = setTimeout(() => setNotice(null), notice.type === "error" ? 5000 : 3000);
|
|
return () => clearTimeout(timer);
|
|
}, [notice]);
|
|
|
|
const activeProject = useMemo(
|
|
() => projects.find((project) => project.id === activeProjectId) || projects[0],
|
|
[projects, activeProjectId]
|
|
);
|
|
const activeProduct = useMemo(
|
|
() => products.find((product) => product.id === activeProductId) || products[0],
|
|
[products, activeProductId]
|
|
);
|
|
|
|
const loadData = useCallback(async () => {
|
|
const [productData, projectData, assetData, billingData, ledgerData, trendData, memberData, modelData, taskData, notificationData] =
|
|
await Promise.all([
|
|
api.products(),
|
|
api.projects(),
|
|
api.allAssets(),
|
|
api.billingSummary().catch(() => null),
|
|
api.ledgers(1, 10).catch(() => ({ count: 0, page: 1, page_size: 10, results: [] as Ledger[] })),
|
|
api.billingTrend().catch(() => null),
|
|
api.teamMembers().catch(() => []),
|
|
api.modelConfigs().catch(() => null),
|
|
api.aiTasks().catch(() => null),
|
|
api.allNotifications().catch(() => null)
|
|
]);
|
|
setProducts(productData.results);
|
|
setProjects(projectData.results);
|
|
setAssets(assetData);
|
|
setTeamMembers(memberData);
|
|
setModelConfigs(modelData?.results || []);
|
|
setAiTasks(taskData?.results || []);
|
|
if (billingData) setBilling(billingData);
|
|
setLedgers(ledgerData.results);
|
|
setBillingTrend(trendData);
|
|
if (notificationData) {
|
|
setNotifications(notificationData.results);
|
|
setNotificationTotal(notificationData.count);
|
|
setUnreadCount(notificationData.unread_count);
|
|
}
|
|
setActiveProjectId((current) => current || projectData.results[0]?.id || "");
|
|
setActiveProductId((current) => current || productData.results[0]?.id || "");
|
|
}, []);
|
|
|
|
// 首登水合带重试:loadData 里 products/projects/allAssets 没有 .catch,任一瞬时失败会让整个
|
|
// Promise.all 直接 reject、一个 setter 都不跑 → 页面卡在全 0。boot 路径有 api.me 重试兜底,
|
|
// 故刷新就好;首登(onAuthed)以前是 void loadData().catch(log) 静默吞掉 → 数据全错。这里统一重试。
|
|
const loadDataWithRetry = useCallback(async (attempts = 3) => {
|
|
for (let attempt = 0; attempt < attempts; attempt += 1) {
|
|
try {
|
|
await loadData();
|
|
return;
|
|
} catch (error) {
|
|
if (attempt === attempts - 1) throw error;
|
|
await new Promise((resolve) => setTimeout(resolve, 1000));
|
|
}
|
|
}
|
|
}, [loadData]);
|
|
|
|
// 设置页数据:偏好 + 登录会话(进入设置页时按需加载)
|
|
const loadSettingsData = useCallback(async () => {
|
|
const [pref, sess] = await Promise.all([
|
|
api.preferences().catch(() => null),
|
|
api.loginSessions().catch(() => [])
|
|
]);
|
|
if (pref) setPreferences(pref);
|
|
setSessions(sess);
|
|
}, []);
|
|
|
|
async function savePreferences(payload: Partial<UserPreference>) {
|
|
const next = await api.updatePreferences(payload).catch(() => null);
|
|
if (next) setPreferences(next);
|
|
return next;
|
|
}
|
|
|
|
async function revokeSession(id: string) {
|
|
await action(() => api.revokeSession(id), "设备已下线");
|
|
setSessions(await api.loginSessions().catch(() => []));
|
|
}
|
|
|
|
async function revokeOtherSessions() {
|
|
const res = await action(() => api.revokeOtherSessions(), "其他设备已全部下线");
|
|
if (res?.token) setToken(res.token);
|
|
setSessions(await api.loginSessions().catch(() => []));
|
|
}
|
|
|
|
const reloadNotifications = useCallback(async () => {
|
|
const data = await api.allNotifications().catch(() => null);
|
|
if (data) {
|
|
setNotifications(data.results);
|
|
setNotificationTotal(data.count);
|
|
setUnreadCount(data.unread_count);
|
|
}
|
|
}, []);
|
|
|
|
// Boot: validate token, hydrate identity + data.
|
|
useEffect(() => {
|
|
if (!getToken()) {
|
|
setBooting(false);
|
|
return;
|
|
}
|
|
let cancelled = false;
|
|
(async () => {
|
|
try {
|
|
// 瞬时故障(后端重启/网络抖动)要重试,不能把人踢回登录页;只有 401/403 才清 token
|
|
let identity: Awaited<ReturnType<typeof api.me>> | null = null;
|
|
for (let attempt = 0; attempt < 3; attempt += 1) {
|
|
try {
|
|
identity = await api.me();
|
|
break;
|
|
} catch (error) {
|
|
const status = error instanceof ApiError ? error.status : 0;
|
|
if (status === 401 || status === 403 || attempt === 2) throw error;
|
|
await new Promise((resolve) => setTimeout(resolve, 1200));
|
|
}
|
|
}
|
|
if (cancelled || !identity) return;
|
|
setUser(identity.user);
|
|
setTeam(identity.team);
|
|
await loadDataWithRetry();
|
|
} catch (bootError) {
|
|
console.error("[boot] failed:", bootError);
|
|
setToken(null);
|
|
if (!cancelled) setAuthed(false);
|
|
} finally {
|
|
if (!cancelled) setBooting(false);
|
|
}
|
|
})();
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [loadDataWithRetry]);
|
|
|
|
// Keep route in sync with browser navigation.
|
|
useEffect(() => {
|
|
function syncRouteFromHistory() {
|
|
const next = resolveRoute();
|
|
setRoute(next);
|
|
setAuthMode(next.authMode);
|
|
if (next.productId !== undefined) setActiveProductId(next.productId);
|
|
if (next.projectId !== undefined) setActiveProjectId(next.projectId);
|
|
}
|
|
window.addEventListener("popstate", syncRouteFromHistory);
|
|
return () => window.removeEventListener("popstate", syncRouteFromHistory);
|
|
}, []);
|
|
|
|
// Load preferences + sessions when entering settings.
|
|
useEffect(() => {
|
|
if (!authed || (page !== "settings" && page !== "settingsNotify")) return;
|
|
loadSettingsData();
|
|
}, [authed, page, loadSettingsData]);
|
|
|
|
// Load full project detail when entering the pipeline.
|
|
useEffect(() => {
|
|
if (!authed || page !== "pipeline" || !activeProjectId) {
|
|
if (page !== "pipeline") setProjectDetail(null);
|
|
return;
|
|
}
|
|
let cancelled = false;
|
|
setExportResult(null); // 切项目/进管线时清空上个项目的导出态
|
|
api
|
|
.project(activeProjectId)
|
|
.then((detail) => {
|
|
if (!cancelled) setProjectDetail(detail);
|
|
})
|
|
.catch(() => undefined);
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [authed, page, activeProjectId]);
|
|
|
|
// 静默轮询运行中的视频段(本机无 Celery worker,由前端驱动 poll-video-segment),实时刷新管线进度,不弹 toast。
|
|
// 资源账:旧实现每轮「GET 项目 → 逐段串行 POST → 再 GET 项目」,4 段在途时一轮 = 2 个 26KB GET + 4 个串行
|
|
// ARK 轮询(总耗时随段数线性涨)。现用内存态定位在途段(省前置 GET),段间 Promise.all 并行,一轮只回读一次。
|
|
const projectDetailRef = useRef<Project | null>(null);
|
|
useEffect(() => {
|
|
projectDetailRef.current = projectDetail;
|
|
}, [projectDetail]);
|
|
const pollVideosQuiet = useCallback(async () => {
|
|
if (!activeProjectId) return;
|
|
let detail = projectDetailRef.current;
|
|
if (!detail || detail.id !== activeProjectId) {
|
|
detail = await api.project(activeProjectId).catch(() => null);
|
|
if (!detail) return;
|
|
setProjectDetail(detail);
|
|
}
|
|
const active = detail.video_segments.filter((segment) => ["running", "queued"].includes(segment.status));
|
|
if (active.length === 0) return;
|
|
await Promise.all(active.map((segment) => api.pollVideo(activeProjectId, segment.id).catch(() => undefined)));
|
|
const next = await api.project(activeProjectId).catch(() => null);
|
|
if (next) setProjectDetail(next);
|
|
}, [activeProjectId]);
|
|
|
|
// 静默刷新导出任务状态(进入拼接页 / 导出后回填成片),不弹 toast。
|
|
const refreshExport = useCallback(async () => {
|
|
if (!activeProjectId) return;
|
|
const res = await api.pollExport(activeProjectId).catch(() => null);
|
|
if (res) setExportResult(res);
|
|
}, [activeProjectId]);
|
|
|
|
function navigate(next: Page, options: NavigateOptions = {}) {
|
|
const productId = options.productId ?? activeProductId;
|
|
const projectId = options.projectId ?? activeProjectId;
|
|
if (options.productId !== undefined) setActiveProductId(options.productId);
|
|
if (options.projectId !== undefined) setActiveProjectId(options.projectId);
|
|
const hash = options.hash?.replace(/^#/, "");
|
|
setRoute({ page: next, authMode, productId, projectId, hash });
|
|
const path = `${pathForPage(next, { productId, projectId })}${hash ? `#${hash}` : ""}`;
|
|
if (`${window.location.pathname}${window.location.hash}` !== path || window.location.search) {
|
|
const method = options.replace ? "replaceState" : "pushState";
|
|
window.history[method](null, "", path);
|
|
}
|
|
window.scrollTo({ top: 0, behavior: "auto" });
|
|
}
|
|
|
|
async function refreshProjectDetail() {
|
|
if (!activeProjectId) return;
|
|
const detail = await api.project(activeProjectId).catch(() => null);
|
|
// 写进 projectDetail;渲染处 pipelineProject 会校验 id 是否仍是当前激活项目,故后台旧请求写回也不会串台
|
|
if (detail) setProjectDetail(detail);
|
|
}
|
|
|
|
// 防重复提交:已有操作在途时,后续 action 直接忽略(双击/连点/未及时置灰的按钮都安全)。
|
|
// 用 ref 而非 loading state,避免闭包拿到旧值;同步置位,任何同一 tick 的二次点击都拦得住。
|
|
const actionInFlightRef = useRef(false);
|
|
|
|
async function action<T>(work: () => Promise<T>, successText: string): Promise<T | null> {
|
|
if (actionInFlightRef.current) {
|
|
setNotice({ type: "error", text: "操作进行中,请稍候…" });
|
|
return null;
|
|
}
|
|
actionInFlightRef.current = true;
|
|
setLoading(true);
|
|
setNotice(null);
|
|
try {
|
|
const result = await work();
|
|
// successText 为空 → 不弹 toast(交给调用方自定义反馈,如成功弹窗)
|
|
if (successText) setNotice({ type: "success", text: successText });
|
|
// 后台刷新,不阻塞操作返回:全量 loadData 会分页拉全部 assets 很重,await 它会让
|
|
// 「项目已创建/确认脚本」后白等很久(行29/37)。改为后台 hydrate,操作立即返回。
|
|
void loadData();
|
|
void refreshProjectDetail();
|
|
return result;
|
|
} catch (error) {
|
|
setNotice({ type: "error", text: error instanceof Error ? error.message : "操作失败" });
|
|
return null;
|
|
} finally {
|
|
setLoading(false);
|
|
actionInFlightRef.current = false;
|
|
}
|
|
}
|
|
|
|
async function markNotificationRead(id: string) {
|
|
await api.markNotificationRead(id).catch(() => undefined);
|
|
await reloadNotifications();
|
|
}
|
|
|
|
async function markAllNotificationsRead() {
|
|
await api.markAllNotificationsRead().catch(() => undefined);
|
|
await reloadNotifications();
|
|
}
|
|
|
|
async function saveProfile(payload: { name?: string; phone?: string; email?: string }) {
|
|
const res = await action(() => api.updateProfile(payload), "资料已保存");
|
|
if (res) {
|
|
setUser(res.user);
|
|
setTeam(res.team);
|
|
}
|
|
}
|
|
|
|
async function changeOwnPassword(payload: { old_password: string; new_password: string }) {
|
|
const res = await action(() => api.changePassword(payload), "密码已修改");
|
|
if (res?.token) setToken(res.token);
|
|
}
|
|
|
|
async function uploadOwnAvatar(formData: FormData) {
|
|
const res = await action(() => api.uploadAvatar(formData), "头像已更新");
|
|
if (res) setUser(res);
|
|
}
|
|
|
|
async function resetOwnAvatar() {
|
|
const res = await action(() => api.resetAvatar(), "已恢复默认头像");
|
|
if (res) setUser(res);
|
|
}
|
|
|
|
function generateImages(payload: { prompt: string; mode?: "image" | "model" | "cover"; count?: number; product_id?: string; reference_product?: boolean }) {
|
|
// 异步生图:提交后立刻拿到任务列表,前端轮询直到出图。慢的 ARK 出图在 Celery worker 里跑——
|
|
// Web 层不被 ~30s 请求占住 → 健康探针不饿死 → 根治"几张图整站 502";且提交成功后浏览器关掉/断网,
|
|
// worker 仍会把图生成并落库(扣费/退费在 worker 内闭环),重开素材库即可见。
|
|
return action(async () => {
|
|
const { tasks } = await api.submitGenerateImage(payload);
|
|
const ids = tasks.map((t) => t.id);
|
|
if (ids.length === 0) throw new Error("未能提交生成任务");
|
|
// 提交成功即落盘:刷新页面也能恢复"生成中"并继续轮询(任务在 worker 里跑,关掉浏览器也不丢)
|
|
saveImgwb(payload.mode, { pending: ids, results: [], count: payload.count });
|
|
return pollImageTasks(payload.mode, ids);
|
|
}, "图片已生成");
|
|
}
|
|
|
|
// 轮询一批已提交的生图任务直到全部出图/超时;每出一张就回写本地,刷新后可恢复。
|
|
async function pollImageTasks(mode: string | undefined, ids: string[]): Promise<{ assets: Asset[] }> {
|
|
const pending = new Set(ids);
|
|
const TERMINAL = new Set(["succeeded", "failed", "cancelled", "compensating"]);
|
|
const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
|
|
const assets: Asset[] = [];
|
|
let lastErr = "";
|
|
const deadline = Date.now() + 6 * 60 * 1000; // 兜底:6 分钟还没全好就停止轮询(图仍会在后台出完)
|
|
while (pending.size > 0 && Date.now() < deadline) {
|
|
await sleep(2500);
|
|
const res = await api.generateImageStatus([...pending]);
|
|
for (const t of res.tasks) {
|
|
if (!TERMINAL.has(t.status)) continue;
|
|
pending.delete(t.id);
|
|
if (t.status === "succeeded") assets.push(...(t.assets || []));
|
|
else if (t.error_message) lastErr = t.error_message;
|
|
}
|
|
// 进度回写:保留还在跑的 id + 已出结果,供刷新后恢复
|
|
saveImgwb(mode, { pending: [...pending], results: assets });
|
|
}
|
|
if (assets.length === 0) {
|
|
// 没出任何图:清掉本地残留,避免刷新后卡在空"生成中"
|
|
if (pending.size === 0) saveImgwb(mode, { pending: [], results: [] });
|
|
throw new Error(lastErr || (pending.size > 0 ? "生成超时,图片仍在后台生成,稍后可在素材库查看" : "未生成任何图片"));
|
|
}
|
|
saveImgwb(mode, { pending: [...pending], results: assets });
|
|
return { assets };
|
|
}
|
|
|
|
// 刷新后恢复:对本地残留的 pending 任务继续轮询(不再重复提交、不再重复扣费)。
|
|
function resumeImages(mode: string | undefined, ids: string[]) {
|
|
return pollImageTasks(mode, ids).catch(() => null);
|
|
}
|
|
|
|
// 轮询一批 AITask(基础资产/三视图异步出图)直到终态;返回成功任务产出的 assets 与最后错误。
|
|
// 轮询期间 Web 层是空闲的(只发轻量 status 请求),整站不卡;出图后调用方刷新项目即见新资产。
|
|
async function pollAiTasks(ids: string[]): Promise<{ assets: Asset[]; error: string }> {
|
|
const pending = new Set(ids);
|
|
const TERMINAL = new Set(["succeeded", "failed", "cancelled", "compensating"]);
|
|
const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
|
|
const assets: Asset[] = [];
|
|
let error = "";
|
|
const deadline = Date.now() + 6 * 60 * 1000; // 兜底:6 分钟还没好就停轮询(图仍会在后台出完,刷新可见)
|
|
while (pending.size > 0 && Date.now() < deadline) {
|
|
await sleep(2500);
|
|
const res = await api.generateImageStatus([...pending]).catch(() => null);
|
|
if (!res) continue;
|
|
for (const t of res.tasks) {
|
|
if (!TERMINAL.has(t.status)) continue;
|
|
pending.delete(t.id);
|
|
if (t.status === "succeeded") assets.push(...(t.assets || []));
|
|
else if (t.error_message) error = t.error_message;
|
|
}
|
|
}
|
|
return { assets, error };
|
|
}
|
|
|
|
// 基础资产/三视图异步出图统一入口:提交(秒回任务)→ 轮询出图 → 刷新项目 → 返回新资产 id 供链式(立绘→三视图)。
|
|
async function submitAndPollAsset(submit: () => Promise<{ task: { id: string; status: string } } | null>, okText: string): Promise<string | null> {
|
|
const submitted = await submit().catch((e) => { setNotice({ type: "error", text: e instanceof Error ? e.message : "提交失败" }); return null; });
|
|
const taskId = submitted?.task?.id;
|
|
if (!taskId) return null; // 提交失败(余额不足/无 worker 等),错误已由 submit 抛出处理
|
|
const { assets, error } = await pollAiTasks([taskId]);
|
|
await refreshProjectDetail();
|
|
void loadData();
|
|
if (assets.length === 0) {
|
|
setNotice({ type: "error", text: error || "生成超时,稍后可在资产里查看" });
|
|
return null;
|
|
}
|
|
setNotice({ type: "success", text: okText });
|
|
return assets[0].id;
|
|
}
|
|
|
|
async function onAuthed(payload: { token: string; user: User; team: Team; remember?: boolean }) {
|
|
setToken(payload.token, payload.remember ?? true);
|
|
setUser(payload.user);
|
|
setTeam(payload.team);
|
|
setBooting(false);
|
|
setAuthed(true);
|
|
navigate("dashboard", { replace: true });
|
|
// 首登水合:与 boot 路径一致地重试,失败不再静默(否则页面卡在全 0,要刷新才好)
|
|
loadDataWithRetry().catch((error) => {
|
|
console.error("[login] data hydrate failed:", error);
|
|
setNotice({ type: "error", text: "数据加载失败,请刷新页面重试" });
|
|
});
|
|
}
|
|
|
|
async function logout() {
|
|
await api.logout().catch(() => undefined);
|
|
setToken(null);
|
|
setAuthed(false);
|
|
setUser(null);
|
|
setTeam(null);
|
|
setAuthMode("login");
|
|
window.history.replaceState(null, "", "/login");
|
|
}
|
|
|
|
// ---- Auth gate ----
|
|
if (!authed) {
|
|
return (
|
|
<AuthScreen
|
|
initialMode={authMode}
|
|
onModeChange={(next) => {
|
|
setAuthMode(next);
|
|
window.history.pushState(null, "", "/login");
|
|
}}
|
|
onAuthed={onAuthed}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (booting || !user || !team) {
|
|
return (
|
|
<div className="app">
|
|
<main>
|
|
<div className="content">
|
|
<div className="page-head">
|
|
<div>
|
|
<h1>加载中…</h1>
|
|
<div className="sub">
|
|
<span className="mono">// 正在拉取团队数据</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const currentUser: User = user;
|
|
const currentTeam: Team = team;
|
|
|
|
function renderPage() {
|
|
switch (page) {
|
|
case "dashboard":
|
|
return <Dashboard products={products} projects={projects} assets={assets} billing={billing} userName={currentUser.username} navigate={navigate} />;
|
|
case "products":
|
|
return (
|
|
<ProductsPage
|
|
products={products}
|
|
projects={projects}
|
|
assets={assets}
|
|
navigate={navigate}
|
|
openProduct={(productId, tab) => navigate("productDetail", { productId, hash: tab === "videos" ? "videos" : undefined })}
|
|
onCreate={(payload) => action(() => api.createProduct(payload), "")}
|
|
onUploadImage={(productId, formData) => action(() => api.uploadProductImage(productId, formData), "")}
|
|
onDelete={(productId) => action(() => api.deleteProduct(productId), "商品已删除")}
|
|
/>
|
|
);
|
|
case "productCreateUpload":
|
|
// 设计稿:新建商品是商品库页上的右侧 Drawer(非独立整页),进入即自动打开
|
|
// 创建成功后由 ProductsPage 弹「继续创建商品 / 去新建项目」选择弹窗,不再自动跳详情
|
|
return (
|
|
<ProductsPage
|
|
products={products}
|
|
projects={projects}
|
|
assets={assets}
|
|
navigate={navigate}
|
|
openProduct={(productId, tab) => navigate("productDetail", { productId, hash: tab === "videos" ? "videos" : undefined })}
|
|
onCreate={(payload) => action(() => api.createProduct(payload), "")}
|
|
onUploadImage={(productId, formData) => action(() => api.uploadProductImage(productId, formData), "")}
|
|
onDelete={(productId) => action(() => api.deleteProduct(productId), "商品已删除")}
|
|
autoOpenCreate
|
|
/>
|
|
);
|
|
case "productDetail":
|
|
if (!activeProduct) return <ProductsPage products={products} assets={assets} navigate={navigate} openProduct={(productId, tab) => navigate("productDetail", { productId, hash: tab === "videos" ? "videos" : undefined })} onCreate={(payload) => action(() => api.createProduct(payload), "")} onDelete={(productId) => action(() => api.deleteProduct(productId), "商品已删除")} />;
|
|
return (
|
|
<ProductDetailPage
|
|
product={activeProduct}
|
|
projects={projects.filter((project) => project.product === activeProduct.id)}
|
|
assets={assets}
|
|
initialTab={route.hash === "videos" ? "videos" : "assets"}
|
|
navigate={navigate}
|
|
onUpdate={(payload) => action(() => api.updateProduct(activeProduct.id, payload), "商品已更新")}
|
|
onUploadImage={(formData) => action(() => api.uploadProductImage(activeProduct.id, formData), "商品图已上传")}
|
|
onDeleteImage={(imageId) => action(() => api.deleteProductImage(activeProduct.id, imageId), "商品图已移除")}
|
|
onGenerateImages={generateImages}
|
|
onAdoptTriView={(asset) => action(() => api.updateProduct(activeProduct.id, { cover_asset: asset.id }), "三视图已采用为商品图")}
|
|
/>
|
|
);
|
|
case "projects":
|
|
return (
|
|
<ProjectsPage
|
|
products={products}
|
|
projects={projects}
|
|
navigate={navigate}
|
|
onCreate={(payload) => action(() => api.createProject(payload), "项目已创建")}
|
|
openPipeline={(projectId) => navigate("pipeline", { projectId })}
|
|
onDelete={(projectId) => action(() => api.deleteProject(projectId), "项目已删除")}
|
|
/>
|
|
);
|
|
case "projectWizard":
|
|
return (
|
|
<ProjectWizardPage
|
|
products={products}
|
|
projects={projects}
|
|
assets={assets}
|
|
preselectProductId={activeProductId}
|
|
onBack={() => navigate("projects")}
|
|
onCreate={async (payload) => {
|
|
const created = await action(() => api.createProject(payload), "项目已创建");
|
|
if (created) {
|
|
// 立刻把新项目落到 detail/列表,避免后台 hydrate 期间 pipeline 先闪出旧项目数据
|
|
// (旧项目的脚本会污染新项目的脚本助手 chat)
|
|
setProjectDetail(created);
|
|
setProjects((prev) => (prev.some((p) => p.id === created.id) ? prev : [created, ...prev]));
|
|
navigate("pipeline", { projectId: created.id });
|
|
}
|
|
}}
|
|
onCreateProduct={(payload) => action(() => api.createProduct(payload), "")}
|
|
/>
|
|
);
|
|
case "pipeline":
|
|
// 有项目时由下方 full-screen 特例渲染;这里只兜底「暂无项目」
|
|
return (
|
|
<div className="page-head">
|
|
<div>
|
|
<h1>暂无项目</h1>
|
|
<div className="sub">
|
|
<span className="mono">// 先创建一个视频项目</span>
|
|
</div>
|
|
</div>
|
|
<div className="actions">
|
|
<button className="btn btn-primary" type="button" onClick={() => navigate("projectWizard")}>
|
|
新建视频项目
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
case "library":
|
|
return <LibraryPage assets={assets} onUpload={(formData) => action(() => api.uploadAsset(formData), "资产已上传")} onDelete={(id) => action(() => api.deleteAsset(id), "资产已删除")} />;
|
|
case "account":
|
|
return (
|
|
<AccountPage
|
|
billing={billing}
|
|
ledgers={ledgers}
|
|
trend={billingTrend}
|
|
projects={projects}
|
|
teamMembers={teamMembers}
|
|
onRecharge={(amount, bonus) => action(() => api.recharge({ amount, bonus }), "充值成功")}
|
|
/>
|
|
);
|
|
case "team":
|
|
return (
|
|
<TeamPage
|
|
team={currentTeam}
|
|
user={currentUser}
|
|
members={teamMembers}
|
|
billing={billing}
|
|
notifications={notifications}
|
|
notificationTotal={notificationTotal}
|
|
navigate={navigate}
|
|
onCreateMember={(payload) => action(() => api.createTeamMember(payload), "成员账户已创建")}
|
|
onUpdateMember={(id, payload) => action(() => api.updateTeamMember(id, payload), "成员已更新")}
|
|
onRemoveMember={(id) => action(() => api.removeTeamMember(id), "成员已移除")}
|
|
onResetPassword={(id, password) => action(() => api.resetMemberPassword(id, password), "密码已重置")}
|
|
onRecharge={(amount, bonus) => action(() => api.recharge({ amount, bonus }), "充值成功")}
|
|
/>
|
|
);
|
|
case "messages":
|
|
return (
|
|
<MessagesPage
|
|
unreadCount={unreadCount}
|
|
onMarkRead={markNotificationRead}
|
|
onMarkAllRead={markAllNotificationsRead}
|
|
navigate={navigate}
|
|
/>
|
|
);
|
|
case "assetFactory":
|
|
return <AssetFactoryPage navigate={navigate} aiTasks={aiTasks} assets={assets} />;
|
|
case "imageOptimize":
|
|
return <ImageWorkbenchPage mode="image" products={products} assets={assets} modelConfigs={modelConfigs} initialProductId={activeProductId} onBack={() => navigate("assetFactory")} navigate={navigate} onGenerate={generateImages} onResume={resumeImages} />;
|
|
case "modelPhoto":
|
|
return <ImageWorkbenchPage mode="model" products={products} assets={assets} modelConfigs={modelConfigs} initialProductId={activeProductId} onBack={() => navigate("assetFactory")} navigate={navigate} onGenerate={generateImages} onResume={resumeImages} />;
|
|
case "platformCover":
|
|
return <ImageWorkbenchPage mode="cover" products={products} assets={assets} modelConfigs={modelConfigs} initialProductId={activeProductId} onBack={() => navigate("assetFactory")} navigate={navigate} onGenerate={generateImages} onResume={resumeImages} />;
|
|
case "modelPhotoDemoA":
|
|
return <ModelPhotoDemoPage variant="A" products={products} onBack={() => navigate("modelPhoto")} navigate={navigate} />;
|
|
case "modelPhotoDemoB":
|
|
return <ModelPhotoDemoPage variant="B" products={products} onBack={() => navigate("modelPhoto")} navigate={navigate} />;
|
|
case "settings":
|
|
return <SettingsPage user={currentUser} team={currentTeam} preferences={preferences} sessions={sessions} onSavePreferences={savePreferences} onRevokeSession={revokeSession} onRevokeOthers={revokeOtherSessions} onSaveProfile={saveProfile} onChangePassword={changeOwnPassword} onUploadAvatar={uploadOwnAvatar} onResetAvatar={resetOwnAvatar} onNotify={(text) => setNotice({ type: "success", text })} onLogout={logout} />;
|
|
case "settingsNotify":
|
|
return <SettingsPage user={currentUser} team={currentTeam} initialSection="notify" preferences={preferences} sessions={sessions} onSavePreferences={savePreferences} onRevokeSession={revokeSession} onRevokeOthers={revokeOtherSessions} onSaveProfile={saveProfile} onChangePassword={changeOwnPassword} onUploadAvatar={uploadOwnAvatar} onResetAvatar={resetOwnAvatar} onNotify={(text) => setNotice({ type: "success", text })} onLogout={logout} />;
|
|
default:
|
|
return <Dashboard products={products} projects={projects} assets={assets} billing={billing} navigate={navigate} />;
|
|
}
|
|
}
|
|
|
|
const avatarChar = (currentTeam.name || currentUser.username || "A").slice(0, 1).toUpperCase();
|
|
const here = crumbLabels[page] || routeLabels[page] || "工作台";
|
|
|
|
// 生产管线 · 全屏 bespoke 布局(自带顶栏 + 步进器),脱离常规 shell
|
|
// projectDetail 只有在确实是当前激活项目时才用;否则回退 activeProject。
|
|
// 否则后台 refreshProjectDetail 拿旧 id 的结果会把刚进入的新项目串成上一个项目(实测发现)。
|
|
const pipelineProject = projectDetail && projectDetail.id === activeProjectId ? projectDetail : activeProject;
|
|
if (page === "pipeline" && pipelineProject) {
|
|
const textModel = modelConfigs.find((m) => m.capability === "text" && m.status === "active") || modelConfigs.find((m) => m.capability === "text");
|
|
return (
|
|
<PipelinePage
|
|
key={pipelineProject.id}
|
|
project={pipelineProject}
|
|
scriptModelName={textModel?.display_name || textModel?.name || "AI"}
|
|
textModels={modelConfigs.filter((m) => m.capability === "text" && m.status === "active")}
|
|
loading={loading}
|
|
navigate={navigate}
|
|
user={currentUser}
|
|
team={currentTeam}
|
|
products={products}
|
|
projects={projects}
|
|
assets={assets}
|
|
billing={billing}
|
|
notice={notice}
|
|
unreadCount={unreadCount}
|
|
avatarChar={avatarChar}
|
|
logout={logout}
|
|
onGenerateScript={(prompt, source) => action(() => api.generateScript(pipelineProject.id, { prompt, source }), "脚本已生成")}
|
|
onAdoptScript={(scriptId) => action(() => api.adoptScript(pipelineProject.id, scriptId), "脚本已采用")}
|
|
onUpdateShot={(payload) => action(() => api.updateScriptSegment(pipelineProject.id, payload), "分镜已更新")}
|
|
onAddShot={(afterSegmentId) => action(() => api.addScriptSegment(pipelineProject.id, { after_segment_id: afterSegmentId }), "分镜已添加")}
|
|
onDeleteShot={(segmentId) => action(() => api.deleteScriptSegment(pipelineProject.id, { segment_id: segmentId }), "分镜已删除")}
|
|
onRerunShot={(segmentId, instruction) => action(() => api.rerunScriptSegment(pipelineProject.id, { segment_id: segmentId, instruction }), "分镜已重跑")}
|
|
onSaveProjectMeta={(meta) =>
|
|
// metadata 是整体替换:合并现有 project.metadata 后再 PATCH,别把别的 key(wizard 等)冲掉
|
|
action(() => api.updateProject(pipelineProject.id, { metadata: { ...(pipelineProject.metadata ?? {}), ...meta } }), "已保存")
|
|
}
|
|
onAdoptVideoVersion={(segmentId, versionId) => action(() => api.adoptVideoVersion(pipelineProject.id, { video_segment_id: segmentId, version_id: versionId }), "已采用该版本")}
|
|
onGenerateVoiceover={(payload) => action(() => api.generateVoiceover(pipelineProject.id, payload), "配音已生成")}
|
|
onGenerateBaseAsset={async (kind, prompt, label) => {
|
|
// 异步:提交→轮询出图→刷新;返回新资产 id 供「立绘→三视图」链式生成
|
|
const assetId = await submitAndPollAsset(() => api.generateBaseAsset(pipelineProject.id, { kind, prompt, label }), "基础资产已生成");
|
|
return assetId ? { adopted_asset: assetId } : null;
|
|
}}
|
|
onGenerateStoryboard={(prompt) =>
|
|
action(async () => {
|
|
// 异步故事板:提交(秒回)后轮询;后端在后台线程逐帧生成,poll 永远秒回,故每轮间隔等待
|
|
await api.generateStoryboard(pipelineProject.id, { prompt });
|
|
for (let i = 0; i < 60; i += 1) {
|
|
const res = await api.pollStoryboard(pipelineProject.id);
|
|
if (res.status === "succeeded") return true;
|
|
if (res.status === "failed") throw new Error(res.error || "故事板生成失败,请重试");
|
|
await new Promise((resolve) => setTimeout(resolve, 4000));
|
|
}
|
|
// 轮询窗口耗尽仍未完成:如实报超时,不能让 action 弹「已生成」的假成功 toast
|
|
throw new Error("故事板生成超时,请稍后刷新查看或重试");
|
|
}, "故事板已生成")
|
|
}
|
|
onAdoptBaseAsset={(groupId, assetId) => action(() => api.adoptBaseAsset(pipelineProject.id, { group_id: groupId, asset_id: assetId }), "已采用该候选")}
|
|
onAttachBaseAsset={(target, assetId) => action(() => api.attachBaseAsset(pipelineProject.id, { ...target, asset_id: assetId }), "已替换为所选演员")}
|
|
onGenerateTriview={async (portraitAssetId) => {
|
|
// 异步:image_edit 慢出图在 worker 跑,轮询期间整站不卡;出图后刷新即见三视图
|
|
const assetId = await submitAndPollAsset(() => api.generateTriview(pipelineProject.id, { portrait_asset_id: portraitAssetId }), "三视图已据立绘生成");
|
|
return assetId ? { id: assetId } : null;
|
|
}}
|
|
onGenerateActor={(prompt) => generateImages({ prompt, mode: "model", count: 1 })}
|
|
onUploadActor={(file) => {
|
|
const fd = new FormData();
|
|
fd.append("file", file);
|
|
fd.append("name", file.name);
|
|
fd.append("asset_type", "image");
|
|
fd.append("category", "person");
|
|
// 返回上传后的 Asset(供添加人物工作台进右侧栏做三视图/命名)
|
|
return action(() => api.uploadAsset(fd), "");
|
|
}}
|
|
// 流程步骤4 · 添加人物工作台命名:把名字写回该人物资产
|
|
onRenameActor={(assetId, name) => action(() => api.updateAsset(assetId, { name }), "")}
|
|
onSkipStoryboard={() => action(() => api.skipStoryboard(pipelineProject.id), "已跳过故事板")}
|
|
onSubmitVideo={(segmentId, prompt) => action(() => api.submitVideo(pipelineProject.id, { video_segment_id: segmentId, prompt }), "视频片段已提交,生成中…")}
|
|
onSubmitAllVideos={(prompt) =>
|
|
action(async () => {
|
|
const targets = pipelineProject.video_segments.filter((segment) => !["running", "succeeded"].includes(segment.status));
|
|
for (const segment of targets) {
|
|
await api.submitVideo(pipelineProject.id, {
|
|
video_segment_id: segment.id,
|
|
prompt: `${prompt} 第 ${segment.sort_order + 1} 段，时长 ${segment.target_duration_seconds} 秒`
|
|
});
|
|
}
|
|
return targets.length;
|
|
}, "多段视频已提交,生成中…")
|
|
}
|
|
onPollVideosQuiet={pollVideosQuiet}
|
|
exportResult={exportResult}
|
|
onRefreshExport={refreshExport}
|
|
onRefreshProject={refreshProjectDetail}
|
|
onUploadVideoSegment={(segmentId, file) => action(() => api.uploadVideoSegment(pipelineProject.id, segmentId, file), "视频已上传")}
|
|
onUploadBgm={(file, volume) => action(() => api.uploadBgm(pipelineProject.id, file, volume), "BGM 已上传")}
|
|
onSaveTimeline={(payload) => action(() => api.saveTimeline(pipelineProject.id, payload), "草稿已保存")}
|
|
onSubmitExport={(payload) =>
|
|
action(async () => {
|
|
// 导出前先落盘当前编辑态(片段/字幕/转场/BGM),成片即所见
|
|
if (payload) await api.saveTimeline(pipelineProject.id, payload);
|
|
await api.submitExport(pipelineProject.id);
|
|
// 后端在后台线程跑 ffmpeg 拼接,这里轮询 poll-export 直到成片/失败,实时回填进度
|
|
for (let i = 0; i < 160; i += 1) {
|
|
const res = await api.pollExport(pipelineProject.id);
|
|
setExportResult(res);
|
|
if (res.status === "succeeded") return res;
|
|
if (res.status === "failed") throw new Error(res.error_message || "拼接导出失败,请重试");
|
|
await new Promise((resolve) => setTimeout(resolve, 2500));
|
|
}
|
|
// 轮询窗口耗尽:如实报超时(后台 ffmpeg 可能仍在跑,进入拼接页会自动回填)
|
|
throw new Error("导出超时,后台可能仍在拼接,稍后回到本页查看");
|
|
}, "成片已导出")
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="app">
|
|
<Sidebar page={page} navigate={navigate} user={currentUser} team={currentTeam} products={products} projects={projects} />
|
|
<main>
|
|
<Decorations />
|
|
<header className="topbar">
|
|
<div className="crumbs">
|
|
{page === "dashboard" ? (
|
|
<span className="here">工作台</span>
|
|
) : (
|
|
<>
|
|
<a href="/dashboard" onClick={(event) => { event.preventDefault(); navigate("dashboard"); }}>工作台</a>
|
|
<span className="sep">/</span>
|
|
<span className="here">{here}</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="right">
|
|
<span className="balance-chip" onClick={() => navigate("account")}>
|
|
<IconKitSvg name="creditCard" />
|
|
余额 <strong>{money(billing?.account.balance)}</strong>
|
|
</span>
|
|
<button className="icon-btn" type="button" onClick={() => navigate("messages")} title="消息中心">
|
|
<IconKitSvg name="bell" />
|
|
{unreadCount > 0 && <span className="count-noti">{unreadCount}</span>}
|
|
</button>
|
|
<div className="topbar-avatar" onDoubleClick={logout} title="账户(双击退出)">
|
|
<span>{avatarChar}</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div className="content" id="page-content">
|
|
<CornerMarks />
|
|
{notice && <ToastLike notice={notice} />}
|
|
{renderPage()}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|