fix: 测试清单遗留bug批量修复(15条:商品库/消费/团队/设置/消息中心/平台套图/资产库)
- R6 商品图删除不生效: 封面asset移交+绕开prefetch缓存, 前端封面缩图补删除入口 - R48 消息中心长文本与UI框错位: 胶囊单行省略+优先级标签禁压缩 - R70 账单流水筛选: 后端加ledger_type过滤, count随筛选变化, 切筛选重置页码 - R72 月限额改后不刷新: 团队页/消费页自取最新teamSettings, 两页同源 - R83/R86 平台套图提示词框加大+模型胶囊嵌入输入框(复用Pill组件) - R96 未读角标: 修KeyTextTransform注解过滤触发MySQL 3141致接口500 - R100 工作台记录丢失: 新增GET /api/ai/tasks/workbench/ 同源恢复, 废除localStorage方案 - R104 卖点添加按钮移出输入框, 新建抽屉+编辑态统一 - R106 商品库宽屏锁5列, 10个/页铺满两行 - R108 资产删除改软删+单张删除+回收站二次确认; trash页商品/资产双分区+restore/purge端点 - R109 生成图自动入资产库(person演员立绘除外), 迁移0008存量回填, 移除全部加入资产库入口 - R65 无需改动(22268d6已修, 测旧部署所致) 验证: tsc/build/check/makemigrations --check 通过, 后端测试210/210, perf-probe PASS Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
zyc
@@ -129,29 +129,40 @@ export function AccountPage({ billing, projects, team, onRecharge }: {
|
||||
// 趋势(day,首屏)+ 团队成员(成员/限额 tab)本页懒加载
|
||||
const [trend, setTrend] = useState<BillingTrend | null>(null);
|
||||
const [teamMembers, setTeamMembers] = useState<TeamMember[]>([]);
|
||||
// 团队级月限额本页自取最新值:team prop 来自登录时 /me/ 快照,团队页改完月限额后不刷新会陈旧,
|
||||
// 造成本页「本月限额」与团队页「月限额」对不上(R72)
|
||||
const [freshTeam, setFreshTeam] = useState<Team | null>(null);
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
api.billingTrend().then((d) => { if (alive) setTrend(d); }).catch(() => {});
|
||||
api.teamMembers().then((m) => { if (alive) setTeamMembers(m); }).catch(() => {});
|
||||
api.teamSettings().then((t) => { if (alive) setFreshTeam(t); }).catch(() => {});
|
||||
return () => { alive = false; };
|
||||
}, [reloadFlag]);
|
||||
|
||||
// 账单流水分页:服务端分页(总数随流水增长,不再写死 100),每页 10 条
|
||||
const BILLS_PER_PAGE = 10;
|
||||
const [billPage, setBillPage] = useState(1);
|
||||
// 账单流水筛选(类型 + 成员):传参给后端做全量过滤(R70)。
|
||||
// 原实现只在前端过滤当前页 10 条,导致「扣费/充值」数据不全、总页数共用全部类型的 count。
|
||||
const [billType, setBillType] = useState<string>("all");
|
||||
const [billMember, setBillMember] = useState<string>("all");
|
||||
const [ledgerRows, setLedgerRows] = useState<Ledger[]>([]);
|
||||
const [ledgerCount, setLedgerCount] = useState<number>(0);
|
||||
const [ledgersLoading, setLedgersLoading] = useState(true);
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
setLedgersLoading(true);
|
||||
api.ledgers(billPage, BILLS_PER_PAGE).then((data) => {
|
||||
api.ledgers(billPage, BILLS_PER_PAGE, {
|
||||
ledger_type: billType === "all" ? undefined : billType,
|
||||
user: billMember === "all" ? undefined : billMember
|
||||
}).then((data) => {
|
||||
if (!alive) return;
|
||||
setLedgerRows(data.results);
|
||||
setLedgerCount(data.count);
|
||||
}).catch(() => {}).finally(() => { if (alive) setLedgersLoading(false); });
|
||||
return () => { alive = false; };
|
||||
}, [billPage, reloadFlag]);
|
||||
}, [billPage, billType, billMember, reloadFlag]);
|
||||
// row40:跳页输入框 —— 输入页码回车/点「跳转」即钳到 [1,总页数] 并翻页
|
||||
const [billJump, setBillJump] = useState("");
|
||||
|
||||
@@ -171,8 +182,10 @@ export function AccountPage({ billing, projects, team, onRecharge }: {
|
||||
const balance = Number(billing?.account.balance || 0);
|
||||
const used = Number(billing?.charged_total || 0);
|
||||
// 月限额:与团队管理页保持同一来源(team.monthly_credit_limit) · #14
|
||||
// 优先用团队级月限额;-1 = 不限(显示余额);0/null = 未设置 → 用成员额度累加,再 fallback 余额
|
||||
const savedMonthlyLimit = team?.monthly_credit_limit == null ? 0 : Number(team.monthly_credit_limit);
|
||||
// 优先用本页刚拉的最新团队设置,fallback 到 team prop(R72:prop 是 /me/ 快照,改完限额不刷新会陈旧)
|
||||
// -1 = 不限(显示余额);0/null = 未设置 → 用成员额度累加,再 fallback 余额
|
||||
const teamData = freshTeam ?? team;
|
||||
const savedMonthlyLimit = teamData?.monthly_credit_limit == null ? 0 : Number(teamData.monthly_credit_limit);
|
||||
const memberLimitSum = teamMembers.reduce((sum, m) => sum + Math.max(0, Number(m.monthly_credit_limit || 0)), 0);
|
||||
const limit = savedMonthlyLimit === -1 ? balance : (savedMonthlyLimit > 0 ? savedMonthlyLimit : (memberLimitSum || balance));
|
||||
const left = Math.max(0, limit - used);
|
||||
@@ -216,28 +229,15 @@ export function AccountPage({ billing, projects, team, onRecharge }: {
|
||||
const memUsedSum = filteredMembers.reduce((s, m) => s + Number(m.month_charged || 0), 0);
|
||||
const memFiltered = memRole !== "all";
|
||||
|
||||
// ── 账单流水筛选(类型 + 成员)── 后端为服务端分页且无过滤参数(api.ledgers 仅收 page/pageSize),
|
||||
// 故只能对「当前页」已载入的 10 条做客户端过滤。
|
||||
// 切换筛选条件时跳回第 1 页(#9a);过滤后按实际可见行数重算总页数(#9b)。
|
||||
const [billType, setBillType] = useState<string>("all");
|
||||
const [billMember, setBillMember] = useState<string>("all");
|
||||
const billMemberOptions = useMemo(() => {
|
||||
const set = new Set<string>();
|
||||
ledgerRows.forEach((l) => { if (l.user_label) set.add(l.user_label); });
|
||||
return Array.from(set);
|
||||
}, [ledgerRows]);
|
||||
const visibleLedgers = useMemo(
|
||||
() => ledgerRows.filter((l) =>
|
||||
(billType === "all" || l.ledger_type === billType) &&
|
||||
(billMember === "all" || (l.user_label || "系统") === billMember)
|
||||
),
|
||||
[ledgerRows, billType, billMember]
|
||||
// ── 账单流水筛选辅助 ── 筛选本体在上方 useEffect 走后端全量过滤(R70)。
|
||||
// 成员下拉选项取团队成员表(原先取自当前页流水 user_label,只能看到本页出现过的人);value 传 user id 给后端。
|
||||
const billMemberOptions = useMemo(
|
||||
() => teamMembers.map((m) => ({ id: m.user.id, label: m.user.username || m.user.email || "成员" })),
|
||||
[teamMembers]
|
||||
);
|
||||
const billFiltered = billType !== "all" || billMember !== "all";
|
||||
// 有筛选时按当前页已过滤的可见行数重算总页数,避免总页数用全量致翻到空页(#9b)
|
||||
const billTotalPages = billFiltered
|
||||
? Math.max(1, Math.ceil(visibleLedgers.length / BILLS_PER_PAGE))
|
||||
: Math.max(1, Math.ceil(ledgerCount / BILLS_PER_PAGE));
|
||||
// 服务端过滤后 count 即当前筛选自己的总数,总页数随筛选变化(R70)
|
||||
const billTotalPages = Math.max(1, Math.ceil(ledgerCount / BILLS_PER_PAGE));
|
||||
const safeBillPage = Math.min(billPage, billTotalPages);
|
||||
function gotoBillPage() {
|
||||
const n = parseInt(billJump, 10);
|
||||
@@ -418,13 +418,13 @@ export function AccountPage({ billing, projects, team, onRecharge }: {
|
||||
</select>
|
||||
<select value={billMember} onChange={(e) => { setBillMember(e.target.value); setBillPage(1); }} aria-label="按成员筛选">
|
||||
<option value="all">全部成员</option>
|
||||
{billMemberOptions.map((m) => <option key={m} value={m}>{m}</option>)}
|
||||
{billMemberOptions.map((m) => <option key={m.id} value={m.id}>{m.label}</option>)}
|
||||
</select>
|
||||
{billFiltered && (
|
||||
<button className="filter-reset" type="button" onClick={() => { setBillType("all"); setBillMember("all"); setBillPage(1); }}>清除筛选</button>
|
||||
)}
|
||||
<span className="spacer"></span>
|
||||
<span className="ct">本页 <b>{visibleLedgers.length}</b> 条 · 共 {ledgerCount} 条</span>
|
||||
<span className="ct">本页 <b>{ledgerRows.length}</b> 条 · 共 {ledgerCount} 条</span>
|
||||
</div>
|
||||
<div className="billing-table-wrap">
|
||||
<table className="billing-table">
|
||||
@@ -432,9 +432,9 @@ export function AccountPage({ billing, projects, team, onRecharge }: {
|
||||
<tbody>
|
||||
{ledgersLoading && ledgerRows.length === 0 ? (
|
||||
<tr><td colSpan={6} className="muted" style={{ textAlign: "center", padding: "24px 0" }}>// 加载中…</td></tr>
|
||||
) : visibleLedgers.length === 0 ? (
|
||||
<tr><td colSpan={6} className="muted" style={{ textAlign: "center", padding: "24px 0" }}>{billFiltered ? "// 本页无匹配筛选条件的账单" : "// 暂无账单流水"}</td></tr>
|
||||
) : visibleLedgers.map((l) => (
|
||||
) : ledgerRows.length === 0 ? (
|
||||
<tr><td colSpan={6} className="muted" style={{ textAlign: "center", padding: "24px 0" }}>{billFiltered ? "// 无匹配筛选条件的账单" : "// 暂无账单流水"}</td></tr>
|
||||
) : ledgerRows.map((l) => (
|
||||
<tr key={l.id}>
|
||||
<td className="ts">{new Date(l.created_at).toLocaleString("zh-CN")}</td>
|
||||
<td>{ledgerTypeLabel(l.ledger_type)}</td>
|
||||
|
||||
@@ -27,11 +27,11 @@ import {
|
||||
WandSparkles,
|
||||
X
|
||||
} from "lucide-react";
|
||||
import type { AITask, Asset, ImageConversation, ImageConversationTask, ModelConfig, ModelEntity, Product } from "../types";
|
||||
import type { AITask, Asset, ImageConversation, ImageConversationTask, ModelConfig, ModelEntity, Product, WorkbenchTask } from "../types";
|
||||
import { api } from "../api";
|
||||
import { ActorLibrary } from "../components/actor-library";
|
||||
import { SkeletonRows } from "../components/loading";
|
||||
import { MediaLightbox } from "../components/overlays";
|
||||
import { ConfirmModal, MediaLightbox } from "../components/overlays";
|
||||
import { Pager } from "../components/pager";
|
||||
import { useViewMode } from "../components/use-view-mode";
|
||||
import type { Page } from "./route-config";
|
||||
@@ -214,36 +214,7 @@ export function AssetFactoryPage({ navigate }: { navigate: (page: Page) => void
|
||||
return () => document.removeEventListener("click", close);
|
||||
}, [openChip]);
|
||||
|
||||
// row38:任务中心批次弹窗 —— 每张生成图都可「加入资产库 / 取消加入」,真源是后端 Asset.in_library。
|
||||
// 乐观更新 batchImgs(弹窗)+ assets(列表 cover 用),失败回滚。资产生成时已落库扣费,此口只控是否进资产库列表、不二次扣费。
|
||||
const [libBusy, setLibBusy] = useState(false);
|
||||
function patchInLib(ids: Set<string>, next: boolean) {
|
||||
setBatchImgs((prev) => prev.map((a) => (ids.has(a.id) ? { ...a, in_library: next } : a)));
|
||||
setAssets((prev) => prev.map((a) => (ids.has(a.id) ? { ...a, in_library: next } : a)));
|
||||
}
|
||||
async function toggleBatchImgLibrary(asset: Asset) {
|
||||
if (!asset.id || libBusy) return;
|
||||
const next = !asset.in_library;
|
||||
const ids = new Set([asset.id]);
|
||||
patchInLib(ids, next);
|
||||
try { await api.setAssetLibrary(asset.id, next); }
|
||||
catch { patchInLib(ids, !next); }
|
||||
}
|
||||
// 一键:有未入库 → 全部加入;已全部入库 → 全部移出
|
||||
const batchWithId = batchImgs.filter((a) => a.id);
|
||||
const allInLib = batchWithId.length > 0 && batchWithId.every((a) => a.in_library);
|
||||
async function toggleAllBatchLibrary() {
|
||||
if (!batchWithId.length || libBusy) return;
|
||||
const next = !allInLib;
|
||||
const targets = batchWithId.filter((a) => a.in_library !== next).map((a) => a.id);
|
||||
if (!targets.length) return;
|
||||
const ids = new Set(targets);
|
||||
setLibBusy(true);
|
||||
patchInLib(ids, next);
|
||||
try { await Promise.all(targets.map((id) => api.setAssetLibrary(id, next))); }
|
||||
catch { patchInLib(ids, !next); }
|
||||
finally { setLibBusy(false); }
|
||||
}
|
||||
// R109:生成图已「自动入资产库」,任务中心批次弹窗不再提供加入/取消入库操作(纯查看 + 放大)。
|
||||
|
||||
const typeOptions = Array.from(new Set(taskBatches.map((b) => b.label).filter(Boolean)));
|
||||
const TIME_OPTS: Array<{ value: typeof timeFilter; label: string }> = [
|
||||
@@ -484,13 +455,7 @@ export function AssetFactoryPage({ navigate }: { navigate: (page: Page) => void
|
||||
<div className="ic-m"><LayoutGrid size={17} /></div>
|
||||
<div className="ti">{openBatch.label}<span>// {openBatch.count} 张 · {(openBatch.created_at || "").slice(0, 10)}</span></div>
|
||||
<span style={{ flex: 1 }} />
|
||||
{/* row38:一键全部加入资产库 / 全部移出(整批切换) */}
|
||||
{batchWithId.length > 0 && (
|
||||
<button className={`btn btn-sm${allInLib ? "" : " btn-primary"}`} type="button" disabled={libBusy} style={{ marginRight: 8 }} onClick={toggleAllBatchLibrary}>
|
||||
<Bookmark size={13} />
|
||||
{allInLib ? "全部移出资产库" : "一键全部加入资产库"}
|
||||
</button>
|
||||
)}
|
||||
{/* R109:成图自动入资产库,批次弹窗不再放「一键加入/移出资产库」按钮 */}
|
||||
<button className="x" type="button" aria-label="关闭" onClick={() => setOpenBatch(null)}><X size={16} /></button>
|
||||
</div>
|
||||
<div className="modal-b">
|
||||
@@ -502,30 +467,13 @@ export function AssetFactoryPage({ navigate }: { navigate: (page: Page) => void
|
||||
<div className="gen-images" style={{ "--cols": Math.min(4, batchImgs.length), "--ratio": "1 / 1" } as React.CSSProperties}>
|
||||
{batchImgs.map((a, i) => {
|
||||
const u = a.files?.find((f) => f.preview_url)?.preview_url || a.files?.[0]?.preview_url || "";
|
||||
const inLib = !!a.in_library;
|
||||
return (
|
||||
<div className={`gen-image${inLib && u ? " adopted" : ""}`} key={a.id}>
|
||||
<div className="gen-image" key={a.id}>
|
||||
{u ? (
|
||||
<img className="gen-image-img" src={u} alt={a.name} loading="lazy" style={{ cursor: "zoom-in" }} onClick={() => setPreview({ src: u, name: a.name })} />
|
||||
) : (
|
||||
<div className="placeholder"><span className="ph-frame">#{i + 1}</span></div>
|
||||
)}
|
||||
{/* row38:左上「已入库」绿标 + 右下角加入/取消按钮(单图粒度) */}
|
||||
{u && inLib && (
|
||||
<span className="gen-adopt-badge"><Check size={11} />已入库</span>
|
||||
)}
|
||||
{u && (
|
||||
<button
|
||||
type="button"
|
||||
className={`tc-lib-btn${inLib ? " on" : ""}`}
|
||||
title={inLib ? "取消加入资产库" : "加入资产库"}
|
||||
disabled={libBusy}
|
||||
onClick={() => toggleBatchImgLibrary(a)}
|
||||
>
|
||||
<Bookmark size={13} />
|
||||
{inLib ? "取消" : "加入资产库"}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
@@ -641,8 +589,8 @@ function PlatformLogo({ p, className }: { p: { id: string; name: string; logo: s
|
||||
);
|
||||
}
|
||||
|
||||
/* 一次生成/重跑 = 一个批次:各自独立展示自己的图、状态、加入资产库切换;支持多批并行跑。
|
||||
行31(并发提交) / 行32(重跑追加新批次 + 气泡菜单 + 加入/取消切换) / 行33(多批次持久化恢复)。 */
|
||||
/* 一次生成/重跑 = 一个批次:各自独立展示自己的图、状态;支持多批并行跑。
|
||||
行31(并发提交) / 行32(重跑追加 + 气泡菜单) / R100(批次从后端持久任务恢复) / R109(成图自动入库)。 */
|
||||
type GenBatch = {
|
||||
id: string;
|
||||
prompt: string;
|
||||
@@ -650,8 +598,6 @@ type GenBatch = {
|
||||
count: number;
|
||||
status: "generating" | "done" | "failed";
|
||||
results: Asset[];
|
||||
/** 批次级:是否已"加入资产库"(可来回切) */
|
||||
adopted: boolean;
|
||||
ts: number;
|
||||
/** 该批次归属的商品(用于按商品分组,各商品一个导航头) */
|
||||
productId?: string;
|
||||
@@ -664,10 +610,15 @@ type GenBatch = {
|
||||
platformIds?: string[];
|
||||
/** 该批次提交的参考图(图片创作:用户上传作生成参考),用于批次头回显「参考了哪些图」 */
|
||||
refs?: { name: string; url: string }[];
|
||||
/** 该批次已提交的生图任务 id:落盘后切走再回来可据此对每一批各自续轮询(PMC#5/#10) */
|
||||
/** 该批次已提交、尚未终态的生图任务 id:切走再回来可据此对每一批各自续轮询(PMC#5/#10) */
|
||||
pendingIds?: string[];
|
||||
};
|
||||
|
||||
/* R100:后端 platform_id(douyin/taobao…) → 前端平台 key(dy/tb…),恢复批次时还原平台分组 */
|
||||
const PLATFORM_KEY_MAP: Record<string, string> = Object.fromEntries(
|
||||
Object.entries(PLATFORM_ID_MAP).map(([key, canonical]) => [canonical, key])
|
||||
);
|
||||
|
||||
export function ImageWorkbenchPage({
|
||||
mode,
|
||||
products,
|
||||
@@ -715,7 +666,6 @@ export function ImageWorkbenchPage({
|
||||
const [genModel, setGenModel] = useState<string>(() => {
|
||||
try { return localStorage.getItem(GEN_MODEL_KEY) || "volcano"; } catch { return "volcano"; }
|
||||
});
|
||||
const [genModelOpen, setGenModelOpen] = useState(false);
|
||||
useEffect(() => { try { localStorage.setItem(GEN_MODEL_KEY, genModel); } catch { /* 忽略 */ } }, [genModel]);
|
||||
const [count, setCount] = useState(mode === "image" ? "4" : "4");
|
||||
// 模特单选(长度恒 0/1);平台改回多选(P0③:可选多个平台,各出一组结果)
|
||||
@@ -872,22 +822,9 @@ export function ImageWorkbenchPage({
|
||||
// 平台套图:必须选商品 + 至少一个平台(P0③ 多选)
|
||||
(mode !== "cover" || (!!product?.id && pickedIds.length > 0));
|
||||
|
||||
/* 多批次本地持久化(行33):用 ai-tools 私有 key,不与 App 的单批 `airshelf:imgwb:{mode}` 抢同一槽。
|
||||
已出图的批次直接回显;App 不可改,故"刷新时仍在跑"的批次只能尽力恢复(见回报)。 */
|
||||
const batchKey = `airshelf:imgwb:batches:${mode}`;
|
||||
function persistBatches(list: GenBatch[]) {
|
||||
try {
|
||||
// 已出图/失败的批次照常落盘;仍在跑(generating)但已拿到 pendingIds 的批次也落盘(保留 generating + pendingIds),
|
||||
// 这样切走再回来每一批都能按各自的 pendingIds 续轮询,不再「数量少 / 只恢复一批」(PMC#5/#10)。
|
||||
// 还没拿到 pendingIds 的占位批次(刚点、尚未提交成功)不落盘,避免恢复出一个永远空转的壳。
|
||||
const slim = list
|
||||
.filter((b) => b.status !== "generating" || (b.pendingIds && b.pendingIds.length))
|
||||
.map((b) => ({ ...b, refs: undefined })); // refs 含本地 blob url,不落盘
|
||||
localStorage.setItem(batchKey, JSON.stringify({ batches: slim, ts: Date.now() }));
|
||||
} catch {
|
||||
/* localStorage 不可用时静默降级 */
|
||||
}
|
||||
}
|
||||
/* R100:工作台记录不再走 localStorage 持久化(1 小时过期、换浏览器即空 = 「任务中心有记录、
|
||||
工作台丢」的根因)。模特/平台模式的批次流改从后端持久任务恢复(见下方 workbenchTasks effect),
|
||||
image 模式仍由后端「对话」驱动 —— 两边与任务中心同源(同一批 AITask)。 */
|
||||
|
||||
/* ════════ 图片创作「对话」实体的增删改查 + 历史回填 ════════ */
|
||||
|
||||
@@ -903,27 +840,67 @@ export function ImageWorkbenchPage({
|
||||
const TERMINAL = new Set(["succeeded", "failed", "cancelled", "compensating"]);
|
||||
const result: GenBatch[] = [];
|
||||
for (const [key, list] of groups) {
|
||||
const assets = list.flatMap((t) => t.assets || []);
|
||||
const allTerminal = list.every((t) => TERMINAL.has(t.status));
|
||||
// R109:成功但成图已全部删除(软删进垃圾桶)的任务不再回显 —— 生成记录与资产库数据绑定
|
||||
const live = list.filter((t) => t.status !== "succeeded" || (t.assets || []).length > 0);
|
||||
if (!live.length) continue;
|
||||
const assets = live.flatMap((t) => t.assets || []);
|
||||
const allTerminal = live.every((t) => TERMINAL.has(t.status));
|
||||
const status: GenBatch["status"] = assets.length > 0 ? "done" : allTerminal ? "failed" : "generating";
|
||||
const withId = assets.filter((a) => a.id);
|
||||
result.push({
|
||||
id: key,
|
||||
prompt: list[0]?.prompt || "",
|
||||
ratio: list[0]?.ratio || meta.ratio,
|
||||
count: list.length,
|
||||
prompt: live[0]?.prompt || "",
|
||||
ratio: live[0]?.ratio || meta.ratio,
|
||||
count: live.length,
|
||||
status,
|
||||
results: assets,
|
||||
adopted: withId.length > 0 && withId.every((a) => a.in_library),
|
||||
ts: new Date(list[0]?.created_at || Date.now()).getTime(),
|
||||
ts: new Date(live[0]?.created_at || Date.now()).getTime(),
|
||||
// 该批用过的参考图(后端按 reference_image_ids 解析回 {name,url}),切换/刷新后仍可见
|
||||
refs: (list[0]?.reference_images || []).length ? list[0].reference_images : undefined,
|
||||
refs: (live[0]?.reference_images || []).length ? live[0].reference_images : undefined,
|
||||
});
|
||||
}
|
||||
// 旧批次在上、新批次在下(对话流自上而下时间序)
|
||||
return result.sort((a, b) => a.ts - b.ts);
|
||||
}
|
||||
|
||||
/* R100:后端工作台任务 → 前端批次(与 batchesFromConvTasks 同思路,多带商品/模特/平台归属)。
|
||||
仍在跑的任务留在 pendingIds,挂载后按批续轮询;成功但成图已全删的任务不回显(R109 绑定)。 */
|
||||
function batchesFromWorkbenchTasks(tasks: WorkbenchTask[]): GenBatch[] {
|
||||
const groups = new Map<string, WorkbenchTask[]>();
|
||||
for (const t of tasks) {
|
||||
const key = t.batch_id || t.id;
|
||||
const list = groups.get(key) || [];
|
||||
list.push(t);
|
||||
groups.set(key, list);
|
||||
}
|
||||
const TERMINAL = new Set(["succeeded", "failed", "cancelled", "compensating"]);
|
||||
const result: GenBatch[] = [];
|
||||
for (const [key, list] of groups) {
|
||||
const live = list.filter((t) => t.status !== "succeeded" || (t.assets || []).length > 0);
|
||||
if (!live.length) continue;
|
||||
const assets = live.flatMap((t) => t.assets || []);
|
||||
const hasRunning = live.some((t) => !TERMINAL.has(t.status));
|
||||
const status: GenBatch["status"] = hasRunning ? "generating" : assets.length ? "done" : "failed";
|
||||
const first = live[0];
|
||||
const platformKey = first.platform_id ? PLATFORM_KEY_MAP[first.platform_id] : "";
|
||||
result.push({
|
||||
id: key,
|
||||
prompt: first.prompt || "",
|
||||
ratio: first.ratio || meta.ratio,
|
||||
count: live.length,
|
||||
status,
|
||||
results: assets,
|
||||
ts: new Date(first.created_at || Date.now()).getTime(),
|
||||
productId: first.product_id || undefined,
|
||||
modelId: first.model_id || undefined,
|
||||
platformIds: platformKey ? [platformKey] : undefined,
|
||||
// 续轮询要带上整批任务 id(含已终态的):onResume 的结果会整体替换 results,
|
||||
// 只传未完成 id 会把已出的好图从结果里丢掉(终态任务首轮轮询即回带成图,秒完成)。
|
||||
pendingIds: hasRunning ? live.map((t) => t.id) : undefined,
|
||||
});
|
||||
}
|
||||
return result.sort((a, b) => a.ts - b.ts);
|
||||
}
|
||||
|
||||
// 拉某对话的历史批次并回显;非终态批次继续轮询补齐
|
||||
const loadConvBatches = useCallback(async (convId: string) => {
|
||||
try {
|
||||
@@ -1039,18 +1016,10 @@ export function ImageWorkbenchPage({
|
||||
const batchId = opts.reuseBatchId || opts.appendToBatchId || `b-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
|
||||
if (opts.reuseBatchId) {
|
||||
// 全批重跑:把原卡复位为「生成中」,清掉旧(失败/旧)结果,保留其归属与参数
|
||||
setBatches((prev) => {
|
||||
const next = prev.map((b) => (b.id === batchId ? { ...b, status: "generating" as const, results: [], pendingIds: undefined } : b));
|
||||
persistBatches(next);
|
||||
return next;
|
||||
});
|
||||
setBatches((prev) => prev.map((b) => (b.id === batchId ? { ...b, status: "generating" as const, results: [], pendingIds: undefined } : b)));
|
||||
} else if (opts.appendToBatchId) {
|
||||
// 单图重跑:原卡转「生成中」补图,保留已有好图
|
||||
setBatches((prev) => {
|
||||
const next = prev.map((b) => (b.id === batchId ? { ...b, status: "generating" as const } : b));
|
||||
persistBatches(next);
|
||||
return next;
|
||||
});
|
||||
setBatches((prev) => prev.map((b) => (b.id === batchId ? { ...b, status: "generating" as const } : b)));
|
||||
} else {
|
||||
const newBatch: GenBatch = {
|
||||
id: batchId,
|
||||
@@ -1059,7 +1028,6 @@ export function ImageWorkbenchPage({
|
||||
count: opts.count,
|
||||
status: "generating",
|
||||
results: [],
|
||||
adopted: false,
|
||||
ts: Date.now(),
|
||||
productId: opts.productId,
|
||||
productTitle: opts.productTitle,
|
||||
@@ -1091,37 +1059,29 @@ export function ImageWorkbenchPage({
|
||||
referenceImageIds = ids.filter((x): x is string => !!x);
|
||||
}
|
||||
// 带上当前对话 id(空则后端自动开一条并回传);conversation_id 用 ref 取最新值,避免闭包旧值
|
||||
// onSubmitted:提交成功拿到任务 id 即把本批 pendingIds 落盘 → 切走再回来本批能各自续轮询(PMC#5/#10)
|
||||
// onSubmitted:提交成功拿到任务 id 记进本批 pendingIds → 切走再回来由后端记录接续轮询(R100)
|
||||
const result = await onGenerate({ prompt: opts.prompt, mode, count: opts.count, product_id: opts.productId, model_id: opts.modelId, ratio: opts.ratio, image_model: genModel, platform_id: opts.platformId, conversation_id: activeConvRef.current || undefined, reference_image_ids: referenceImageIds,
|
||||
onSubmitted: (taskIds) => setBatches((prev) => { const next = prev.map((b) => (b.id === batchId ? { ...b, pendingIds: taskIds } : b)); persistBatches(next); return next; }) });
|
||||
onSubmitted: (taskIds) => setBatches((prev) => prev.map((b) => (b.id === batchId ? { ...b, pendingIds: taskIds } : b))) });
|
||||
// 首发新对话:把后端建的对话登记进左栏并设为 active;刷新列表拿到真标题/计数
|
||||
const convId = result?.conversation_id;
|
||||
if (convId && convId !== activeConvRef.current) {
|
||||
setActiveConvId(convId);
|
||||
void loadConversations(false);
|
||||
}
|
||||
setBatches((prev) => {
|
||||
const next = prev.map((b) => {
|
||||
if (b.id !== batchId) return b;
|
||||
const newAssets = result?.assets || [];
|
||||
// 单图追加重跑:把新图并进原有好图(按 id 去重),不覆盖;其余路径直接用本批结果
|
||||
if (opts.appendToBatchId) {
|
||||
const seen = new Set(b.results.map((a) => a.id));
|
||||
const merged = [...b.results, ...newAssets.filter((a) => !a.id || !seen.has(a.id))];
|
||||
return { ...b, status: merged.length ? ("done" as const) : ("failed" as const), results: merged };
|
||||
}
|
||||
return { ...b, status: newAssets.length ? ("done" as const) : ("failed" as const), results: newAssets };
|
||||
});
|
||||
persistBatches(next);
|
||||
return next;
|
||||
});
|
||||
setBatches((prev) => prev.map((b) => {
|
||||
if (b.id !== batchId) return b;
|
||||
const newAssets = result?.assets || [];
|
||||
// 单图追加重跑:把新图并进原有好图(按 id 去重),不覆盖;其余路径直接用本批结果
|
||||
if (opts.appendToBatchId) {
|
||||
const seen = new Set(b.results.map((a) => a.id));
|
||||
const merged = [...b.results, ...newAssets.filter((a) => !a.id || !seen.has(a.id))];
|
||||
return { ...b, status: merged.length ? ("done" as const) : ("failed" as const), results: merged, pendingIds: undefined };
|
||||
}
|
||||
return { ...b, status: newAssets.length ? ("done" as const) : ("failed" as const), results: newAssets, pendingIds: undefined };
|
||||
}));
|
||||
} catch {
|
||||
setBatches((prev) => {
|
||||
// 追加重跑失败:保留原有好图,只把状态落回(有图=done,无图=failed)
|
||||
const next = prev.map((b) => (b.id === batchId ? { ...b, status: ((opts.appendToBatchId && b.results.length ? "done" : "failed") as GenBatch["status"]) } : b));
|
||||
persistBatches(next);
|
||||
return next;
|
||||
});
|
||||
// 追加重跑失败:保留原有好图,只把状态落回(有图=done,无图=failed)
|
||||
setBatches((prev) => prev.map((b) => (b.id === batchId ? { ...b, status: ((opts.appendToBatchId && b.results.length ? "done" : "failed") as GenBatch["status"]) } : b)));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1185,68 +1145,29 @@ export function ImageWorkbenchPage({
|
||||
});
|
||||
}
|
||||
|
||||
/* 删除整个批次(行32③:批次气泡"删除当前批次") */
|
||||
function removeBatch(id: string) {
|
||||
setBatches((prev) => {
|
||||
const next = prev.filter((b) => b.id !== id);
|
||||
persistBatches(next);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
/* 删除批次内单张图(行32③:单图气泡"删除") */
|
||||
function removeImageFromBatch(batchId: string, assetId: string) {
|
||||
setBatches((prev) => {
|
||||
const next = prev.map((b) =>
|
||||
b.id === batchId ? { ...b, results: b.results.filter((a) => a.id !== assetId) } : b
|
||||
);
|
||||
persistBatches(next);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
/* 单图 in_library 写库 + 本地乐观更新 + 失败回滚的公共逻辑。
|
||||
真源是后端 Asset.in_library:加入 → 出现在资产库列表;取消 → 从列表移出。batch.adopted 同步成「整批是否全已入库」。 */
|
||||
function applyLibraryState(batchId: string, assetIds: string[], next: boolean) {
|
||||
const ids = new Set(assetIds.filter(Boolean));
|
||||
if (!ids.size) return;
|
||||
const sync = (b: GenBatch, want: (a: Asset) => boolean): GenBatch => {
|
||||
const results = b.results.map((a) => (ids.has(a.id) ? { ...a, in_library: want(a) } : a));
|
||||
const withId = results.filter((a) => a.id);
|
||||
return { ...b, results, adopted: withId.length > 0 && withId.every((a) => a.in_library) };
|
||||
};
|
||||
setBatches((prev) => {
|
||||
const updated = prev.map((b) => (b.id === batchId ? sync(b, () => next) : b));
|
||||
persistBatches(updated);
|
||||
return updated;
|
||||
});
|
||||
void Promise.all([...ids].map((id) => api.setAssetLibrary(id, next))).catch(() => {
|
||||
// 写库失败:回滚到改前状态(按 id 翻回 !next)
|
||||
setBatches((prev) => {
|
||||
const reverted = prev.map((b) => (b.id === batchId ? sync(b, () => !next) : b));
|
||||
persistBatches(reverted);
|
||||
return reverted;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* 加入资产库 / 取消加入(批次级:全部已入库 → 整批移出,否则整批加入) */
|
||||
function toggleAdoptBatch(batchId: string) {
|
||||
const batch = batches.find((b) => b.id === batchId);
|
||||
/* R108/R109:工作台的「删除」= 真删资产(软删进回收站)—— 生成记录与资产库数据绑定,
|
||||
删了才不会刷新后从后端记录里"复活"。删除前二次确认(ConfirmModal),文案与资产库一致。
|
||||
confirmDel.assetId 有值 = 删单张;无值 = 删整批(该批全部存活成图)。 */
|
||||
const [confirmDel, setConfirmDel] = useState<{ batchId: string; assetId?: string } | null>(null);
|
||||
function doConfirmedDelete() {
|
||||
const target = confirmDel;
|
||||
setConfirmDel(null);
|
||||
if (!target) return;
|
||||
const batch = batches.find((b) => b.id === target.batchId);
|
||||
if (!batch) return;
|
||||
const withId = batch.results.filter((a) => a.id);
|
||||
if (!withId.length) return;
|
||||
const next = !withId.every((a) => a.in_library);
|
||||
applyLibraryState(batchId, withId.map((a) => a.id), next);
|
||||
}
|
||||
|
||||
/* 加入资产库 / 取消(单图级:只改被点的那一张) */
|
||||
function toggleAdoptImage(batchId: string, assetId: string) {
|
||||
if (!assetId) return;
|
||||
const asset = batches.find((b) => b.id === batchId)?.results.find((a) => a.id === assetId);
|
||||
if (!asset) return;
|
||||
const next = !asset.in_library;
|
||||
applyLibraryState(batchId, [assetId], next);
|
||||
const ids = (target.assetId ? [target.assetId] : batch.results.map((a) => a.id)).filter(Boolean);
|
||||
ids.forEach((id) => { void api.deleteAsset(id).catch(() => undefined); });
|
||||
if (target.assetId) {
|
||||
// 单张:从批次里摘掉;整批删空(且不在生成中)则整卡移除
|
||||
setBatches((prev) => prev.flatMap((b) => {
|
||||
if (b.id !== target.batchId) return [b];
|
||||
const results = b.results.filter((a) => a.id !== target.assetId);
|
||||
if (!results.length && b.status === "done") return [];
|
||||
return [{ ...b, results, count: Math.max(1, b.count - 1) }];
|
||||
}));
|
||||
} else {
|
||||
setBatches((prev) => prev.filter((b) => b.id !== target.batchId));
|
||||
}
|
||||
}
|
||||
|
||||
/* 图片创作「加入模特库」:把该图复用为模特形象图建 Model 条目(后端不二次扣费;幂等)。
|
||||
@@ -1280,49 +1201,39 @@ export function ImageWorkbenchPage({
|
||||
});
|
||||
}
|
||||
|
||||
/* 跨刷新恢复(行33):先读 ai-tools 多批次残留回显已出的批次;
|
||||
再读 App 写的单批 `airshelf:imgwb:{mode}`(仍在跑的任务),对其继续轮询补一个恢复批次。 */
|
||||
/* R100:工作台记录从后端持久任务恢复(与任务中心同源)—— 原 localStorage 残留 1 小时即丢、
|
||||
换浏览器/清缓存即空,造成「任务中心有记录、工作台丢」。挂载 / 切换商品时按 mode+product 拉取
|
||||
该商品的全部生成记录;仍在跑的批次带回 pendingIds,各自续轮询补齐(刷新也不断)。 */
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
// image 模式的历史由后端对话(loadConversations → loadConvBatches)驱动,跳过本地残留回显,避免双源打架
|
||||
// image 模式的历史由后端对话(loadConversations → loadConvBatches)驱动,避免双源打架
|
||||
if (mode === "image") return;
|
||||
// 模特/平台套图:从多批次残留恢复「全部」批次 —— 已出图/失败的直接回显;仍在跑(带 pendingIds)的
|
||||
// 恢复成 generating 并各自按本批 pendingIds 续轮询。这样切走再回来,多批/多平台都在,不再「数量少 / 分类丢」(PMC#5/#10)。
|
||||
try {
|
||||
const raw = localStorage.getItem(batchKey);
|
||||
if (raw) {
|
||||
const saved = JSON.parse(raw) as { batches?: GenBatch[]; ts?: number };
|
||||
if (!(saved.ts && Date.now() - saved.ts > 60 * 60 * 1000)) {
|
||||
const all = saved.batches || [];
|
||||
if (all.length) {
|
||||
setBatches(all);
|
||||
if (onResume) {
|
||||
for (const b of all) {
|
||||
if (b.status !== "generating" || !(b.pendingIds && b.pendingIds.length)) continue;
|
||||
onResume(mode, b.pendingIds).then((res) => {
|
||||
if (cancelled) return;
|
||||
setBatches((prev) => {
|
||||
const next = prev.map((x) =>
|
||||
x.id === b.id ? { ...x, status: res?.assets ? ("done" as const) : ("failed" as const), results: res?.assets || x.results } : x
|
||||
);
|
||||
persistBatches(next);
|
||||
return next;
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
if (!productId) { setBatches([]); return; }
|
||||
let cancelled = false;
|
||||
api.workbenchTasks(mode, productId)
|
||||
.then((res) => {
|
||||
if (cancelled) return;
|
||||
const next = batchesFromWorkbenchTasks(res.tasks || []);
|
||||
// 竞态保护:拉取在途时用户又提交了新批次(本地 id 以 b- 开头、还在生成中)→ 合并保留,别被整体替换冲掉
|
||||
setBatches((prev) => [...next, ...prev.filter((b) => b.id.startsWith("b-") && b.status === "generating")]);
|
||||
if (onResume) {
|
||||
for (const b of next) {
|
||||
if (b.status !== "generating" || !(b.pendingIds && b.pendingIds.length)) continue;
|
||||
onResume(mode, b.pendingIds).then((r) => {
|
||||
if (cancelled || !r?.assets) return;
|
||||
setBatches((prev) => prev.map((x) =>
|
||||
x.id === b.id ? { ...x, status: "done" as const, results: r.assets, pendingIds: undefined } : x
|
||||
));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
/* 残留解析失败则忽略 */
|
||||
}
|
||||
})
|
||||
.catch(() => { /* 拉取失败(后端未更新/网络抖动):保留当前内存批次,不清空 */ });
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
// 仅在挂载/切换 mode 时恢复一次
|
||||
// 仅在挂载 / 切 mode / 切商品时恢复(不依赖 onResume 身份,避免反复重拉)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [mode]);
|
||||
}, [mode, productId]);
|
||||
|
||||
// YYX#3:工作台数据按商品隔离 —— 模特/平台模式右侧结果只展示当前选中商品的批次
|
||||
// (旧批次无 productId 则全局可见,兜底);image 模式按对话维度,沿用全部 batches。
|
||||
@@ -1342,8 +1253,8 @@ export function ImageWorkbenchPage({
|
||||
const hasResults = productBatches.length > 0;
|
||||
|
||||
/* ── 单个批次的结果网格 · §4.18 gen-card 三件套 ──
|
||||
每张 .gen-image 内:① 右上 .gen-image-actions(再生成 / 下载 / 更多→加入·删除)
|
||||
② 中央 .gen-image-feedback 就地反馈(采用后亮 1.5s)③ 左上「已采用」绿角标。 */
|
||||
每张 .gen-image 内:① 右上 .gen-image-actions(再生成 / 下载 / 更多→删除)
|
||||
② 失败格占位 + 单张重跑。R109:成图自动入资产库,不再有「已入库」角标/入库切换。 */
|
||||
function renderBatchGrid(batch: GenBatch) {
|
||||
const generating = batch.status === "generating";
|
||||
const n = batch.results.length || batch.count;
|
||||
@@ -1360,12 +1271,11 @@ export function ImageWorkbenchPage({
|
||||
const asset = batch.results[index];
|
||||
const url = asset?.files?.[0]?.preview_url;
|
||||
const assetId = asset?.id || "";
|
||||
const inLib = !!asset?.in_library;
|
||||
const failed = !generating && !asset; // 非生成中且该格无图 → 这张失败了
|
||||
const key = assetId || `ph-${index}`;
|
||||
const cellKey = `${batch.id}:${assetId || key}`;
|
||||
return (
|
||||
<div className={`gen-image ${generating && !url ? "gen" : ""}${failed ? " failed" : ""}${inLib && url ? " adopted" : ""}`} key={key}>
|
||||
<div className={`gen-image ${generating && !url ? "gen" : ""}${failed ? " failed" : ""}`} key={key}>
|
||||
{url ? (
|
||||
<img className="gen-image-img" src={url} alt={`${meta.title} #${index + 1}`} loading="lazy" title="点击放大" style={{ cursor: "zoom-in" }} onClick={() => setPreview({ src: url, name: `${meta.title} #${index + 1}` })} />
|
||||
) : (
|
||||
@@ -1389,14 +1299,7 @@ export function ImageWorkbenchPage({
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{/* ③ 左上「已入库」绿角标(该图已加入资产库时常驻) */}
|
||||
{url && inLib && (
|
||||
<span className="gen-adopt-badge">
|
||||
<Check size={11} />
|
||||
已入库
|
||||
</span>
|
||||
)}
|
||||
{/* YYX#20:去掉「加入资产库」后的中央遮罩反馈,只保留左上角「已入库」标签 */}
|
||||
{/* R109:成图自动入资产库 —— 去掉「已入库」角标与加入/取消入口 */}
|
||||
{/* ① 右上悬浮操作组:再生成 / 下载 / 更多 */}
|
||||
{url && (
|
||||
<div className="gen-image-actions">
|
||||
@@ -1410,13 +1313,7 @@ export function ImageWorkbenchPage({
|
||||
<button className="gen-img-btn" type="button" title="更多" onClick={() => setOpenMore((k) => (k === cellKey ? "" : cellKey))}>
|
||||
<MoreHorizontal size={14} />
|
||||
</button>
|
||||
{/* YYX#20 更正:单图「更多」气泡保留「加入资产库」(单图粒度入库),这里不是重复入口;
|
||||
重复入口是批次底部那个,已在批次气泡里删掉。 */}
|
||||
<div className={`gen-bubble${openMore === cellKey ? " open" : ""}`}>
|
||||
<button type="button" className="gen-bubble-item" onClick={() => { setOpenMore(""); toggleAdoptImage(batch.id, assetId); }}>
|
||||
<Bookmark size={13} />
|
||||
{inLib ? "取消加入资产库" : "加入资产库"}
|
||||
</button>
|
||||
{/* row41:仅图片创作(mode=image)显示「加入模特库」;模特上身图/平台套图不显示 */}
|
||||
{mode === "image" && (
|
||||
<button type="button" className="gen-bubble-item" disabled={enrolledModelIds.has(assetId) || enrollingModelId === assetId} onClick={() => { setOpenMore(""); enrollModelFromImage(assetId); }}>
|
||||
@@ -1424,7 +1321,8 @@ export function ImageWorkbenchPage({
|
||||
{enrolledModelIds.has(assetId) ? "已加入模特库" : (enrollingModelId === assetId ? "加入中…" : "加入模特库")}
|
||||
</button>
|
||||
)}
|
||||
<button type="button" className="gen-bubble-item danger" onClick={() => { setOpenMore(""); removeImageFromBatch(batch.id, assetId); }}>
|
||||
{/* R108/R109:删除 = 真删资产(回收站软删),先二次确认 */}
|
||||
<button type="button" className="gen-bubble-item danger" onClick={() => { setOpenMore(""); setConfirmDel({ batchId: batch.id, assetId }); }}>
|
||||
<Trash2 size={13} />
|
||||
删除
|
||||
</button>
|
||||
@@ -1461,27 +1359,22 @@ export function ImageWorkbenchPage({
|
||||
prompt={batch.prompt}
|
||||
count={batch.count}
|
||||
statusText={generating ? "生成中" : failed ? "失败" : "已完成"}
|
||||
adoptedCount={!generating && !failed ? batch.results.filter((a) => a.in_library).length : 0}
|
||||
/>
|
||||
<div className="gen-card gen-batch-card">
|
||||
{renderBatchGrid(batch)}
|
||||
{/* 行30/32:批次底部操作行,与上方卡片拉开间距(.gen-batch-actions) */}
|
||||
{/* 行30/32:批次底部操作行(R109:成图自动入资产库,去掉「加入资产库」按钮) */}
|
||||
<div className="gen-batch-actions">
|
||||
<button className="btn btn-sm" type="button" disabled={generating} onClick={() => rerunBatch(batch)}>
|
||||
<RefreshCw size={13} />
|
||||
重跑
|
||||
</button>
|
||||
<button className="btn btn-sm" type="button" disabled={generating || failed} onClick={() => toggleAdoptBatch(batch.id)}>
|
||||
{batch.adopted ? <X size={13} /> : <Check size={13} />}
|
||||
{batch.adopted ? "取消加入资产库" : "加入资产库"}
|
||||
</button>
|
||||
{/* YYX#20:批次底部「加入资产库」已是上面的独立按钮,这里气泡只留「删除当前批次」,去掉重复入口 */}
|
||||
<div className="gen-batch-more">
|
||||
<button className="btn btn-sm btn-ghost" type="button" title="更多">
|
||||
<MoreHorizontal size={13} />
|
||||
</button>
|
||||
<div className="gen-bubble gen-bubble-up">
|
||||
<button type="button" className="gen-bubble-item danger" onClick={() => removeBatch(batch.id)}>
|
||||
{/* R108/R109:删除整批 = 真删该批全部成图(回收站软删),先二次确认 */}
|
||||
<button type="button" className="gen-bubble-item danger" onClick={() => setConfirmDel({ batchId: batch.id })}>
|
||||
<Trash2 size={13} />
|
||||
删除当前批次
|
||||
</button>
|
||||
@@ -1651,16 +1544,14 @@ export function ImageWorkbenchPage({
|
||||
<RefreshCw size={13} />
|
||||
重跑
|
||||
</button>
|
||||
<button className="btn btn-sm" type="button" disabled={batch.status !== "done"} onClick={() => toggleAdoptBatch(batch.id)}>
|
||||
{batch.adopted ? <X size={13} /> : <Check size={13} />}
|
||||
{batch.adopted ? "取消加入资产库" : "加入资产库"}
|
||||
</button>
|
||||
{/* R109:成图自动入资产库,去掉「加入资产库」按钮 */}
|
||||
<div className="gen-batch-more">
|
||||
<button className="btn btn-sm btn-ghost" type="button" title="更多">
|
||||
<MoreHorizontal size={13} />
|
||||
</button>
|
||||
<div className="gen-bubble gen-bubble-up">
|
||||
<button type="button" className="gen-bubble-item danger" onClick={() => removeBatch(batch.id)}>
|
||||
{/* R108/R109:删除整批 = 真删该批全部成图(回收站软删),先二次确认 */}
|
||||
<button type="button" className="gen-bubble-item danger" onClick={() => setConfirmDel({ batchId: batch.id })}>
|
||||
<Trash2 size={13} />
|
||||
删除当前批次
|
||||
</button>
|
||||
@@ -1743,6 +1634,17 @@ export function ImageWorkbenchPage({
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* R108/R109:删除二次确认 —— 单张 / 整批共用,确认后软删进垃圾桶 */}
|
||||
<ConfirmModal
|
||||
open={!!confirmDel}
|
||||
title={confirmDel?.assetId ? "删除这张图片" : "删除当前批次"}
|
||||
subtitle="// DELETE"
|
||||
icon={<Trash2 size={16} />}
|
||||
detail="删除的图片将回收到垃圾桶,是否需要删除?"
|
||||
confirmText="删除"
|
||||
onCancel={() => setConfirmDel(null)}
|
||||
onConfirm={doConfirmedDelete}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2093,29 +1995,22 @@ export function ImageWorkbenchPage({
|
||||
)}
|
||||
<div className="iw-sub">
|
||||
<div className="iw-sub-h">// 提示词 · 描述你想要的画面</div>
|
||||
{/* YYX#7:提示词框加大;YYX#10:生图模型选择作胶囊嵌在框内靠左置底 */}
|
||||
{/* YYX#7/R83:提示词框加大 —— 外层容器即视觉上的「输入框」,内部无边框 textarea(默认 4-5 行起步,随内容自动增高,可手动拉伸)+ 底部工具条,胶囊不再绝对定位盖在文字上;
|
||||
YYX#10/R86:生图模型选择作胶囊嵌在框内工具条靠左置底(复用图片创作 chat 输入栏同款 Pill,菜单向上弹) */}
|
||||
<div className="iw-prompt-box">
|
||||
<textarea
|
||||
className="textarea iw-prompt-text"
|
||||
className="iw-prompt-text"
|
||||
value={prompt}
|
||||
onChange={(event) => setPrompt(event.target.value)}
|
||||
placeholder={`例如:${meta.promptTemplate(product?.title || "商品")}`}
|
||||
/>
|
||||
<div className="iw-prompt-bar">
|
||||
<div className={`chip-wrap iw-model-pill${genModelOpen ? " open" : ""}`} data-filter="genmodel">
|
||||
<button className="chip" type="button" title="生图模型" onClick={() => setGenModelOpen((v) => !v)}>
|
||||
<Sparkles size={12} />
|
||||
<span className="chip-label">{GEN_MODEL_OPTIONS.find((o) => o.value === genModel)?.label || "火山 Seedream"}</span>
|
||||
<svg className="caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M4 6l4 4 4-4" /></svg>
|
||||
</button>
|
||||
<div className="chip-menu">
|
||||
{GEN_MODEL_OPTIONS.map((o) => (
|
||||
<div className={`mi${genModel === o.value ? " selected" : ""}`} key={o.value} role="button" tabIndex={0} onClick={() => { setGenModel(o.value); setGenModelOpen(false); }}>
|
||||
<svg className="mi-check" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 8l3.5 3.5L13 5" /></svg>{o.label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Pill
|
||||
label="模型"
|
||||
value={GEN_MODEL_OPTIONS.find((o) => o.value === genModel)?.label || "火山 Seedream"}
|
||||
options={GEN_MODEL_OPTIONS.map((o) => ({ id: o.value, label: o.label }))}
|
||||
onSelect={setGenModel}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -2222,12 +2117,24 @@ export function ImageWorkbenchPage({
|
||||
navigate={navigate}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* R108/R109:删除二次确认 —— 单张 / 整批共用,确认后软删进垃圾桶 */}
|
||||
<ConfirmModal
|
||||
open={!!confirmDel}
|
||||
title={confirmDel?.assetId ? "删除这张图片" : "删除当前批次"}
|
||||
subtitle="// DELETE"
|
||||
icon={<Trash2 size={16} />}
|
||||
detail="删除的图片将回收到垃圾桶,是否需要删除?"
|
||||
confirmText="删除"
|
||||
onCancel={() => setConfirmDel(null)}
|
||||
onConfirm={doConfirmedDelete}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* YYX#18:结果卡精简头部 —— 提示词单行折叠(超出给「展开/收起」)+ 灰色张数文案 */
|
||||
function BatchHeader({ prompt, count, statusText, adoptedCount }: { prompt: string; count: number; statusText: string; adoptedCount: number }) {
|
||||
function BatchHeader({ prompt, count, statusText }: { prompt: string; count: number; statusText: string }) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [overflow, setOverflow] = useState(false);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
@@ -2244,7 +2151,7 @@ function BatchHeader({ prompt, count, statusText, adoptedCount }: { prompt: stri
|
||||
</button>
|
||||
)}
|
||||
<div className="ibh-count">
|
||||
{count} 张 · {statusText}{adoptedCount > 0 ? ` · ${adoptedCount} 张已入库` : ""}
|
||||
{count} 张 · {statusText}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -2622,9 +2529,7 @@ export function ModelPhotoDemoPage({ variant, products, onBack, navigate }: { va
|
||||
</div>
|
||||
<div className="ops">
|
||||
<button type="button" title="全部重跑" onClick={toRealTool}><RefreshCw size={13} /></button>
|
||||
<button type="button" title="全部下载" onClick={toRealTool}><Download size={13} /></button>
|
||||
<button type="button" title="加入资产库" onClick={toRealTool}><Bookmark size={13} /></button>
|
||||
</div>
|
||||
<button type="button" title="全部下载" onClick={toRealTool}><Download size={13} /></button> </div>
|
||||
</div>
|
||||
<div className="dm-batch-grid">
|
||||
{[1, 2, 3, 4].map((n) => (
|
||||
@@ -2649,9 +2554,7 @@ export function ModelPhotoDemoPage({ variant, products, onBack, navigate }: { va
|
||||
</div>
|
||||
<div className="ops">
|
||||
<button type="button" title="全部重跑" onClick={toRealTool}><RefreshCw size={13} /></button>
|
||||
<button type="button" title="全部下载" onClick={toRealTool}><Download size={13} /></button>
|
||||
<button type="button" title="加入资产库" onClick={toRealTool}><Bookmark size={13} /></button>
|
||||
</div>
|
||||
<button type="button" title="全部下载" onClick={toRealTool}><Download size={13} /></button> </div>
|
||||
</div>
|
||||
<div className="dm-batch-grid">
|
||||
{[1, 2, 3, 4].map((n) => (
|
||||
@@ -2748,9 +2651,7 @@ export function ModelPhotoDemoPage({ variant, products, onBack, navigate }: { va
|
||||
</div>
|
||||
<div className="ops">
|
||||
<button type="button" title="全部重跑" onClick={toRealTool}><RefreshCw size={13} /></button>
|
||||
<button type="button" title="全部下载" onClick={toRealTool}><Download size={13} /></button>
|
||||
<button type="button" title="加入资产库" onClick={toRealTool}><Bookmark size={13} /></button>
|
||||
</div>
|
||||
<button type="button" title="全部下载" onClick={toRealTool}><Download size={13} /></button> </div>
|
||||
</div>
|
||||
<div className="dm-batch-grid">
|
||||
{[1, 2, 3, 4].map((n) => (
|
||||
@@ -2773,9 +2674,7 @@ export function ModelPhotoDemoPage({ variant, products, onBack, navigate }: { va
|
||||
</div>
|
||||
<div className="ops">
|
||||
<button type="button" title="全部重跑" onClick={toRealTool}><RefreshCw size={13} /></button>
|
||||
<button type="button" title="全部下载" onClick={toRealTool}><Download size={13} /></button>
|
||||
<button type="button" title="加入资产库" onClick={toRealTool}><Bookmark size={13} /></button>
|
||||
</div>
|
||||
<button type="button" title="全部下载" onClick={toRealTool}><Download size={13} /></button> </div>
|
||||
</div>
|
||||
<div className="dm-batch-grid">
|
||||
{[1, 2, 3, 4].map((n) => (
|
||||
@@ -2825,9 +2724,7 @@ export function ModelPhotoDemoPage({ variant, products, onBack, navigate }: { va
|
||||
</div>
|
||||
<div className="ops">
|
||||
<button type="button" title="全部重跑" onClick={toRealTool}><RefreshCw size={13} /></button>
|
||||
<button type="button" title="全部下载" onClick={toRealTool}><Download size={13} /></button>
|
||||
<button type="button" title="加入资产库" onClick={toRealTool}><Bookmark size={13} /></button>
|
||||
</div>
|
||||
<button type="button" title="全部下载" onClick={toRealTool}><Download size={13} /></button> </div>
|
||||
</div>
|
||||
<div className="dm-batch-grid">
|
||||
{[1, 2, 3, 4].map((n) => (
|
||||
|
||||
@@ -541,13 +541,21 @@ export function LibraryPage({ onUpload, onDelete }: { onUpload: (formData: FormD
|
||||
setReloadFlag((f) => f + 1);
|
||||
}
|
||||
|
||||
// 删除(单 / 批):乐观隐藏 → 并发删 → 刷新计数/列表
|
||||
// 删除(单 / 批):乐观隐藏 → 并发删 → 刷新计数/列表。后端为回收站软删(R108),可恢复。
|
||||
async function doDelete() {
|
||||
const ids = confirmIds || [];
|
||||
setConfirmIds(null);
|
||||
if (!ids.length || !onDelete) return;
|
||||
setDeletingIds((prev) => { const next = new Set(prev); ids.forEach((id) => next.add(id)); return next; });
|
||||
setSelected(new Set());
|
||||
// R108:批次弹窗内单张删除 —— 同步从打开中的批次里摘掉;删空则关掉弹窗
|
||||
setOpenBatch((prev) => {
|
||||
if (!prev) return prev;
|
||||
const items = prev.items.filter((a) => !ids.includes(a.id));
|
||||
if (!items.length) return null;
|
||||
const cover = items[0].files?.find((f) => f.is_primary)?.preview_url || items[0].files?.[0]?.preview_url || prev.cover;
|
||||
return { ...prev, items, count: items.length, cover };
|
||||
});
|
||||
try {
|
||||
await Promise.all(ids.map((id) => onDelete(id)));
|
||||
setReloadFlag((f) => f + 1);
|
||||
@@ -835,10 +843,24 @@ export function LibraryPage({ onUpload, onDelete }: { onUpload: (formData: FormD
|
||||
{openBatch.items.map((a, i) => {
|
||||
const cover = a.files?.find((f) => f.is_primary)?.preview_url || a.files?.[0]?.preview_url || "";
|
||||
return (
|
||||
<button className="pack-clip as-btn" type="button" key={a.id} onClick={() => { setOpenBatch(null); setDetail(a); }} title="查看详情">
|
||||
// R108:图片集内单张悬浮删除 icon(嵌套按钮非法 → 外层改 div[role=button])
|
||||
<div
|
||||
className="pack-clip as-btn"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
key={a.id}
|
||||
onClick={() => { setOpenBatch(null); setDetail(a); }}
|
||||
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setOpenBatch(null); setDetail(a); } }}
|
||||
title="查看详情"
|
||||
>
|
||||
{onDelete && (
|
||||
<button className="card-del-btn" type="button" title="删除这张图片" onClick={(event) => { event.stopPropagation(); setConfirmIds([a.id]); }}>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18" /><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2" /><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6" /></svg>
|
||||
</button>
|
||||
)}
|
||||
{cover ? <img src={cover} alt={a.name} loading="lazy" /> : <span className="pack-clip-ph ph-frame">无图</span>}
|
||||
<div className="pack-clip-name mono">第 {i + 1} 张</div>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
@@ -872,7 +894,7 @@ export function LibraryPage({ onUpload, onDelete }: { onUpload: (formData: FormD
|
||||
title="删除资产"
|
||||
subtitle="// DELETE ASSET"
|
||||
icon={<Trash2 size={16} />}
|
||||
detail={`确定删除选中的 ${confirmIds?.length || 0} 个资产?该操作不可撤销。`}
|
||||
detail={`已选中 ${confirmIds?.length || 0} 个资产。删除的图片将回收到垃圾桶,是否需要删除?`}
|
||||
confirmText="删除"
|
||||
onCancel={() => setConfirmIds(null)}
|
||||
onConfirm={doDelete}
|
||||
|
||||
@@ -845,15 +845,11 @@ export function ProductDetailPage({ product, projects, initialTab = "assets", na
|
||||
const [cat, setCat] = useState(realCat);
|
||||
const [target, setTarget] = useState(realTarget);
|
||||
const [points, setPoints] = useState<string[]>(realBullets);
|
||||
const [pointDraft, setPointDraft] = useState("");
|
||||
|
||||
function addPoint(event: KeyboardEvent<HTMLInputElement>) {
|
||||
if (event.key !== "Enter") return;
|
||||
event.preventDefault();
|
||||
const value = pointDraft.trim();
|
||||
if (!value) return;
|
||||
setPoints((list) => [...list, value]);
|
||||
setPointDraft("");
|
||||
// R104:显式「添加卖点」按钮追加一条空的可编辑卖点行(行内回车同样追加),
|
||||
// 替代原来嵌在列表里的「+ 输入框 · 回车确认」隐晦入口。
|
||||
function addPointRow() {
|
||||
setPoints((list) => [...list, ""]);
|
||||
}
|
||||
function removePoint(index: number) {
|
||||
setPoints((list) => list.filter((_, position) => position !== index));
|
||||
@@ -867,8 +863,9 @@ export function ProductDetailPage({ product, projects, initialTab = "assets", na
|
||||
title: name,
|
||||
category: cat,
|
||||
target_audience: target,
|
||||
// 卖点整体替换(后端 present 即覆盖):发 {title,detail,sort_order} 不带 id
|
||||
selling_points: points.map((item, index) => ({ title: item, detail: item, sort_order: index })) as Product["selling_points"]
|
||||
// 卖点整体替换(后端 present 即覆盖):发 {title,detail,sort_order} 不带 id;
|
||||
// 过滤空行(点了「添加卖点」还没填的行),否则后端 title 非空校验会退 400
|
||||
selling_points: points.map((item) => item.trim()).filter(Boolean).map((item, index) => ({ title: item, detail: item, sort_order: index })) as Product["selling_points"]
|
||||
});
|
||||
setEditing(false);
|
||||
setActionsLockH(null);
|
||||
@@ -878,7 +875,6 @@ export function ProductDetailPage({ product, projects, initialTab = "assets", na
|
||||
setCat(realCat);
|
||||
setTarget(realTarget);
|
||||
setPoints(realBullets);
|
||||
setPointDraft("");
|
||||
setEditing(false);
|
||||
setActionsLockH(null);
|
||||
}
|
||||
@@ -1013,17 +1009,18 @@ export function ProductDetailPage({ product, projects, initialTab = "assets", na
|
||||
{points.map((bullet, index) => (
|
||||
<li className="bl-item" key={index}>
|
||||
<span className="num">{index + 1}</span>
|
||||
<input className="bl-input" value={bullet} onChange={(event) => updatePoint(index, event.target.value)} placeholder="卖点描述" />
|
||||
<input className="bl-input" value={bullet} onChange={(event) => updatePoint(index, event.target.value)} onKeyDown={(event) => { if (event.key === "Enter") { event.preventDefault(); addPointRow(); } }} placeholder="卖点描述" />
|
||||
<button className="bl-x" type="button" onClick={() => removePoint(index)} aria-label="删除卖点">
|
||||
<svg 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>
|
||||
</li>
|
||||
))}
|
||||
<li className="bl-add">
|
||||
<span className="num">+</span>
|
||||
<input className="bl-input" value={pointDraft} onChange={(event) => setPointDraft(event.target.value)} onKeyDown={addPoint} placeholder="添加新卖点 · 回车确认" />
|
||||
</li>
|
||||
</ul>
|
||||
{/* R104:显式「添加卖点」按钮(独立小按钮,不嵌在卖点输入框内);仅编辑态可见(.v-edit) */}
|
||||
<button type="button" className="v-edit bl-add-btn" onClick={addPointRow}>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M5 12h14" /></svg>
|
||||
添加卖点
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1035,18 +1032,20 @@ export function ProductDetailPage({ product, projects, initialTab = "assets", na
|
||||
</div>
|
||||
<div className="grid" id="ov-images-grid">
|
||||
{visibleProductImages.map((image) => {
|
||||
// 编辑态下每张有 ProductImage 关联的图都给删除按钮(hover 出垃圾桶),不再因
|
||||
// 「只剩一张可删」而整张隐藏删除入口 —— 否则单图商品 / 删到最后一张时悬停看不到垃圾桶,
|
||||
// 体感像「删除坏了,只能放大」。最后一张的「至少保留一张」约束由后端兜底(删时退 400),
|
||||
// 这里不再前置静默禁用,改成点了真调接口、失败回滚 + 弹后端原文(如「至少保留一张图」)。
|
||||
const canDelete = editing && Boolean(image.imageId) && Boolean(onDeleteImage);
|
||||
// 编辑态下每张图都给删除按钮(hover 出垃圾桶),不再因「只剩一张可删」而整张隐藏删除入口:
|
||||
// - 有 ProductImage 关联的图 → DELETE images/{imageId}(最后一张由后端退 400 兜底,失败回滚 + 弹后端原文);
|
||||
// - 仅封面图(cover_asset 无 ProductImage 关联:采用三视图为封面 / 历史悬空封面)→ PATCH cover_asset=null 摘掉封面。
|
||||
// 此前这种图完全没有删除入口,悬停只能放大,体感「删除坏了」(YYX R6)。
|
||||
const canDelete = editing && (image.imageId ? Boolean(onDeleteImage) : true);
|
||||
const handleDelete = async (event: { stopPropagation: () => void }) => {
|
||||
event.stopPropagation();
|
||||
if (!canDelete || !image.imageId || !onDeleteImage) return;
|
||||
// 乐观隐藏:立刻从本地列表移除;真正持久化由后端 DELETE 完成,
|
||||
// 成功后父组件刷新会把该图从 product.images 抹掉(reconcile effect 同步清理乐观标记)。
|
||||
if (!canDelete) return;
|
||||
// 乐观隐藏:立刻从本地列表移除;真正持久化由后端完成,
|
||||
// 成功后父组件刷新会把该图从 product.images / cover_asset 抹掉(reconcile effect 同步清理乐观标记)。
|
||||
setDeletedImageKeys((prev) => new Set([...prev, image.key]));
|
||||
const result = await onDeleteImage(image.imageId);
|
||||
const result = image.imageId && onDeleteImage
|
||||
? await onDeleteImage(image.imageId)
|
||||
: await onUpdate({ cover_asset: null });
|
||||
if (result === null || result === undefined) {
|
||||
// action 返回 null/undefined 表示接口调用失败(已弹错误 toast,如「至少保留一张图」),
|
||||
// 回滚乐观隐藏 —— 图重新出现,不会出现「弹了删除成功但其实没删」的错觉。
|
||||
|
||||
@@ -101,6 +101,10 @@ export function TeamPage({ team, user, billing, navigate, onCreateMember: onCrea
|
||||
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(() => {});
|
||||
// 月限额自取最新值:team prop 来自登录时 /me/ 快照,改完限额换页再回来会显示旧值(R72)
|
||||
api.teamSettings().then((t) => {
|
||||
if (alive) setSavedMonthlyLimit(t.monthly_credit_limit == null ? 0 : Number(t.monthly_credit_limit));
|
||||
}).catch(() => {});
|
||||
return () => { alive = false; };
|
||||
}, [reloadFlag]);
|
||||
const reloadTeam = () => setReloadFlag((n) => n + 1);
|
||||
@@ -156,7 +160,9 @@ export function TeamPage({ team, user, billing, navigate, onCreateMember: onCrea
|
||||
setSavedMonthlyLimit(v);
|
||||
setLimitBusy(true);
|
||||
try {
|
||||
await api.updateTeamSettings({ monthly_credit_limit: v });
|
||||
const updated = await api.updateTeamSettings({ monthly_credit_limit: v });
|
||||
// 以后端回传的落库值为准(消费页同源读 teamSettings,保证两页立即一致 · R72)
|
||||
setSavedMonthlyLimit(updated.monthly_credit_limit == null ? 0 : Number(updated.monthly_credit_limit));
|
||||
setModal("");
|
||||
} catch {
|
||||
setSavedMonthlyLimit(prev); // 落库失败回滚,避免显示假成功
|
||||
|
||||
@@ -2,26 +2,45 @@ import { useEffect, useState } from "react";
|
||||
import type { CSSProperties } from "react";
|
||||
import { api } from "../api";
|
||||
import type { NavigateFn } from "./route-config";
|
||||
import type { Product } from "../types";
|
||||
import type { Asset, Product } from "../types";
|
||||
import "../trash-page.css";
|
||||
|
||||
const coverOf = (p: Product): string => p.cover_preview_url || p.images?.find((i) => i.preview_url)?.preview_url || "";
|
||||
// 资产缩略图:主文件直链优先,任一带 preview_url 的文件兜底
|
||||
const assetCoverOf = (a: Asset): string =>
|
||||
a.files?.find((f) => f.is_primary && f.preview_url)?.preview_url || a.files?.find((f) => f.preview_url)?.preview_url || "";
|
||||
const mediaStyle = (url: string): CSSProperties => ({ ["--mock-media-url"]: `url(${url})` } as CSSProperties);
|
||||
// mono 时间戳(设计规范 // 05.22 式):软删走 update updated_at → updated_at ≈ 删除时间
|
||||
const dateOf = (iso?: string): string => {
|
||||
if (!iso) return "";
|
||||
const d = new Date(iso);
|
||||
if (Number.isNaN(d.getTime())) return "";
|
||||
return `${String(d.getMonth() + 1).padStart(2, "0")}.${String(d.getDate()).padStart(2, "0")}`;
|
||||
};
|
||||
|
||||
// 垃圾桶:已软删(status=archived)的商品 · 可恢复 / 可彻底删除(不可恢复)
|
||||
const ASSET_TYPE_LABEL: Record<string, string> = { image: "图片", video: "视频", audio: "音频" };
|
||||
|
||||
// 垃圾桶:已软删商品(status=archived)+ 已软删资产(is_deleted,R108)· 均可恢复 / 可彻底删除(不可恢复)
|
||||
export function TrashPage({ onRestore, onPurge }: {
|
||||
navigate: NavigateFn;
|
||||
onRestore: (id: string) => Promise<unknown> | void;
|
||||
onPurge: (id: string) => Promise<unknown> | void;
|
||||
}) {
|
||||
const [items, setItems] = useState<Product[]>([]);
|
||||
const [assets, setAssets] = useState<Asset[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [confirmId, setConfirmId] = useState<string | null>(null);
|
||||
const [busyId, setBusyId] = useState<string | null>(null);
|
||||
const [errText, setErrText] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
api.productsTrash().then((r) => { if (alive) setItems(r.results); }).catch(() => { if (alive) setItems([]); }).finally(() => { if (alive) setLoading(false); });
|
||||
void Promise.allSettled([api.productsTrash(), api.assetsTrash()]).then(([p, a]) => {
|
||||
if (!alive) return;
|
||||
setItems(p.status === "fulfilled" ? p.value.results : []);
|
||||
setAssets(a.status === "fulfilled" ? a.value.results : []);
|
||||
setLoading(false);
|
||||
});
|
||||
return () => { alive = false; };
|
||||
}, []);
|
||||
|
||||
@@ -35,6 +54,21 @@ export function TrashPage({ onRestore, onPurge }: {
|
||||
try { await onPurge(id); setItems((list) => list.filter((p) => p.id !== id)); setConfirmId(null); }
|
||||
finally { setBusyId(null); }
|
||||
}
|
||||
// 资产的恢复/彻底删除直接走 api(商品那对经 App 的 action 包装,只发商品口)。失败不移行、如实亮错误。
|
||||
async function restoreAsset(id: string) {
|
||||
setBusyId(id);
|
||||
setErrText("");
|
||||
try { await api.restoreAsset(id); setAssets((list) => list.filter((a) => a.id !== id)); }
|
||||
catch (error) { setErrText(error instanceof Error ? error.message : "恢复失败"); }
|
||||
finally { setBusyId(null); }
|
||||
}
|
||||
async function purgeAsset(id: string) {
|
||||
setBusyId(id);
|
||||
setErrText("");
|
||||
try { await api.purgeAsset(id); setAssets((list) => list.filter((a) => a.id !== id)); setConfirmId(null); }
|
||||
catch (error) { setErrText(error instanceof Error ? error.message : "彻底删除失败"); }
|
||||
finally { setBusyId(null); }
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="trash-page">
|
||||
@@ -42,7 +76,7 @@ export function TrashPage({ onRestore, onPurge }: {
|
||||
<div>
|
||||
<h1>垃圾桶</h1>
|
||||
<div className="sub">
|
||||
<span className="mono">// 已删除商品</span>
|
||||
<span className="mono">// 已删除商品与资产</span>
|
||||
<span>·</span>
|
||||
<span>可恢复,或彻底删除(不可恢复)</span>
|
||||
</div>
|
||||
@@ -51,40 +85,85 @@ export function TrashPage({ onRestore, onPurge }: {
|
||||
|
||||
{loading ? (
|
||||
<div className="placeholder" style={{ minHeight: 160 }}><span className="ph-frame">// 加载中…</span></div>
|
||||
) : items.length === 0 ? (
|
||||
) : items.length === 0 && assets.length === 0 ? (
|
||||
<div className="placeholder trash-empty"><span className="ph-frame">// 垃圾桶是空的</span></div>
|
||||
) : (
|
||||
<div className="trash-list">
|
||||
{items.map((p) => {
|
||||
const cover = coverOf(p);
|
||||
const busy = busyId === p.id;
|
||||
return (
|
||||
<div className="trash-row" key={p.id}>
|
||||
<div className={`placeholder trash-thumb${cover ? " has-mock-media" : ""}`} style={cover ? mediaStyle(cover) : undefined}>
|
||||
{!cover && <span className="ph-frame">无图</span>}
|
||||
</div>
|
||||
<div className="trash-meta">
|
||||
<div className="trash-name" title={p.title}>{p.title}</div>
|
||||
<div className="trash-sub mono">// {p.category || "未分类"}</div>
|
||||
</div>
|
||||
<div className="trash-actions">
|
||||
{confirmId === p.id ? (
|
||||
<>
|
||||
<span className="trash-confirm-txt mono">彻底删除?不可恢复</span>
|
||||
<button className="btn btn-sm trash-del" type="button" disabled={busy} onClick={() => void purge(p.id)}>确认删除</button>
|
||||
<button className="btn btn-sm" type="button" disabled={busy} onClick={() => setConfirmId(null)}>取消</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<button className="btn btn-sm btn-primary" type="button" disabled={busy} onClick={() => void restore(p.id)}>恢复</button>
|
||||
<button className="btn btn-sm" type="button" disabled={busy} onClick={() => setConfirmId(p.id)}>彻底删除</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<>
|
||||
{errText && <div className="trash-err mono">// {errText}</div>}
|
||||
{items.length > 0 && (
|
||||
<div className="trash-section">
|
||||
<div className="trash-section-title mono">// 商品 · {items.length}</div>
|
||||
<div className="trash-list">
|
||||
{items.map((p) => {
|
||||
const cover = coverOf(p);
|
||||
const busy = busyId === p.id;
|
||||
return (
|
||||
<div className="trash-row" key={p.id}>
|
||||
<div className={`placeholder trash-thumb${cover ? " has-mock-media" : ""}`} style={cover ? mediaStyle(cover) : undefined}>
|
||||
{!cover && <span className="ph-frame">无图</span>}
|
||||
</div>
|
||||
<div className="trash-meta">
|
||||
<div className="trash-name" title={p.title}>{p.title}</div>
|
||||
<div className="trash-sub mono">// {p.category || "未分类"}</div>
|
||||
</div>
|
||||
<div className="trash-actions">
|
||||
{confirmId === p.id ? (
|
||||
<>
|
||||
<span className="trash-confirm-txt mono">彻底删除?不可恢复</span>
|
||||
<button className="btn btn-sm trash-del" type="button" disabled={busy} onClick={() => void purge(p.id)}>确认删除</button>
|
||||
<button className="btn btn-sm" type="button" disabled={busy} onClick={() => setConfirmId(null)}>取消</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<button className="btn btn-sm btn-primary" type="button" disabled={busy} onClick={() => void restore(p.id)}>恢复</button>
|
||||
<button className="btn btn-sm" type="button" disabled={busy} onClick={() => setConfirmId(p.id)}>彻底删除</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{assets.length > 0 && (
|
||||
<div className="trash-section">
|
||||
<div className="trash-section-title mono">// 资产 · {assets.length}</div>
|
||||
<div className="trash-list">
|
||||
{assets.map((a) => {
|
||||
const cover = assetCoverOf(a);
|
||||
const busy = busyId === a.id;
|
||||
const deletedAt = dateOf(a.updated_at);
|
||||
return (
|
||||
<div className="trash-row" key={a.id}>
|
||||
<div className={`placeholder trash-thumb${cover ? " has-mock-media" : ""}`} style={cover ? mediaStyle(cover) : undefined}>
|
||||
{!cover && <span className="ph-frame">无图</span>}
|
||||
</div>
|
||||
<div className="trash-meta">
|
||||
<div className="trash-name" title={a.name}>{a.name}</div>
|
||||
<div className="trash-sub mono">// {ASSET_TYPE_LABEL[a.asset_type] || a.asset_type}{deletedAt ? ` · 删除于 ${deletedAt}` : ""}</div>
|
||||
</div>
|
||||
<div className="trash-actions">
|
||||
{confirmId === a.id ? (
|
||||
<>
|
||||
<span className="trash-confirm-txt mono">彻底删除?不可恢复</span>
|
||||
<button className="btn btn-sm trash-del" type="button" disabled={busy} onClick={() => void purgeAsset(a.id)}>确认删除</button>
|
||||
<button className="btn btn-sm" type="button" disabled={busy} onClick={() => setConfirmId(null)}>取消</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<button className="btn btn-sm btn-primary" type="button" disabled={busy} onClick={() => void restoreAsset(a.id)}>恢复</button>
|
||||
<button className="btn btn-sm" type="button" disabled={busy} onClick={() => setConfirmId(a.id)}>彻底删除</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user