seaislee1209andClaude Opus 4.8
2e880714b1
- F1 缺三视图标签:橙底白字 r-sm → 白底琥珀描边胶囊(对齐设计稿) - F3 立绘容器 3/4 → 9/16(资产详情左 + 库 adx-lead-img) - F4 库三视图格 adx-tri-cell 3/4 → 16/9(流水线详情本就 16/9) - F6 资产详情提示词栏 .ad-detail-prompt 固定高度 88px + resize:none - F2 人物提示词框 .asset-prompt-edit 固定 74px(≈三行)+ resize:none,studio rows 4→3 - F7 三视图上方 icon 按钮 hover:橙底+白 icon(原仅字色变橙) - F5 资产详情「重跑立绘/替换」按钮行右对齐 - F8(商品块 vs 人物块统一)结构性差异,待用户指认,本轮挂起 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
280 lines
18 KiB
TypeScript
280 lines
18 KiB
TypeScript
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import { createPortal } from "react-dom";
|
|
import type { CSSProperties } from "react";
|
|
import { api } from "../api";
|
|
import type { Asset } from "../types";
|
|
import { useBodyScrollLock, MediaLightbox } from "./overlays";
|
|
|
|
// 流程步骤4 · 演员库:平台预设演员 + 我的演员(本地上传/AI 生成)。
|
|
// 两种用法:browse(纯浏览 / 添加演员)与 replace(从演员库选一个回填到某基础资产卡)。
|
|
const mediaStyle = (url: string): CSSProperties => ({ ["--mock-media-url"]: `url(${url})` } as CSSProperties);
|
|
const previewOf = (a: Asset): string => a.files?.find((f) => f.is_primary)?.preview_url || a.files?.[0]?.preview_url || "";
|
|
// 平台预设 = 模特库生成的(metadata.kind==="model")或系统来源;其余 person 资产归「我的演员」
|
|
const isPreset = (a: Asset): boolean => (a.metadata?.kind as string) === "model" || a.source === "system" || a.source === "ai_generated";
|
|
|
|
export function ActorLibrary({ open, mode, initialStudio, assets, onClose, onPick, onGenerate, onUpload, onGenerateTriview, onRename, onRefresh }: {
|
|
open: boolean;
|
|
mode: "browse" | "replace";
|
|
initialStudio?: boolean; // 打开即进「添加人物工作台」
|
|
assets: Asset[];
|
|
onClose: () => void;
|
|
onPick?: (assetId: string, assetName?: string) => void | Promise<unknown>;
|
|
onGenerate: (prompt: string) => Promise<{ assets: Asset[] } | null>;
|
|
onUpload: (file: File) => Promise<Asset | null>;
|
|
// 据选中立绘生成配套三视图(后端吃任意 person 资产 id,不依赖该资产已在某 base group)
|
|
onGenerateTriview?: (portraitAssetId: string) => Promise<{ id: string } | null>;
|
|
onRename?: (assetId: string, name: string) => Promise<unknown>; // 给人物命名(写回资产 name)
|
|
onRefresh: () => void;
|
|
}) {
|
|
const [tab, setTab] = useState<"preset" | "mine">("preset");
|
|
const [studio, setStudio] = useState(Boolean(initialStudio)); // 添加演员工作台
|
|
const [studioMode, setStudioMode] = useState<"ai" | "upload">("ai");
|
|
const [prompt, setPrompt] = useState("");
|
|
const [busy, setBusy] = useState(false);
|
|
const [preview, setPreview] = useState<{ src: string; name: string } | null>(null);
|
|
// 添加人物工作台多步态:候选立绘 + 选中那张 + 命名 + 三视图就绪标志
|
|
const [candidates, setCandidates] = useState<Asset[]>([]); // AI 生成/上传得到的立绘候选
|
|
const [picked, setPicked] = useState<Asset | null>(null); // 进右侧栏的那张立绘
|
|
const [actorName, setActorName] = useState("");
|
|
const [triReady, setTriReady] = useState(false); // 已据选中立绘生成过三视图
|
|
const fileRef = useRef<HTMLInputElement | null>(null);
|
|
useBodyScrollLock(open);
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
|
|
window.addEventListener("keydown", onKey);
|
|
return () => window.removeEventListener("keydown", onKey);
|
|
}, [open, onClose]);
|
|
// 每次打开按 initialStudio 重置 studio,并清空工作台多步态(避免上次残留)
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
setStudio(Boolean(initialStudio));
|
|
setStudioMode("ai");
|
|
setCandidates([]); setPicked(null); setActorName(""); setTriReady(false);
|
|
}, [open, initialStudio]);
|
|
|
|
// 演员库自取 person 资产:全局 assets 已不再全量预载(按需懒加载),不能再依赖传入的 assets prop,
|
|
// 否则平台预设/我的演员全空。打开时拉一页(团队 person 资产),保存后 reload 让新人物即时入列。
|
|
const [fetched, setFetched] = useState<Asset[]>([]);
|
|
const reload = useCallback(async () => {
|
|
const res = await api.assetsPage({ category: "person", pageSize: 200, ordering: "-created_at" }).catch(() => null);
|
|
setFetched(res?.results ?? []);
|
|
}, []);
|
|
useEffect(() => { if (open) void reload(); }, [open, reload]);
|
|
|
|
// person 类资产 → 演员;按 preset / mine 分两 tab。合并 prop(兼容旧调用)+ 自取,按 id 去重。
|
|
const source = useMemo(() => {
|
|
const map = new Map<string, Asset>();
|
|
for (const a of [...assets, ...fetched]) map.set(a.id, a);
|
|
return [...map.values()];
|
|
}, [assets, fetched]);
|
|
const people = useMemo(() => source.filter((a) => a.category === "person" && previewOf(a)), [source]);
|
|
const list = people.filter((a) => (tab === "preset" ? isPreset(a) : !isPreset(a)));
|
|
|
|
// 演员库分页(客户端):一页 10 个(5 列 × 2 行)。切 tab / 列表变化时回第 1 页,避免停在越界页。
|
|
const PAGE_SIZE = 10;
|
|
const [page, setPage] = useState(1);
|
|
const pageCount = Math.max(1, Math.ceil(list.length / PAGE_SIZE));
|
|
useEffect(() => { setPage(1); }, [tab, open]);
|
|
useEffect(() => { setPage((p) => Math.min(p, pageCount)); }, [pageCount]);
|
|
const pageList = list.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
|
|
|
|
// 选某张候选立绘 → 进右侧栏(预填名字,清三视图标志)
|
|
function pickCandidate(a: Asset) {
|
|
setPicked(a);
|
|
setActorName(a.name || "");
|
|
setTriReady(false);
|
|
}
|
|
// AI 生成立绘候选(不直接关 studio,等用户选一张进下一步)
|
|
async function genCandidates() {
|
|
const p = prompt.trim() || "电商真人模特,自然光,干净背景,9:16 竖屏,正面半身";
|
|
setBusy(true);
|
|
try {
|
|
const res = await onGenerate(p);
|
|
const got = res?.assets?.filter((a) => previewOf(a)) ?? [];
|
|
setCandidates(got);
|
|
if (got.length === 1) pickCandidate(got[0]); // 只有一张就直接进右侧栏
|
|
} finally { setBusy(false); }
|
|
}
|
|
// 本地上传 → 直接作为选中立绘进右侧栏
|
|
async function uploadCandidate(file?: File | null) {
|
|
if (!file) return;
|
|
setBusy(true);
|
|
try {
|
|
const asset = await onUpload(file);
|
|
if (asset && previewOf(asset)) { setCandidates([asset]); pickCandidate(asset); }
|
|
} finally { setBusy(false); }
|
|
}
|
|
// 据选中立绘生成三视图(后端异步出图,完成后刷新即见;本地无 worker 时点了不报错)
|
|
async function genTriview() {
|
|
if (!picked || !onGenerateTriview) return;
|
|
setBusy(true);
|
|
try {
|
|
const r = await onGenerateTriview(picked.id);
|
|
if (r) setTriReady(true);
|
|
} finally { setBusy(false); }
|
|
}
|
|
// 保存人物:写名字(若有改名能力)→ 刷新 → 关工作台 → 切「我的演员」tab
|
|
async function saveActor() {
|
|
if (!picked) return;
|
|
setBusy(true);
|
|
try {
|
|
const name = actorName.trim();
|
|
if (name && name !== picked.name && onRename) await onRename(picked.id, name);
|
|
onRefresh();
|
|
void reload(); // 新保存的人物即时进「我的演员」列表(自取,不依赖父级全局 assets)
|
|
setStudio(false);
|
|
setCandidates([]); setPicked(null); setActorName(""); setTriReady(false);
|
|
setTab("mine");
|
|
} finally { setBusy(false); }
|
|
}
|
|
|
|
if (!open) return null;
|
|
return createPortal(
|
|
<div className="actorlib-bg" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
|
|
<div className="actorlib" role="dialog" aria-modal="true" aria-label="演员库">
|
|
<div className="actorlib-h">
|
|
<h2>{mode === "replace" ? "演员库 · 选择演员" : "演员库"}</h2>
|
|
<span className="mono" style={{ fontSize: 12, color: "var(--black-alpha-48)" }}>// {mode === "replace" ? "点演员卡即选用应用" : "平台预设演员 / 我的演员"}</span>
|
|
<button className="x" type="button" aria-label="关闭" onClick={onClose}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M6 6l12 12M6 18L18 6" /></svg>
|
|
</button>
|
|
</div>
|
|
|
|
{studio ? (
|
|
<div className="actorlib-body">
|
|
<div className="actorlib-studio-h">
|
|
<button className="btn btn-ghost btn-sm" type="button" onClick={() => setStudio(false)}>
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: 4 }}><path d="M19 12H5M12 19l-7-7 7-7" /></svg>
|
|
返回演员库
|
|
</button>
|
|
<strong style={{ fontSize: 14 }}>添加人物工作台</strong>
|
|
</div>
|
|
<div className="actorlib-tabs" style={{ marginBottom: 14 }}>
|
|
<button className={`al-tab${studioMode === "ai" ? " active" : ""}`} type="button" onClick={() => { setStudioMode("ai"); setCandidates([]); setPicked(null); }}>AI 生成</button>
|
|
<button className={`al-tab${studioMode === "upload" ? " active" : ""}`} type="button" onClick={() => { setStudioMode("upload"); setCandidates([]); setPicked(null); }}>本地上传</button>
|
|
</div>
|
|
{/* 多步工作台:左 = 生成/上传 + 立绘候选;右 = 选中立绘的命名/三视图/保存 */}
|
|
<div className="actorlib-studio-grid">
|
|
<div className="actorlib-studio-left">
|
|
{studioMode === "ai" ? (
|
|
<div className="actorlib-studio-ai">
|
|
<div className="muted mono" style={{ fontSize: 12, marginBottom: 6, letterSpacing: ".04em" }}>// 1 描述演员形象(年龄 / 风格 / 妆造 / 背景)→ 生成立绘候选</div>
|
|
<textarea className="asset-prompt-edit" rows={3} placeholder="如:25 岁都市白领女性,通勤淡妆,简约棚拍背景,9:16 竖屏正面半身" value={prompt} onChange={(e) => setPrompt(e.target.value)} />
|
|
<button className="btn btn-primary" type="button" disabled={busy} style={{ marginTop: 12 }} onClick={() => void genCandidates()}>
|
|
{busy ? "生成中…" : "生成立绘"}
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="actorlib-studio-upload">
|
|
<div className="muted mono" style={{ fontSize: 12, marginBottom: 6, letterSpacing: ".04em" }}>// 1 上传本地人物图片 → 进右侧栏生成三视图 / 命名</div>
|
|
<div className="actorlib-drop" role="button" tabIndex={0} onClick={() => fileRef.current?.click()} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); fileRef.current?.click(); } }}>
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><path d="M17 8l-5-5-5 5" /><path d="M12 3v12" /></svg>
|
|
<div style={{ marginTop: 10, fontSize: 13 }}>{busy ? "上传中…" : "点击选择本地人物图片上传"}</div>
|
|
<div className="mono" style={{ fontSize: 12, color: "var(--black-alpha-48)", marginTop: 4 }}>// JPG / PNG / WEBP</div>
|
|
</div>
|
|
<input ref={fileRef} type="file" accept="image/*" style={{ display: "none" }} onChange={(e) => { void uploadCandidate(e.target.files?.[0]); e.currentTarget.value = ""; }} />
|
|
</div>
|
|
)}
|
|
{candidates.length > 0 && (
|
|
<>
|
|
<div className="muted mono" style={{ fontSize: 12, margin: "14px 0 6px", letterSpacing: ".04em" }}>// 2 选一张立绘 → 右侧命名 / 生成三视图 / 保存</div>
|
|
<div className="actorlib-grid">
|
|
{candidates.map((a) => {
|
|
const url = previewOf(a);
|
|
return (
|
|
<div className="actor-card" key={a.id}>
|
|
<div className={`placeholder actor-thumb${url ? " has-mock-media" : ""}${picked?.id === a.id ? " active" : ""}`} style={url ? mediaStyle(url) : undefined}
|
|
role="button" tabIndex={0} title="选用这张立绘"
|
|
onClick={() => pickCandidate(a)}
|
|
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); pickCandidate(a); } }}>
|
|
{!url && <span className="ph-frame">{a.name}</span>}
|
|
<span className="actor-pick">{picked?.id === a.id ? "已选" : "选用"}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="actorlib-studio-right">
|
|
{picked ? (
|
|
<div className="actorlib-studio-detail">
|
|
<div className={`placeholder actor-thumb${previewOf(picked) ? " has-mock-media" : ""}`} style={previewOf(picked) ? mediaStyle(previewOf(picked)) : undefined}>
|
|
{!previewOf(picked) && <span className="ph-frame">{picked.name}</span>}
|
|
</div>
|
|
<label className="muted mono" style={{ fontSize: 12, margin: "12px 0 4px", display: "block", letterSpacing: ".04em" }}>// 3 给人物命名</label>
|
|
<input className="asset-prompt-edit" style={{ minHeight: 0, height: 36 }} placeholder="如:都市白领 · 小林" value={actorName} onChange={(e) => setActorName(e.target.value)} />
|
|
{onGenerateTriview && (
|
|
<button className="btn btn-ghost btn-sm" type="button" disabled={busy} style={{ marginTop: 12 }} onClick={() => void genTriview()}>
|
|
{busy ? "提交中…" : triReady ? "已提交三视图 · 再生成一版" : "生成三视图"}
|
|
</button>
|
|
)}
|
|
{triReady && <div className="muted mono" style={{ fontSize: 12, marginTop: 6 }}>// 三视图出图在后台进行,保存后回人物卡详情可查看</div>}
|
|
<button className="btn btn-primary" type="button" disabled={busy} style={{ marginTop: 14, width: "100%" }} onClick={() => void saveActor()}>
|
|
{busy ? "保存中…" : "保存人物"}
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="placeholder" style={{ minHeight: 220, flexDirection: "column", gap: 10 }}>
|
|
<span className="ph-frame">// {studioMode === "ai" ? "生成立绘后,选一张进入这里" : "上传图片后,在这里命名 / 生成三视图"}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="actorlib-body">
|
|
<div className="actorlib-toolbar">
|
|
<div className="actorlib-tabs">
|
|
<button className={`al-tab${tab === "preset" ? " active" : ""}`} type="button" onClick={() => setTab("preset")}>平台预设演员 · {people.filter(isPreset).length}</button>
|
|
<button className={`al-tab${tab === "mine" ? " active" : ""}`} type="button" onClick={() => setTab("mine")}>我的演员 · {people.filter((a) => !isPreset(a)).length}</button>
|
|
</div>
|
|
<span className="spacer" style={{ flex: 1 }}></span>
|
|
<button className="btn btn-primary btn-sm" type="button" onClick={() => { setStudio(true); setStudioMode("ai"); }}>
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: 4 }}><path d="M12 5v14M5 12h14" /></svg>
|
|
添加演员
|
|
</button>
|
|
</div>
|
|
{list.length ? (
|
|
<>
|
|
<div className="actorlib-grid">
|
|
{pageList.map((a) => {
|
|
const url = previewOf(a);
|
|
return (
|
|
<div className="actor-card" key={a.id}>
|
|
<div className={`placeholder actor-thumb${url ? " has-mock-media" : ""}`} style={url ? mediaStyle(url) : undefined}
|
|
role="button" tabIndex={0} title={mode === "replace" ? "选用此演员" : "查看大图"}
|
|
onClick={() => { if (mode === "replace") { void onPick?.(a.id, a.name); } else if (url) { setPreview({ src: url, name: a.name }); } }}
|
|
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); if (mode === "replace") { void onPick?.(a.id, a.name); } else if (url) { setPreview({ src: url, name: a.name }); } } }}>
|
|
{!url && <span className="ph-frame">{a.name}</span>}
|
|
{mode === "replace" && <span className="actor-pick">选用</span>}
|
|
</div>
|
|
<div className="actor-name" title={a.name}>{a.name}</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
{pageCount > 1 && (
|
|
<div className="actorlib-pager" style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, marginTop: 16 }}>
|
|
<button className="btn btn-ghost btn-sm" type="button" disabled={page <= 1} onClick={() => setPage((p) => Math.max(1, p - 1))}>上一页</button>
|
|
<span className="mono" style={{ fontSize: 12, color: "var(--black-alpha-48)" }}>{page} / {pageCount}</span>
|
|
<button className="btn btn-ghost btn-sm" type="button" disabled={page >= pageCount} onClick={() => setPage((p) => Math.min(pageCount, p + 1))}>下一页</button>
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<div className="placeholder" style={{ minHeight: 160, flexDirection: "column", gap: 10 }}>
|
|
<span className="ph-frame">// {tab === "preset" ? "暂无平台预设演员" : "还没有自己的演员 · 点右上「添加演员」"}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<MediaLightbox open={!!preview} src={preview?.src || ""} kind="image" name={preview?.name} close={() => setPreview(null)} />
|
|
</div>,
|
|
document.body,
|
|
);
|
|
}
|