1023 lines
47 KiB
TypeScript
1023 lines
47 KiB
TypeScript
import { useEffect, useId, useMemo, useRef, useState, type FormEvent } from "react";
|
||
import type { CanvasState, ProjectEditableState } from "@dada/shared-contracts";
|
||
|
||
import {
|
||
ConflictExportGuard,
|
||
ProjectAutoSaveQueue,
|
||
ProjectStateConflict,
|
||
type ProjectSaveStatus,
|
||
} from "./project-autosave.js";
|
||
|
||
import "./project-pages.css";
|
||
|
||
type Ratio = "3:4" | "1:1" | "4:3" | "9:16";
|
||
type ProjectStatus = "active" | "failed_empty" | "trashed";
|
||
|
||
interface SessionPayload {
|
||
credits: { available_balance: number; reserved_balance: number };
|
||
csrf_token: string;
|
||
local_data?: LocalDataPayload;
|
||
user: { creator_name: string };
|
||
}
|
||
|
||
interface LocalDataPayload {
|
||
capacity_status: "normal" | "warning" | "critical" | "full" | "unavailable";
|
||
hard_limit_bytes: number;
|
||
managed_content_bytes: number;
|
||
}
|
||
|
||
interface AccountSettingsPayload {
|
||
local_data: LocalDataPayload;
|
||
}
|
||
|
||
interface ModelPayload {
|
||
config_set_version: number;
|
||
configured_default_model_id: string;
|
||
models: Array<{
|
||
config_version: number;
|
||
contract_validation_status: "verified" | "unverified";
|
||
credit_cost: number;
|
||
enabled: boolean;
|
||
is_default: boolean;
|
||
model_id: string;
|
||
prompt_max_length: number;
|
||
reference_limits: { max_file_bytes: number; max_files: number; max_total_bytes: number };
|
||
runtime_availability: { available_for_new_jobs: boolean; checked_at: string; reason: string | null };
|
||
supported_ratios: Ratio[];
|
||
}>;
|
||
recommended_model_id: string | null;
|
||
}
|
||
|
||
interface GenerationTaskPayload {
|
||
confirmed_credit_cost: number;
|
||
created_at: string;
|
||
error_category: GenerationErrorCategory | null;
|
||
generation_id: string;
|
||
model_config_version: number;
|
||
model_id: string;
|
||
project_id: string;
|
||
prompt: string;
|
||
ratio: Ratio;
|
||
reference_asset_ids?: string[];
|
||
reference_count: number;
|
||
reserved_credits: number;
|
||
status: "queued" | "running" | "succeeded" | "failed" | "rejected";
|
||
updated_at: string;
|
||
}
|
||
|
||
type GenerationErrorCategory = "upstream_timeout" | "upstream_failed" | "safety_rejected" | "model_disabled"
|
||
| "gateway_balance_insufficient" | "gateway_contract_invalid" | "reference_invalid"
|
||
| "unknown_retryable" | "unknown_non_retryable";
|
||
|
||
const generationErrorActions: Record<GenerationErrorCategory, string> = {
|
||
gateway_balance_insufficient: "选择未受影响模型或联系管理员",
|
||
gateway_contract_invalid: "选择其他模型或联系管理员",
|
||
model_disabled: "选择其他模型或等待",
|
||
reference_invalid: "更换或移除参考图",
|
||
safety_rejected: "修改提示词或参考图",
|
||
unknown_non_retryable: "联系管理员",
|
||
unknown_retryable: "稍后重试",
|
||
upstream_failed: "稍后重试",
|
||
upstream_timeout: "使用原输入重试",
|
||
};
|
||
|
||
interface ProjectSummary {
|
||
current_image_id: string | null;
|
||
deleted_at?: string | null;
|
||
name: string;
|
||
project_id: string;
|
||
purge_at?: string | null;
|
||
ratio: Ratio;
|
||
state_version: number;
|
||
status: ProjectStatus;
|
||
successful_image_count: number;
|
||
updated_at: string;
|
||
}
|
||
|
||
interface ProjectListPayload {
|
||
active_count: number;
|
||
active_limit: 20;
|
||
projects: ProjectSummary[];
|
||
}
|
||
|
||
interface ProjectDetailPayload extends ProjectSummary {
|
||
canvas_state: CanvasState;
|
||
created_at: string;
|
||
draft_prompt: string;
|
||
generations: Array<{
|
||
created_at: string;
|
||
error_category: string | null;
|
||
generation_id: string;
|
||
prompt: string;
|
||
ratio: Ratio;
|
||
status: "queued" | "running" | "succeeded" | "failed" | "rejected";
|
||
updated_at: string;
|
||
}>;
|
||
images: Array<{ created_at: string; generation_id: string; image_id: string }>;
|
||
latest_exports: Array<{
|
||
byte_size: number;
|
||
created_at: string;
|
||
download_url: string;
|
||
export_id: string;
|
||
format: "jpg" | "png";
|
||
pixel_height: number;
|
||
pixel_width: number;
|
||
sha256: string;
|
||
state_version: number;
|
||
}>;
|
||
pixel_height?: number;
|
||
pixel_width?: number;
|
||
save_status: "saved";
|
||
}
|
||
|
||
async function readJson<T>(url: string, init?: RequestInit): Promise<T> {
|
||
const response = await fetch(url, { credentials: "same-origin", ...init });
|
||
if (response.status === 401) {
|
||
window.dispatchEvent(new Event("dada:session-invalid"));
|
||
throw new Error("session_invalid");
|
||
}
|
||
if (!response.ok) throw new Error("request_failed");
|
||
return response.json() as Promise<T>;
|
||
}
|
||
|
||
async function readOptionalJson<T>(url: string): Promise<T | undefined> {
|
||
const response = await fetch(url, { credentials: "same-origin" });
|
||
if (response.status === 401) {
|
||
window.dispatchEvent(new Event("dada:session-invalid"));
|
||
throw new Error("session_invalid");
|
||
}
|
||
if (response.status === 404) return undefined;
|
||
if (!response.ok) throw new Error("request_failed");
|
||
return response.json() as Promise<T>;
|
||
}
|
||
|
||
function formatUpdatedAt(value: string) {
|
||
return new Intl.DateTimeFormat("zh-CN", { dateStyle: "medium", timeStyle: "short" }).format(new Date(value));
|
||
}
|
||
|
||
function initialCanvasState(project: Pick<ProjectDetailPayload, "current_image_id" | "pixel_height" | "pixel_width" | "ratio">): CanvasState {
|
||
return {
|
||
background: {
|
||
adjustments: {
|
||
brightness: 0, contrast: 0, crop: null, filter: "none", fit: "fill",
|
||
saturation: 0, sharpness: 0, temperature: 0,
|
||
},
|
||
asset_id: project.current_image_id,
|
||
},
|
||
elements: [],
|
||
pixel_height: project.pixel_height ?? (project.ratio === "9:16" ? 1920 : project.ratio === "3:4" ? 1440 : 1080),
|
||
pixel_width: project.pixel_width ?? (project.ratio === "4:3" ? 1440 : 1080),
|
||
ratio: project.ratio,
|
||
schema_version: 1,
|
||
};
|
||
}
|
||
|
||
async function downloadConflictPng(canvasState: CanvasState, projectName: string) {
|
||
const canvas = document.createElement("canvas");
|
||
canvas.width = canvasState.pixel_width;
|
||
canvas.height = canvasState.pixel_height;
|
||
const context = canvas.getContext("2d");
|
||
if (!context) throw new Error("canvas_unavailable");
|
||
context.fillStyle = "#f6f6f4";
|
||
context.fillRect(0, 0, canvas.width, canvas.height);
|
||
context.fillStyle = "#d4d4cf";
|
||
const stripe = canvas.width / 4;
|
||
for (let index = 0; index < 4; index += 1) {
|
||
if (index % 2 === 1) context.fillRect(index * stripe, 0, stripe, canvas.height);
|
||
}
|
||
context.fillStyle = "#111111";
|
||
context.font = `900 ${Math.max(64, Math.floor(canvas.width / 7))}px Arial`;
|
||
context.textAlign = "center";
|
||
context.textBaseline = "middle";
|
||
context.fillText("DADA", canvas.width / 2, canvas.height / 2);
|
||
const blob = await new Promise<Blob>((resolve, reject) => {
|
||
canvas.toBlob((value) => value ? resolve(value) : reject(new Error("canvas_export_failed")), "image/png");
|
||
});
|
||
const url = URL.createObjectURL(blob);
|
||
const anchor = document.createElement("a");
|
||
anchor.download = `${projectName.trim().replace(/[\\/:*?"<>|]+/g, "-") || "Dada"}-本页版本.png`;
|
||
anchor.href = url;
|
||
anchor.click();
|
||
setTimeout(() => URL.revokeObjectURL(url), 0);
|
||
}
|
||
|
||
export function ProductHeader({ current }: { current: "workspace" | "projects" | "credits" }) {
|
||
return (
|
||
<header className="product-header">
|
||
<a className="product-brand" href="/app">DADA</a>
|
||
<nav aria-label="主导航">
|
||
<a aria-current={current === "workspace" ? "page" : undefined} href="/app">创作</a>
|
||
<a aria-current={current === "projects" ? "page" : undefined} href="/app/projects">项目</a>
|
||
<a aria-current={current === "credits" ? "page" : undefined} href="/app/credits">点数</a>
|
||
<a href="/app/settings">设置</a>
|
||
</nav>
|
||
</header>
|
||
);
|
||
}
|
||
|
||
export function LocalOnlyFooter() {
|
||
return <footer className="local-only-footer">测试数据仅保存在本机，不自动备份，也不会迁移到正式系统。</footer>;
|
||
}
|
||
|
||
function LoadingPage({ label }: { label: string }) {
|
||
return <main className="product-loading" aria-live="polite">{label}</main>;
|
||
}
|
||
|
||
function ProjectPlaceholder({ ratio, status }: { ratio: Ratio; status: ProjectStatus }) {
|
||
return (
|
||
<div className="project-placeholder" data-ratio={ratio} data-status={status} aria-hidden="true">
|
||
<span>D</span><span>A</span><span>D</span><span>A</span>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function WorkspacePage() {
|
||
const promptId = useId();
|
||
const [session, setSession] = useState<SessionPayload>();
|
||
const [projects, setProjects] = useState<ProjectListPayload>();
|
||
const [models, setModels] = useState<ModelPayload>();
|
||
const [selectedModelId, setSelectedModelId] = useState<string>();
|
||
const [currentTask, setCurrentTask] = useState<GenerationTaskPayload>();
|
||
const [localData, setLocalData] = useState<LocalDataPayload>();
|
||
const [generationStateLoaded, setGenerationStateLoaded] = useState(false);
|
||
const [loadingFailed, setLoadingFailed] = useState(false);
|
||
const [prompt, setPrompt] = useState("");
|
||
const [ratio, setRatio] = useState<Ratio>("3:4");
|
||
const [references, setReferences] = useState<File[]>([]);
|
||
const [submitting, setSubmitting] = useState(false);
|
||
const [generationNotice, setGenerationNotice] = useState("");
|
||
const [requiresReconfirmation, setRequiresReconfirmation] = useState(false);
|
||
const query = useMemo(() => new URLSearchParams(window.location.search), []);
|
||
const [targetProjectId, setTargetProjectId] = useState<string | undefined>(() => query.get("retry") ?? query.get("continue") ?? undefined);
|
||
const [existingReferenceAssetIds, setExistingReferenceAssetIds] = useState<string[]>([]);
|
||
|
||
useEffect(() => {
|
||
let active = true;
|
||
Promise.all([
|
||
readJson<SessionPayload>("/api/v1/auth/session"),
|
||
readJson<ProjectListPayload>("/api/v1/projects?status=active"),
|
||
]).then(([nextSession, nextProjects]) => {
|
||
if (!active) return;
|
||
setSession(nextSession);
|
||
setProjects(nextProjects);
|
||
setLocalData(nextSession.local_data);
|
||
return Promise.allSettled([
|
||
readOptionalJson<ModelPayload>("/api/v1/models"),
|
||
readOptionalJson<GenerationTaskPayload>("/api/v1/generations/current"),
|
||
readOptionalJson<AccountSettingsPayload>("/api/v1/account/settings"),
|
||
]).then(([modelResult, taskResult, settingsResult]) => {
|
||
if (!active) return;
|
||
if (modelResult.status === "fulfilled") setModels(modelResult.value);
|
||
if (taskResult.status === "fulfilled") setCurrentTask(taskResult.value);
|
||
if (settingsResult.status === "fulfilled" && settingsResult.value) setLocalData(settingsResult.value.local_data);
|
||
setGenerationStateLoaded(true);
|
||
});
|
||
}).catch((error) => {
|
||
if (active && error instanceof Error && error.message !== "session_invalid") setLoadingFailed(true);
|
||
});
|
||
return () => { active = false; };
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (!targetProjectId || prompt) return;
|
||
readOptionalJson<ProjectDetailPayload>(`/api/v1/projects/${targetProjectId}`).then((project) => {
|
||
if (!project) return;
|
||
setPrompt(project.draft_prompt);
|
||
setRatio(project.ratio);
|
||
}).catch(() => setGenerationNotice("暂时无法读取原项目。"));
|
||
}, [prompt, targetProjectId]);
|
||
|
||
useEffect(() => {
|
||
if (!currentTask || !["queued", "running"].includes(currentTask.status)) return;
|
||
const timer = window.setInterval(() => {
|
||
readOptionalJson<GenerationTaskPayload>(`/api/v1/generations/${currentTask.generation_id}`)
|
||
.then((task) => { if (task) setCurrentTask(task); })
|
||
.catch(() => undefined);
|
||
}, 2_000);
|
||
return () => window.clearInterval(timer);
|
||
}, [currentTask?.generation_id, currentTask?.status]);
|
||
|
||
const selectedModel = useMemo(() => {
|
||
if (!models) return undefined;
|
||
const modelId = selectedModelId ?? models.recommended_model_id ?? models.configured_default_model_id;
|
||
return models.models.find((model) => model.model_id === modelId && model.enabled
|
||
&& model.contract_validation_status === "verified" && model.runtime_availability.available_for_new_jobs);
|
||
}, [models, selectedModelId]);
|
||
|
||
const referenceBytes = references.reduce((sum, file) => sum + file.size, 0);
|
||
const referencesValid = selectedModel !== undefined
|
||
&& references.length <= selectedModel.reference_limits.max_files
|
||
&& referenceBytes <= selectedModel.reference_limits.max_total_bytes
|
||
&& references.every((file) => file.size > 0 && file.size <= selectedModel.reference_limits.max_file_bytes);
|
||
const capacityBlocksGeneration = localData?.capacity_status === "full" || localData?.capacity_status === "unavailable";
|
||
const canSubmit = generationStateLoaded && !currentTask && !submitting && !requiresReconfirmation && selectedModel !== undefined
|
||
&& prompt.trim().length > 0 && prompt.trim().length <= selectedModel.prompt_max_length
|
||
&& selectedModel.supported_ratios.includes(ratio) && referencesValid
|
||
&& session !== undefined && session.credits.available_balance >= selectedModel.credit_cost && !capacityBlocksGeneration;
|
||
|
||
async function submitGeneration(event: FormEvent) {
|
||
event.preventDefault();
|
||
if (!session || !selectedModel || !canSubmit) return;
|
||
const body = new FormData();
|
||
body.append("client_submission_id", crypto.randomUUID());
|
||
body.append("confirmed_credit_cost", String(selectedModel.credit_cost));
|
||
body.append("creation_mode", targetProjectId ? "existing_project" : "new_project");
|
||
body.append("existing_reference_asset_ids", JSON.stringify(existingReferenceAssetIds));
|
||
body.append("model_config_version", String(selectedModel.config_version));
|
||
body.append("model_id", selectedModel.model_id);
|
||
body.append("prompt", prompt.trim());
|
||
body.append("ratio", ratio);
|
||
if (targetProjectId) body.append("project_id", targetProjectId);
|
||
body.append("reference_manifest", JSON.stringify(references.map((file) => ({
|
||
file_name: file.name,
|
||
mime_type: file.type,
|
||
size: file.size,
|
||
}))));
|
||
for (const file of references) body.append("reference_files", file, file.name);
|
||
setSubmitting(true);
|
||
setGenerationNotice("");
|
||
try {
|
||
const response = await fetch("/api/v1/generations", {
|
||
body,
|
||
credentials: "same-origin",
|
||
headers: {
|
||
"Idempotency-Key": `generation-${crypto.randomUUID()}`,
|
||
"X-CSRF-Token": session.csrf_token,
|
||
},
|
||
method: "POST",
|
||
});
|
||
if (response.status === 401) {
|
||
window.dispatchEvent(new Event("dada:session-invalid"));
|
||
return;
|
||
}
|
||
if (response.status === 412) {
|
||
setRequiresReconfirmation(true);
|
||
setGenerationNotice("模型配置已更新，请确认最新配置后重新提交。");
|
||
return;
|
||
}
|
||
if (!response.ok) {
|
||
setGenerationNotice(response.status === 507 ? "本机存储空间不足，当前不能创建新任务。" : "任务未提交，请检查当前状态后重试。");
|
||
return;
|
||
}
|
||
const result = await response.json() as { created: boolean; task: GenerationTaskPayload };
|
||
setCurrentTask(result.task);
|
||
setSession((current) => current ? {
|
||
...current,
|
||
credits: {
|
||
available_balance: current.credits.available_balance - (result.created ? result.task.reserved_credits : 0),
|
||
reserved_balance: current.credits.reserved_balance + (result.created ? result.task.reserved_credits : 0),
|
||
},
|
||
} : current);
|
||
setGenerationNotice(result.created ? "任务已提交。" : "已返回当前进行中的任务。");
|
||
} catch {
|
||
setGenerationNotice("任务未提交，请检查本机服务后重试。");
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
}
|
||
|
||
function handleTerminalAction(task: GenerationTaskPayload) {
|
||
const category = task.error_category;
|
||
if (!category) return;
|
||
if (category === "unknown_non_retryable") {
|
||
setGenerationNotice("请联系超级管理员处理此任务。");
|
||
return;
|
||
}
|
||
setPrompt(task.prompt);
|
||
setRatio(task.ratio);
|
||
setTargetProjectId(task.project_id);
|
||
setExistingReferenceAssetIds(task.reference_asset_ids ?? []);
|
||
setCurrentTask(undefined);
|
||
if (["model_disabled", "gateway_balance_insufficient", "gateway_contract_invalid"].includes(category)) {
|
||
setSelectedModelId(undefined);
|
||
setGenerationNotice("请选择当前可用模型后重新提交。");
|
||
} else if (category === "safety_rejected" || category === "reference_invalid") {
|
||
setGenerationNotice("请修改输入后重新提交。");
|
||
} else {
|
||
setGenerationNotice("已恢复原任务输入，可以重新提交。");
|
||
}
|
||
}
|
||
|
||
async function confirmLatestModelConfiguration() {
|
||
try {
|
||
const next = await readJson<ModelPayload>("/api/v1/models");
|
||
setModels(next);
|
||
setRequiresReconfirmation(false);
|
||
setGenerationNotice("已确认最新配置，请重新检查点数和参考图后提交。");
|
||
} catch {
|
||
setGenerationNotice("暂时无法读取最新模型配置。");
|
||
}
|
||
}
|
||
|
||
if (loadingFailed) {
|
||
return (
|
||
<main className="product-loading">
|
||
<p role="alert">创作工作台暂时无法读取。</p>
|
||
<button onClick={() => window.location.reload()} type="button">重新读取</button>
|
||
</main>
|
||
);
|
||
}
|
||
if (!session || !projects) return <LoadingPage label="正在读取创作工作台" />;
|
||
const empty = projects.projects.length === 0;
|
||
|
||
return (
|
||
<div className="product-page">
|
||
<ProductHeader current="workspace" />
|
||
{empty ? (
|
||
<section className="workspace-art" aria-labelledby="workspace-title">
|
||
<div>
|
||
<strong>DADA</strong>
|
||
<h1 id="workspace-title">开始一张新作品</h1>
|
||
</div>
|
||
<div className="workspace-art-system" aria-hidden="true">
|
||
<i /><b>NEW PROJECT</b><b>LOCAL ONLY</b><b>NO CLOUD SYNC</b>
|
||
</div>
|
||
</section>
|
||
) : null}
|
||
<main className={`workspace-main ${empty ? "is-empty" : "has-projects"}`}>
|
||
<form className="generation-area" aria-labelledby={empty ? undefined : "workspace-compact-title"} onSubmit={submitGeneration}>
|
||
{!empty ? (
|
||
<div className="workspace-compact-heading">
|
||
<div><p>NEW PROJECT</p><h1 id="workspace-compact-title">新建创作</h1></div>
|
||
<span>当前可用 {session.credits.available_balance} 点</span>
|
||
</div>
|
||
) : null}
|
||
<label className="prompt-label" htmlFor={promptId}>描述你想生成的画面</label>
|
||
<textarea
|
||
id={promptId}
|
||
maxLength={4_000}
|
||
onChange={(event) => setPrompt(event.target.value)}
|
||
placeholder="输入提示词…"
|
||
value={prompt}
|
||
/>
|
||
<div className="generation-options">
|
||
<div className="model-status" aria-live="polite">
|
||
<span>模型</span>
|
||
{models?.models.some((model) => model.enabled && model.contract_validation_status === "verified" && model.runtime_availability.available_for_new_jobs) ? (
|
||
<select aria-label="模型" onChange={(event) => setSelectedModelId(event.target.value || undefined)} value={selectedModel?.model_id ?? ""}>
|
||
{models.models.filter((model) => model.enabled && model.contract_validation_status === "verified" && model.runtime_availability.available_for_new_jobs)
|
||
.map((model) => <option key={model.model_id} value={model.model_id}>{model.model_id}</option>)}
|
||
</select>
|
||
) : <strong>当前没有可用于新任务的模型</strong>}
|
||
</div>
|
||
<fieldset className="ratio-control">
|
||
<legend>画面比例</legend>
|
||
<div>
|
||
{(["3:4", "1:1", "4:3", "9:16"] as const).map((value) => (
|
||
<label key={value}>
|
||
<input
|
||
checked={ratio === value}
|
||
disabled={selectedModel !== undefined && !selectedModel.supported_ratios.includes(value)}
|
||
name="ratio"
|
||
onChange={() => setRatio(value)}
|
||
type="radio"
|
||
value={value}
|
||
/>
|
||
<span>{value}</span>
|
||
</label>
|
||
))}
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
<label className="reference-input">
|
||
<span>添加参考图</span>
|
||
<small>{references.length > 0 ? references.map((file) => file.name).join("、") : "尚未提交，仅保留在当前页面"}</small>
|
||
<input
|
||
accept="image/jpeg,image/png,image/webp"
|
||
multiple
|
||
onChange={(event) => setReferences(Array.from(event.target.files ?? []))}
|
||
type="file"
|
||
/>
|
||
</label>
|
||
{localData?.capacity_status === "critical" ? (
|
||
<div className="capacity-critical" role="status">
|
||
<strong>存储空间已超过 90%</strong>
|
||
<span>请尽快清理本机内容，达到上限后将无法提交新任务。</span>
|
||
</div>
|
||
) : null}
|
||
{generationNotice ? (
|
||
<div className="generation-notice" role="status">
|
||
<span>{generationNotice}</span>
|
||
{requiresReconfirmation ? (
|
||
<button onClick={confirmLatestModelConfiguration} type="button">确认最新配置</button>
|
||
) : null}
|
||
</div>
|
||
) : null}
|
||
<div className="generation-submit">
|
||
<span>{selectedModel ? `本次预计冻结 ${selectedModel.credit_cost} 点` : "预计点数将在模型可用后显示"}</span>
|
||
<button disabled={!canSubmit} type="submit">{submitting ? "正在提交" : "生成一张图片"}</button>
|
||
</div>
|
||
</form>
|
||
<aside className="current-task" aria-labelledby="current-task-title">
|
||
<h2 id="current-task-title">当前任务</h2>
|
||
{currentTask ? (
|
||
<div className="current-task-active">
|
||
<span className="task-state">{{
|
||
failed: "生成失败", queued: "排队中", rejected: "请求未通过", running: "处理中", succeeded: "生成成功",
|
||
}[currentTask.status]}</span>
|
||
<strong>{currentTask.prompt}</strong>
|
||
<dl>
|
||
<div><dt>画面比例</dt><dd>{currentTask.ratio}</dd></div>
|
||
<div><dt>参考图</dt><dd>{currentTask.reference_count} 张</dd></div>
|
||
<div><dt>点数</dt><dd>{currentTask.status === "succeeded" ? `已扣除 ${currentTask.confirmed_credit_cost} 点` : ["failed", "rejected"].includes(currentTask.status) ? "已释放冻结点" : `已冻结 ${currentTask.reserved_credits} 点`}</dd></div>
|
||
</dl>
|
||
{currentTask.status === "succeeded" ? <a href={`/app/projects/${currentTask.project_id}`}>进入编辑</a> : null}
|
||
{["queued", "running"].includes(currentTask.status) ? <a href={`/app/projects/${currentTask.project_id}`}>返回当前项目</a> : null}
|
||
{["failed", "rejected"].includes(currentTask.status) && currentTask.error_category ? (
|
||
<button onClick={() => handleTerminalAction(currentTask)} type="button">{generationErrorActions[currentTask.error_category]}</button>
|
||
) : null}
|
||
</div>
|
||
) : (
|
||
<div className="current-task-empty"><i /><strong>没有进行中的任务</strong><span>任务状态会持续显示在这里</span></div>
|
||
)}
|
||
</aside>
|
||
{!empty ? (
|
||
<section className="recent-projects" aria-labelledby="recent-title">
|
||
<header><h2 id="recent-title">最近项目</h2><a href="/app/projects">查看全部项目</a></header>
|
||
<div className="project-grid compact">
|
||
{projects.projects.slice(0, 6).map((project) => <ProjectCard key={project.project_id} project={project} />)}
|
||
</div>
|
||
</section>
|
||
) : null}
|
||
</main>
|
||
<LocalOnlyFooter />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ProjectCard({ activeLimitReached, busy, onPurge, onRestore, onSelect, onTrash, project, selectable, selected }: {
|
||
activeLimitReached?: boolean;
|
||
busy?: boolean;
|
||
onPurge?: (() => void) | undefined;
|
||
onRestore?: (() => void) | undefined;
|
||
onSelect?: (selected: boolean) => void;
|
||
onTrash?: (() => void) | undefined;
|
||
project: ProjectSummary;
|
||
selectable?: boolean;
|
||
selected?: boolean;
|
||
}) {
|
||
return (
|
||
<article className="project-card" data-status={project.status}>
|
||
{selectable ? (
|
||
<label className="project-select">
|
||
<input
|
||
aria-label={`选择失败草稿：${project.name}`}
|
||
checked={selected}
|
||
onChange={(event) => onSelect?.(event.target.checked)}
|
||
type="checkbox"
|
||
/>
|
||
</label>
|
||
) : null}
|
||
<ProjectPlaceholder ratio={project.ratio} status={project.status} />
|
||
<div className="project-card-body">
|
||
<div><h3 title={project.name}>{project.name}</h3><span>{project.status === "failed_empty" ? "生成失败" : project.status === "trashed" ? "回收站" : "项目"}</span></div>
|
||
<p>{project.successful_image_count} 张成功图 · {project.ratio}</p>
|
||
{project.status === "trashed" && project.purge_at ? <p className="trash-expiry">将在 {formatUpdatedAt(project.purge_at)} 永久删除</p> : null}
|
||
<time dateTime={project.updated_at}>{formatUpdatedAt(project.updated_at)}</time>
|
||
<div className="project-card-actions">
|
||
{project.status !== "trashed" ? <a aria-label={`打开项目：${project.name}`} href={`/app/projects/${project.project_id}`}>打开</a> : null}
|
||
{onTrash ? <button aria-label={`移入回收站：${project.name}`} disabled={busy} onClick={onTrash} type="button">移入回收站</button> : null}
|
||
{onRestore ? <button aria-label={`恢复项目：${project.name}`} disabled={busy || activeLimitReached} onClick={onRestore} type="button">恢复</button> : null}
|
||
{onPurge ? <button aria-label={`永久删除：${project.name}`} disabled={busy} onClick={onPurge} type="button">永久删除</button> : null}
|
||
</div>
|
||
</div>
|
||
</article>
|
||
);
|
||
}
|
||
|
||
export function ProjectsPage() {
|
||
const [session, setSession] = useState<SessionPayload>();
|
||
const [payload, setPayload] = useState<ProjectListPayload>();
|
||
const [status, setStatus] = useState<"active" | "trashed">("active");
|
||
const [query, setQuery] = useState("");
|
||
const [sort, setSort] = useState<"updated" | "name">("updated");
|
||
const [selected, setSelected] = useState<string[]>([]);
|
||
const [loadingFailed, setLoadingFailed] = useState(false);
|
||
const [notice, setNotice] = useState("");
|
||
const [busyProjectId, setBusyProjectId] = useState<string>();
|
||
const [pendingPurge, setPendingPurge] = useState<ProjectSummary>();
|
||
|
||
useEffect(() => {
|
||
let active = true;
|
||
setLoadingFailed(false);
|
||
Promise.all([
|
||
session ? Promise.resolve(session) : readJson<SessionPayload>("/api/v1/auth/session"),
|
||
readJson<ProjectListPayload>(`/api/v1/projects?status=${status}`),
|
||
]).then(([nextSession, nextProjects]) => {
|
||
if (!active) return;
|
||
setSession(nextSession);
|
||
setPayload(nextProjects);
|
||
setSelected([]);
|
||
}).catch((error) => {
|
||
if (active && error instanceof Error && error.message !== "session_invalid") setLoadingFailed(true);
|
||
});
|
||
return () => { active = false; };
|
||
}, [status]);
|
||
|
||
const visible = useMemo(() => {
|
||
const normalized = query.trim().toLocaleLowerCase("zh-CN");
|
||
const items = (payload?.projects ?? []).filter((project) => project.name.toLocaleLowerCase("zh-CN").includes(normalized));
|
||
return items.toSorted((left, right) => sort === "name"
|
||
? left.name.localeCompare(right.name, "zh-CN")
|
||
: Date.parse(right.updated_at) - Date.parse(left.updated_at));
|
||
}, [payload, query, sort]);
|
||
|
||
async function batchTrash() {
|
||
if (!session || selected.length === 0) return;
|
||
try {
|
||
const result = await readJson<{ ignored_project_ids: string[]; trashed_project_ids: string[] }>("/api/v1/projects/failed-empty/trash", {
|
||
body: JSON.stringify({ project_ids: selected }),
|
||
headers: { "Content-Type": "application/json", "X-CSRF-Token": session.csrf_token },
|
||
method: "POST",
|
||
});
|
||
setPayload((current) => current ? {
|
||
...current,
|
||
active_count: Math.max(0, current.active_count - result.trashed_project_ids.length),
|
||
projects: current.projects.filter((project) => !result.trashed_project_ids.includes(project.project_id)),
|
||
} : current);
|
||
setSelected([]);
|
||
setNotice("失败草稿已移入回收站");
|
||
} catch {
|
||
setNotice("操作未完成，请重试");
|
||
}
|
||
}
|
||
|
||
async function runLifecycle(project: ProjectSummary, action: "trash" | "restore" | "purge") {
|
||
if (!session || busyProjectId) return;
|
||
setBusyProjectId(project.project_id);
|
||
try {
|
||
await readJson(`/api/v1/projects/${project.project_id}/${action}`, {
|
||
headers: { "X-CSRF-Token": session.csrf_token },
|
||
method: "POST",
|
||
});
|
||
setPayload((current) => current ? {
|
||
...current,
|
||
active_count: action === "trash"
|
||
? Math.max(0, current.active_count - 1)
|
||
: action === "restore"
|
||
? Math.min(current.active_limit, current.active_count + 1)
|
||
: current.active_count,
|
||
projects: current.projects.filter((item) => item.project_id !== project.project_id),
|
||
} : current);
|
||
setNotice(action === "trash"
|
||
? "项目已移入回收站"
|
||
: action === "restore"
|
||
? "项目已恢复"
|
||
: "项目已永久删除，物理清理将在后台完成");
|
||
if (action === "purge") setPendingPurge(undefined);
|
||
} catch {
|
||
setNotice("操作未完成，请重试");
|
||
} finally {
|
||
setBusyProjectId(undefined);
|
||
}
|
||
}
|
||
|
||
if (!payload && !loadingFailed) return <LoadingPage label="正在读取项目" />;
|
||
|
||
return (
|
||
<div className="product-page">
|
||
<ProductHeader current="projects" />
|
||
<main className="projects-page">
|
||
<header className="projects-title">
|
||
<div><p>LOCAL PROJECTS</p><h1>项目</h1></div>
|
||
<strong>{payload?.active_count ?? 0} / 20 active</strong>
|
||
</header>
|
||
<div className="projects-tabs" role="tablist" aria-label="项目状态">
|
||
<button aria-selected={status === "active"} onClick={() => setStatus("active")} role="tab" type="button">项目</button>
|
||
<button aria-selected={status === "trashed"} onClick={() => setStatus("trashed")} role="tab" type="button">回收站</button>
|
||
</div>
|
||
<div className="projects-controls">
|
||
<input aria-label="搜索项目" onChange={(event) => setQuery(event.target.value)} placeholder="搜索项目" type="search" value={query} />
|
||
<select aria-label="状态筛选" value={status} onChange={(event) => setStatus(event.target.value as "active" | "trashed")}>
|
||
<option value="active">active</option><option value="trashed">trashed</option>
|
||
</select>
|
||
<select aria-label="项目排序" value={sort} onChange={(event) => setSort(event.target.value as "updated" | "name")}>
|
||
<option value="updated">最近更新</option><option value="name">名称</option>
|
||
</select>
|
||
</div>
|
||
{loadingFailed ? <p className="projects-stale" role="alert">项目列表读取失败。{payload ? "当前显示上次读取的数据。" : ""}</p> : null}
|
||
{notice ? <p className="projects-notice" role="status">{notice}</p> : null}
|
||
{status === "trashed" && payload && payload.active_count === payload.active_limit ? (
|
||
<p className="projects-stale">活动项目已达 20 个，请先释放名额</p>
|
||
) : null}
|
||
{visible.length === 0 ? (
|
||
<section className="projects-empty">
|
||
<h2>{query ? "没有符合条件的项目" : status === "active" ? "还没有项目" : "回收站为空"}</h2>
|
||
{query ? <button onClick={() => setQuery("")} type="button">清除筛选</button> : status === "active" ? <a href="/app">前往创作</a> : null}
|
||
</section>
|
||
) : (
|
||
<div className="project-grid">
|
||
{visible.map((project) => (
|
||
<ProjectCard
|
||
key={project.project_id}
|
||
onSelect={(checked) => setSelected((current) => checked
|
||
? [...current, project.project_id]
|
||
: current.filter((projectId) => projectId !== project.project_id))}
|
||
project={project}
|
||
activeLimitReached={payload?.active_count === payload?.active_limit}
|
||
busy={busyProjectId === project.project_id}
|
||
onPurge={status === "trashed" ? () => setPendingPurge(project) : undefined}
|
||
onRestore={status === "trashed" ? () => runLifecycle(project, "restore") : undefined}
|
||
onTrash={status === "active" ? () => runLifecycle(project, "trash") : undefined}
|
||
selectable={status === "active" && project.status === "failed_empty"}
|
||
selected={selected.includes(project.project_id)}
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
{status === "active" && payload?.projects.some((project) => project.status === "failed_empty") ? (
|
||
<section className="failed-draft-bar" aria-label="失败草稿快捷清理">
|
||
<span>已选 {selected.length} 个无成功图草稿</span>
|
||
<button disabled={selected.length === 0} onClick={batchTrash} type="button">批量移入回收站</button>
|
||
</section>
|
||
) : null}
|
||
</main>
|
||
{pendingPurge ? (
|
||
<div className="project-purge-overlay">
|
||
<section aria-labelledby="project-purge-title" aria-modal="true" className="project-purge-dialog" role="dialog">
|
||
<p>IRREVERSIBLE ACTION</p>
|
||
<h2 id="project-purge-title">永久删除项目</h2>
|
||
<p>“{pendingPurge.name}”将立即无法恢复。关联数据和文件会进入后台物理清理队列。</p>
|
||
<div>
|
||
<button disabled={busyProjectId === pendingPurge.project_id} onClick={() => runLifecycle(pendingPurge, "purge")} type="button">确认永久删除</button>
|
||
<button disabled={Boolean(busyProjectId)} onClick={() => setPendingPurge(undefined)} type="button">取消</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
) : null}
|
||
<LocalOnlyFooter />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function ProjectDetailPage({ projectId }: { projectId: string }) {
|
||
const [session, setSession] = useState<SessionPayload>();
|
||
const [project, setProject] = useState<ProjectDetailPayload>();
|
||
const [name, setName] = useState("");
|
||
const [saveStatus, setSaveStatus] = useState<ProjectSaveStatus>("saved");
|
||
const [conflictVersions, setConflictVersions] = useState<{ latest: number; page: number }>();
|
||
const [conflictExportBusy, setConflictExportBusy] = useState(false);
|
||
const [conflictExportUsed, setConflictExportUsed] = useState(false);
|
||
const [conflictNotice, setConflictNotice] = useState("");
|
||
const [pendingNavigation, setPendingNavigation] = useState<string>();
|
||
const [leaving, setLeaving] = useState(false);
|
||
const [leaveStatus, setLeaveStatus] = useState("");
|
||
const [loadingFailed, setLoadingFailed] = useState(false);
|
||
const queueRef = useRef<ProjectAutoSaveQueue | undefined>(undefined);
|
||
const saveStatusRef = useRef<ProjectSaveStatus>("saved");
|
||
const conflictExportGuard = useRef(new ConflictExportGuard());
|
||
|
||
useEffect(() => {
|
||
let active = true;
|
||
Promise.all([
|
||
readJson<SessionPayload>("/api/v1/auth/session"),
|
||
readJson<ProjectDetailPayload>(`/api/v1/projects/${projectId}`),
|
||
]).then(([nextSession, nextProject]) => {
|
||
if (!active) return;
|
||
setSession(nextSession);
|
||
const normalizedProject = {
|
||
...nextProject,
|
||
canvas_state: nextProject.canvas_state ?? initialCanvasState(nextProject),
|
||
latest_exports: nextProject.latest_exports ?? [],
|
||
save_status: nextProject.save_status ?? "saved",
|
||
};
|
||
setProject(normalizedProject);
|
||
setName(nextProject.name);
|
||
}).catch((error) => {
|
||
if (active && error instanceof Error && error.message !== "session_invalid") setLoadingFailed(true);
|
||
});
|
||
return () => { active = false; };
|
||
}, [projectId]);
|
||
|
||
useEffect(() => {
|
||
if (!project || !session) return;
|
||
const queue = new ProjectAutoSaveQueue({
|
||
initialState: { canvas_state: project.canvas_state, name: project.name },
|
||
initialVersion: project.state_version,
|
||
onConflict: (latestVersion) => setConflictVersions({ latest: latestVersion, page: queue.stateVersion }),
|
||
onSaved: (snapshot, stateVersion) => {
|
||
setProject((current) => current ? {
|
||
...current, canvas_state: snapshot.canvas_state, name: snapshot.name,
|
||
save_status: "saved", state_version: stateVersion,
|
||
} : current);
|
||
setName(snapshot.name);
|
||
},
|
||
onStatus: (status) => {
|
||
saveStatusRef.current = status;
|
||
setSaveStatus(status);
|
||
},
|
||
save: async (snapshot, stateVersion, operationId) => {
|
||
const response = await fetch(`/api/v1/projects/${projectId}/state`, {
|
||
body: JSON.stringify(snapshot),
|
||
credentials: "same-origin",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
"Idempotency-Key": operationId,
|
||
"If-Match": String(stateVersion),
|
||
"X-CSRF-Token": session.csrf_token,
|
||
},
|
||
method: "PUT",
|
||
});
|
||
if (response.status === 401) {
|
||
window.dispatchEvent(new Event("dada:session-invalid"));
|
||
throw new Error("session_invalid");
|
||
}
|
||
if (response.status === 412) {
|
||
const conflict = await response.json() as { latest_state_version: number };
|
||
throw new ProjectStateConflict(conflict.latest_state_version);
|
||
}
|
||
if (!response.ok) throw new Error("project_save_failed");
|
||
const saved = await response.json() as { state_version: number };
|
||
return { stateVersion: saved.state_version };
|
||
},
|
||
});
|
||
queueRef.current = queue;
|
||
saveStatusRef.current = "saved";
|
||
setSaveStatus("saved");
|
||
return () => {
|
||
queue.dispose();
|
||
if (queueRef.current === queue) queueRef.current = undefined;
|
||
};
|
||
}, [project?.created_at, projectId, session?.csrf_token]);
|
||
|
||
useEffect(() => {
|
||
const guardActive = () => ["dirty", "saving", "failed"].includes(saveStatusRef.current);
|
||
const beforeUnload = (event: BeforeUnloadEvent) => {
|
||
if (!guardActive()) return;
|
||
event.preventDefault();
|
||
event.returnValue = "";
|
||
void queueRef.current?.saveNow();
|
||
};
|
||
const interceptNavigation = (event: MouseEvent) => {
|
||
if (!guardActive() || event.defaultPrevented || event.button !== 0) return;
|
||
const target = event.target instanceof Element ? event.target.closest("a[href]") : null;
|
||
if (!(target instanceof HTMLAnchorElement) || target.target || target.download) return;
|
||
const destination = new URL(target.href, window.location.href);
|
||
if (destination.origin !== window.location.origin) return;
|
||
event.preventDefault();
|
||
setLeaveStatus("");
|
||
setPendingNavigation(destination.href);
|
||
};
|
||
window.addEventListener("beforeunload", beforeUnload);
|
||
document.addEventListener("click", interceptNavigation, true);
|
||
return () => {
|
||
window.removeEventListener("beforeunload", beforeUnload);
|
||
document.removeEventListener("click", interceptNavigation, true);
|
||
};
|
||
}, []);
|
||
|
||
function updateName(value: string) {
|
||
if (!project || saveStatus === "conflicted") return;
|
||
setName(value);
|
||
const snapshot: ProjectEditableState = { canvas_state: project.canvas_state, name: value };
|
||
queueRef.current?.commit(snapshot);
|
||
}
|
||
|
||
async function rename(event: FormEvent) {
|
||
event.preventDefault();
|
||
if (!name.trim() || saveStatus === "conflicted") return;
|
||
await queueRef.current?.saveNow();
|
||
}
|
||
|
||
async function exportConflictVersion() {
|
||
if (!project || conflictExportBusy) return;
|
||
setConflictExportBusy(true);
|
||
setConflictNotice("");
|
||
try {
|
||
await conflictExportGuard.current.run(() => downloadConflictPng(project.canvas_state, name));
|
||
setConflictNotice("仅下载本页版本，未写入项目");
|
||
} catch {
|
||
setConflictNotice("本页版本导出失败，未写入项目");
|
||
} finally {
|
||
setConflictExportUsed(conflictExportGuard.current.used);
|
||
setConflictExportBusy(false);
|
||
}
|
||
}
|
||
|
||
async function saveAndLeave() {
|
||
if (!pendingNavigation) return;
|
||
setLeaving(true);
|
||
setLeaveStatus("");
|
||
const saved = await queueRef.current?.saveNow();
|
||
if (saved) window.location.assign(pendingNavigation);
|
||
else setLeaveStatus("保存未完成，仍停留在当前页面");
|
||
setLeaving(false);
|
||
}
|
||
|
||
if (!project && !loadingFailed) return <LoadingPage label="正在读取项目详情" />;
|
||
if (!project) {
|
||
return <main className="product-loading"><p role="alert">项目详情暂时无法读取。</p><a href="/app/projects">返回项目</a></main>;
|
||
}
|
||
const atHistoryLimit = project.successful_image_count >= 10;
|
||
const conflicted = saveStatus === "conflicted";
|
||
const saveLabel = {
|
||
conflicted: "版本冲突",
|
||
dirty: "有未保存修改",
|
||
failed: "未保存",
|
||
saved: "已保存",
|
||
saving: "正在保存",
|
||
}[saveStatus];
|
||
|
||
return (
|
||
<div className="product-page">
|
||
<ProductHeader current="projects" />
|
||
<main className="project-detail-page">
|
||
<header className="project-detail-header">
|
||
<a href="/app/projects" aria-label="返回项目列表">←</a>
|
||
<div><p>{project.status === "failed_empty" ? "FAILED EMPTY" : project.status.toUpperCase()}</p><h1>{project.name}</h1></div>
|
||
<span>固定比例 {project.ratio}</span>
|
||
</header>
|
||
{conflicted && conflictVersions ? (
|
||
<section className="project-conflict" aria-live="assertive">
|
||
<div>
|
||
<p>STATE VERSION CONFLICT</p>
|
||
<h2>版本冲突</h2>
|
||
<span>本页版本 {conflictVersions.page}</span>
|
||
<span>最新版本 {conflictVersions.latest}</span>
|
||
</div>
|
||
<p>此页面已转为只读。可本地导出当前页一次，然后刷新本机后端保存的最新版本。</p>
|
||
<div className="project-conflict-actions">
|
||
<button disabled={conflictExportBusy || conflictExportUsed} onClick={exportConflictVersion} type="button">本地导出本页版本</button>
|
||
<button onClick={() => window.location.reload()} type="button">刷新最新版本</button>
|
||
</div>
|
||
{conflictNotice ? <strong role="status">{conflictNotice}</strong> : null}
|
||
</section>
|
||
) : null}
|
||
<section className="project-identity" aria-labelledby="rename-title">
|
||
<div><h2 id="rename-title">项目名称</h2><p>state version {project.state_version}</p><strong className={`save-status ${saveStatus}`} aria-live={saveStatus === "failed" || conflicted ? "assertive" : "polite"}>{saveLabel}</strong></div>
|
||
<form onSubmit={rename}>
|
||
<input aria-label="项目名称" disabled={conflicted} maxLength={80} onChange={(event) => updateName(event.target.value)} value={name} />
|
||
<button disabled={conflicted || saveStatus === "saving" || !name.trim() || (saveStatus === "saved" && name.trim() === project.name)} type="submit">立即保存</button>
|
||
</form>
|
||
</section>
|
||
<div className="project-detail-grid">
|
||
<section className="project-current" aria-labelledby="current-image-title">
|
||
<header><h2 id="current-image-title">当前底图</h2><span>{project.pixel_width ?? 1080} × {project.pixel_height ?? 1440}</span></header>
|
||
<ProjectPlaceholder ratio={project.ratio} status={project.status} />
|
||
<div className="project-actions">
|
||
<button disabled={conflicted || atHistoryLimit} onClick={() => window.location.assign(`/app?continue=${project.project_id}`)} type="button">继续生成</button>
|
||
{conflicted || !project.current_image_id ? <button disabled type="button">进入编辑器</button> : <a href={`/app/projects/${project.project_id}/editor`}>进入编辑器</a>}
|
||
{conflicted || !project.current_image_id ? <button disabled type="button">下载原始图</button> : <a href={`/api/v1/private-assets/projects/${project.project_id}/images/${project.current_image_id}`}>下载原始图</a>}
|
||
</div>
|
||
{atHistoryLimit ? <p className="project-blocker">请先删除一张非当前底图的历史图</p> : null}
|
||
{project.status === "failed_empty" && !conflicted ? <a className="project-retry" href={`/app?retry=${project.project_id}`}>修改并重试</a> : null}
|
||
</section>
|
||
<section className="project-history" aria-labelledby="history-title">
|
||
<header><h2 id="history-title">生成历史</h2><strong>{project.successful_image_count} / 10 张成功图</strong></header>
|
||
{project.images.length === 0 ? (
|
||
<div className="history-empty"><strong>还没有成功图片</strong><p>{project.draft_prompt}</p></div>
|
||
) : (
|
||
<ol>
|
||
{project.images.toReversed().map((image, index) => (
|
||
<li key={image.image_id} data-current={image.image_id === project.current_image_id}>
|
||
<ProjectPlaceholder ratio={project.ratio} status="active" />
|
||
<div><strong>生成结果 {project.images.length - index}</strong><time dateTime={image.created_at}>{formatUpdatedAt(image.created_at)}</time><a href={`/api/v1/private-assets/projects/${project.project_id}/images/${image.image_id}`}>下载原始图</a></div>
|
||
</li>
|
||
))}
|
||
</ol>
|
||
)}
|
||
</section>
|
||
</div>
|
||
<section aria-labelledby="latest-exports-title" className="project-latest-exports">
|
||
<header><div><p>LOCAL LATEST</p><h2 id="latest-exports-title">最新成品</h2></div><span>同一电脑可重新下载</span></header>
|
||
{project.latest_exports.length === 0 ? (
|
||
<div className="latest-exports-empty">
|
||
<strong>暂无导出成品</strong>
|
||
<div>
|
||
<a href={`/app/projects/${project.project_id}/editor`}>进入编辑并导出</a>
|
||
{project.current_image_id ? <a href={`/api/v1/private-assets/projects/${project.project_id}/images/${project.current_image_id}`}>下载原始生成图</a> : null}
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<ul>
|
||
{project.latest_exports.map((item) => (
|
||
<li key={item.export_id}>
|
||
<div><strong>{item.format.toUpperCase()}</strong><span>{item.pixel_width} × {item.pixel_height}</span></div>
|
||
<time dateTime={item.created_at}>{formatUpdatedAt(item.created_at)}</time>
|
||
<a href={item.download_url}>重新下载</a>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
</section>
|
||
</main>
|
||
{pendingNavigation ? (
|
||
<div className="project-leave-overlay" role="presentation">
|
||
<section aria-labelledby="leave-project-title" aria-modal="true" className="project-leave-dialog" role="dialog">
|
||
<p>UNSAVED PROJECT</p>
|
||
<h2 id="leave-project-title">有未保存修改</h2>
|
||
<span>保存成功后才会离开当前项目。</span>
|
||
<div>
|
||
<button disabled={leaving} onClick={saveAndLeave} type="button">保存并离开</button>
|
||
<button disabled={leaving} onClick={() => window.location.assign(pendingNavigation)} type="button">放弃修改</button>
|
||
<button disabled={leaving} onClick={() => setPendingNavigation(undefined)} type="button">取消</button>
|
||
</div>
|
||
{leaveStatus ? <strong role="alert">{leaveStatus}</strong> : null}
|
||
</section>
|
||
</div>
|
||
) : null}
|
||
<LocalOnlyFooter />
|
||
</div>
|
||
);
|
||
}
|