+
{addOpen ? (
上传文件
-
批量导入图片、视频和音频到当前画布
+
批量导入图片、视频、音频和文本到当前画布
已选 {fileList.length} 项
@@ -67,7 +69,7 @@ export function CanvasUploadModal({ open, onClose, onUpload }: CanvasUploadModal
fileList={fileList}
beforeUpload={(file) => {
if (isCanvasUploadFile(file)) return false;
- message.warning(`“${file.name}”不是支持的图片、视频或音频文件`);
+ message.warning(`“${file.name}”不是支持的图片、视频、音频或 TXT / Markdown 文件`);
return Upload.LIST_IGNORE;
}}
onChange={({ fileList: nextFileList }) => setFileList(nextFileList)}
@@ -86,7 +88,8 @@ export function CanvasUploadModal({ open, onClose, onUpload }: CanvasUploadModal
图片
视频
- MP3 / WAV
+ 音频
+ TXT / Markdown
@@ -148,11 +151,11 @@ function CanvasUploadFilePreview({ file }: { file: UploadFile }) {
}
return (
- {source && isAudioFile(source) ? : }
+ {source && isTextUploadFile(source) ? : source && (source.type.startsWith("audio/") || isAudioFile(source)) ? : }
);
}
function isCanvasUploadFile(file: File) {
- return file.type.startsWith("image/") || file.type.startsWith("video/") || isAudioFile(file);
+ return Boolean(uploadNodeType(file));
}
diff --git a/web/src/components/canvas/infinite-canvas.tsx b/web/src/components/canvas/infinite-canvas.tsx
index 2639dae68..be7d307ee 100644
--- a/web/src/components/canvas/infinite-canvas.tsx
+++ b/web/src/components/canvas/infinite-canvas.tsx
@@ -397,6 +397,7 @@ export function InfiniteCanvas({ containerRef, viewport, appearance, backgroundM
return (
, point?: Position) {
+ if (!point || node.width <= 0 || node.height <= 0) return undefined;
+ const x = Math.max(0, Math.min(1, (point.x - node.position.x) / node.width));
+ const y = Math.max(0, Math.min(1, (point.y - node.position.y) / node.height));
+ if (!Number.isFinite(x) || !Number.isFinite(y)) return undefined;
+ return { rotateX: (0.5 - y) * 10, rotateY: (x - 0.5) * 10, origin: `${x * 100}% ${y * 100}%` };
+}
diff --git a/web/src/lib/canvas/canvas-file-upload.ts b/web/src/lib/canvas/canvas-file-upload.ts
new file mode 100644
index 000000000..096b4b2aa
--- /dev/null
+++ b/web/src/lib/canvas/canvas-file-upload.ts
@@ -0,0 +1,87 @@
+import { fitNodeSize } from "@/lib/canvas/canvas-node-size";
+import { NODE_DEFAULT_SIZE } from "@/constant/canvas";
+import { CanvasNodeType, type CanvasNodeData, type Position } from "@/types/canvas";
+
+export const CANVAS_UPLOAD_ACCEPT = "image/*,video/*,audio/*,.mp3,.wav,text/plain,text/markdown,.txt,.md,.markdown";
+export function isTextUploadFile(file: Pick
) {
+ return /\.(txt|md|markdown)$/i.test(file.name) || file.type === "text/plain" || file.type === "text/markdown";
+}
+export function uploadNodeType(file: Pick) {
+ if (file.type.startsWith("image/")) return CanvasNodeType.Image;
+ if (file.type.startsWith("video/")) return CanvasNodeType.Video;
+ if (file.type.startsWith("audio/") || /\.(mp3|wav)$/i.test(file.name)) return CanvasNodeType.Audio;
+ if (isTextUploadFile(file)) return CanvasNodeType.Text;
+ return null;
+}
+export function uploadPercent(loaded: number, total: number): number | undefined {
+ if (!Number.isFinite(loaded) || !Number.isFinite(total) || total <= 0) return undefined;
+ return Math.round(Math.min(1, Math.max(0, loaded / total)) * 100);
+}
+export function uploadVeilOpacity(percent = 0) {
+ return 1 - Math.min(100, Math.max(0, percent)) / 100 * 0.9;
+}
+
+export async function createFileUploadPlaceholder(id: string, file: File, position: Position) {
+ const type = uploadNodeType(file);
+ if (!type) throw new Error("请选择图片、视频、音频或 TXT / Markdown 文件");
+ if (type === CanvasNodeType.Image) return createImageUploadPlaceholder(id, file, position, await readUploadImageSize(file));
+ const size = type === CanvasNodeType.Video ? fitNodeSize(...await readUploadVideoSize(file)) : NODE_DEFAULT_SIZE[type];
+ return {
+ id, type, title: file.name, ...size,
+ position: { x: position.x - size.width / 2, y: position.y - size.height / 2 },
+ metadata: { fileUpload: "uploading", bytes: file.size, mimeType: file.type },
+ } satisfies CanvasNodeData;
+}
+
+async function readUploadVideoSize(file: File): Promise<[number, number]> {
+ const url = URL.createObjectURL(file);
+ const video = document.createElement("video");
+ try {
+ return await new Promise((resolve, reject) => {
+ const timer = window.setTimeout(() => reject(new Error("视频尺寸读取超时，请确认文件可播放")), 15000);
+ video.onloadedmetadata = () => {
+ window.clearTimeout(timer);
+ if (video.videoWidth && video.videoHeight) resolve([video.videoWidth, video.videoHeight]);
+ else reject(new Error("无法读取视频尺寸"));
+ };
+ video.onerror = () => { window.clearTimeout(timer); reject(new Error("无法读取视频，请确认格式受浏览器支持")); };
+ video.preload = "metadata";
+ video.src = url;
+ });
+ } finally {
+ video.onloadedmetadata = null;
+ video.onerror = null;
+ video.removeAttribute("src");
+ video.load();
+ URL.revokeObjectURL(url);
+ }
+}
+
+// 不使用 readImageMeta 的默认尺寸兜底：上传占位必须来自实际解码尺寸。
+export async function readUploadImageSize(file: File): Promise<{ width: number; height: number }> {
+ const url = URL.createObjectURL(file);
+ const image = new Image();
+ try {
+ image.src = url;
+ await image.decode();
+ if (!image.naturalWidth || !image.naturalHeight) throw new Error("无法读取图片尺寸，请重新选择图片");
+ return { width: image.naturalWidth, height: image.naturalHeight };
+ } finally {
+ URL.revokeObjectURL(url);
+ }
+}
+
+export function createImageUploadPlaceholder(id: string, file: Pick, position: Position, naturalSize: { width: number; height: number }): CanvasNodeData {
+ const size = fitNodeSize(naturalSize.width, naturalSize.height);
+ return {
+ id, type: CanvasNodeType.Image, title: file.name,
+ position: { x: position.x - size.width / 2, y: position.y - size.height / 2 },
+ ...size,
+ metadata: { fileUpload: "uploading", naturalWidth: naturalSize.width, naturalHeight: naturalSize.height, bytes: file.size, mimeType: file.type },
+ };
+}
+
+export function interruptFileUpload(node: CanvasNodeData): CanvasNodeData {
+ if (node.metadata?.fileUpload !== "uploading") return node;
+ return { ...node, metadata: { ...node.metadata, fileUpload: "error", fileUploadProgress: undefined, errorDetails: "上传已中断，请重新选择文件上传" } };
+}
diff --git a/web/src/lib/canvas/canvas-generation-task-sync.ts b/web/src/lib/canvas/canvas-generation-task-sync.ts
index 31f45e94f..f2ef9f2d1 100644
--- a/web/src/lib/canvas/canvas-generation-task-sync.ts
+++ b/web/src/lib/canvas/canvas-generation-task-sync.ts
@@ -15,7 +15,7 @@ import { CanvasNodeType, type CanvasGenerationMode, type CanvasNodeData, type Ca
export function generationTaskInput(task: GenerationTask) {
if (!task.inputJson) return null;
try {
- return JSON.parse(task.inputJson) as { mode?: CanvasGenerationMode; metadata?: { nodeId?: string; sourceNodeId?: string }; prompt?: string };
+ return JSON.parse(task.inputJson) as { mode?: CanvasGenerationMode; metadata?: { nodeId?: string; sourceNodeId?: string; domainProjectId?: string }; prompt?: string };
} catch {
return null;
}
@@ -258,6 +258,9 @@ function applySuccessfulVersionSelection(nodes: CanvasNodeData[], updatedNode: C
export async function syncGenerationTaskToCanvasStore(task: GenerationTask) {
if (task.status !== "succeeded" || !task.projectId) return false;
+ // 短剧任务使用业务项目 ID，不能拿它请求同名的画布项目。
+ const domainProjectId = task.clientContext?.domainProjectId || generationTaskInput(task)?.metadata?.domainProjectId;
+ if (domainProjectId === task.projectId || !generationTaskNodeId(task)) return false;
const { loadCanvasProjectForEditing } = await import("@/services/user-data-sync");
const project = await loadCanvasProjectForEditing(task.projectId);
if (!project) return false;
diff --git a/web/src/lib/canvas/canvas-image-source.ts b/web/src/lib/canvas/canvas-image-source.ts
new file mode 100644
index 000000000..101cae6c9
--- /dev/null
+++ b/web/src/lib/canvas/canvas-image-source.ts
@@ -0,0 +1,30 @@
+import { CanvasNodeType, type CanvasNodeData } from "@/types/canvas";
+
+/** 已有媒体但没有生成配置的图片是输入素材，不提供原地生成入口。 */
+export function isCanvasImageSourceNode(node: CanvasNodeData | null | undefined): boolean {
+ if (node?.type === CanvasNodeType.Image && node.metadata?.fileUpload) return true;
+ return node?.type === CanvasNodeType.Image
+ && Boolean(node.metadata?.content)
+ && !node.metadata?.generationType
+ && !node.metadata?.taskId
+ && !node.metadata?.generationResultPlacement
+ && !node.metadata?.copiedFromNodeId
+ && !node.metadata?.versionOfNodeId;
+}
+
+export function createPortraitTextureNode(source: CanvasNodeData, id: string): CanvasNodeData {
+ return {
+ id,
+ type: CanvasNodeType.Image,
+ title: `${source.title || "图片"} · 人物质感`,
+ position: { x: source.position.x + source.width + 96, y: source.position.y },
+ width: source.width,
+ height: source.height,
+ metadata: {
+ prompt: "@图片1",
+ composerContent: "@图片1",
+ generationType: "edit",
+ portraitTexture: source.metadata?.portraitTexture,
+ },
+ };
+}
diff --git a/web/src/lib/canvas/canvas-project-generation.ts b/web/src/lib/canvas/canvas-project-generation.ts
index 55d6cfeca..3d61ca857 100644
--- a/web/src/lib/canvas/canvas-project-generation.ts
+++ b/web/src/lib/canvas/canvas-project-generation.ts
@@ -11,6 +11,7 @@ import { modelCapabilityConfigFor, workflowFieldCurrentValue, workflowFieldHasSt
import { modelRequestOptions, resolveCompatibleModel, resolveModelGenerationDefaults, resolveVideoOperation, type ModelGenerationDefaults, type ModelRequirements } from "@/lib/model-selection";
import { imageMetadata } from "@/lib/canvas/canvas-generation-task-sync";
import { ensureMediaNodeMinimumSize } from "@/lib/canvas/canvas-node-size";
+import { interruptFileUpload } from "@/lib/canvas/canvas-file-upload";
import { isCanvasWorkflowProvider, resolveCanvasWorkflowProvider } from "@/lib/canvas/canvas-workflow";
import type { CanvasNodeGenerationMode } from "@/components/canvas/canvas-node-prompt-panel";
import { CanvasNodeType, type CanvasAssistantSession, type CanvasConnection, type CanvasImageGenerationType, type CanvasNodeData, type CanvasNodeMetadata, type CanvasVideoEditOperation } from "@/types/canvas";
@@ -552,7 +553,7 @@ export function resetInterruptedGeneration(nodes: CanvasNodeData[]) {
const configHeight = NODE_DEFAULT_SIZE[CanvasNodeType.Config].height;
let changed = false;
const reset = nodes.map((node) => {
- const mediaNode = ensureMediaNodeMinimumSize(node);
+ const mediaNode = ensureMediaNodeMinimumSize(interruptFileUpload(node));
const resizedNode =
mediaNode.type === CanvasNodeType.Config && (mediaNode.width < configWidth || mediaNode.height < configHeight)
? { ...mediaNode, width: Math.max(mediaNode.width, configWidth), height: Math.max(mediaNode.height, configHeight) }
diff --git a/web/src/lib/canvas/canvas-resource-references.ts b/web/src/lib/canvas/canvas-resource-references.ts
index 512c5b11b..bd1e3aa11 100644
--- a/web/src/lib/canvas/canvas-resource-references.ts
+++ b/web/src/lib/canvas/canvas-resource-references.ts
@@ -216,7 +216,7 @@ export function buildCanvasNodeMentionReferenceMap(nodes: CanvasNodeData[], conn
const configTargetId = configTargetBySourceId.get(node.id);
const configInputs = configTargetId ? (resourceInputsByTargetId.get(configTargetId) || []).filter((input) => input.id !== node.id) : [];
const ownInputs = resourceInputsByTargetId.get(node.id) || [];
- const inputs = configInputs.length ? configInputs : ownInputs.length ? ownInputs : isResourceNode(node) ? [node] : [];
+ const inputs = configInputs.length ? configInputs : ownInputs.filter((input) => input.id !== node.id);
referencesByNodeId.set(node.id, labelResourceNodes(inputs, true));
}
return referencesByNodeId;
@@ -231,8 +231,7 @@ export function getMentionResourceNodes(nodeId: string, nodes: CanvasNodeData[],
if (configInputs.length) return configInputs;
const ownInputs = getContextResourceNodes(nodeId, nodes, connections);
if (ownInputs.length) return ownInputs;
- const node = nodes.find((item) => item.id === nodeId);
- return node && isResourceNode(node) ? [node] : [];
+ return [];
}
export function getGenerationResourceNodes(nodeId: string, nodes: CanvasNodeData[], connections: CanvasConnection[]) {
diff --git a/web/src/lib/canvas/canvas-video-hover-preview.ts b/web/src/lib/canvas/canvas-video-hover-preview.ts
new file mode 100644
index 000000000..880a89165
--- /dev/null
+++ b/web/src/lib/canvas/canvas-video-hover-preview.ts
@@ -0,0 +1,93 @@
+// Only the hovered node owns a decoder; pending hover work shares the same lease.
+let stopCurrentPreview: (() => void) | undefined;
+export const VIDEO_HOVER_DELAY_MS = 350;
+export const VIDEO_HOVER_PREVIEW_MS = 3000;
+
+export function bindCanvasVideoHoverPreview(element: HTMLElement, resolveSource: () => Promise) {
+ let stop: (() => void) | undefined;
+ const enter = (event: PointerEvent) => {
+ if (event.pointerType !== "mouse" || event.buttons || document.hidden
+ || window.matchMedia("(prefers-reduced-motion: reduce)").matches
+ || element.closest('[data-canvas-viewport-interacting="true"]')) return;
+ stopCurrentPreview?.();
+ let disposed = false;
+ let video: HTMLVideoElement | undefined;
+ let playbackTimer: ReturnType | undefined;
+ const listeners = new AbortController();
+ const viewport = element.closest("[data-canvas-viewport]");
+ const visibility = new IntersectionObserver((entries) => {
+ if (entries.some((entry) => !entry.isIntersecting)) cancel();
+ });
+ const observer = new MutationObserver(() => {
+ if (viewport?.getAttribute("data-canvas-viewport-interacting") === "true") cancel();
+ });
+ const cancel = () => {
+ if (disposed) return;
+ disposed = true;
+ clearTimeout(delay);
+ clearTimeout(deadline);
+ clearTimeout(playbackTimer);
+ listeners.abort();
+ observer.disconnect();
+ visibility.disconnect();
+ if (video) {
+ video.pause();
+ video.removeAttribute("src");
+ video.load();
+ video.remove();
+ }
+ if (stopCurrentPreview === cancel) stopCurrentPreview = undefined;
+ if (stop === cancel) stop = undefined;
+ };
+ const delay = setTimeout(() => {
+ // Explicit playback wins over an incidental hover.
+ if (Array.from(document.querySelectorAll("video, audio")).some((media) => !(media as HTMLMediaElement).paused)) {
+ cancel();
+ return;
+ }
+ void resolveSource().then((src) => {
+ if (disposed) return;
+ if (!src || !element.isConnected || document.hidden) { cancel(); return; }
+ video = document.createElement("video");
+ video.muted = true;
+ video.playsInline = true;
+ video.preload = "metadata";
+ video.className = "pointer-events-none absolute inset-0 size-full rounded-[var(--node-radius)] bg-black object-contain";
+ video.setAttribute("aria-hidden", "true");
+ video.dataset.canvasHoverPreview = "true";
+ video.addEventListener("ended", cancel, { signal: listeners.signal });
+ video.addEventListener("error", cancel, { signal: listeners.signal });
+ video.addEventListener("timeupdate", () => {
+ if (video && video.currentTime >= VIDEO_HOVER_PREVIEW_MS / 1000) cancel();
+ }, { signal: listeners.signal });
+ video.addEventListener("playing", () => {
+ if (!playbackTimer) playbackTimer = setTimeout(cancel, VIDEO_HOVER_PREVIEW_MS);
+ }, { signal: listeners.signal });
+ video.src = src;
+ element.appendChild(video);
+ void video.play().catch(cancel);
+ }).catch(cancel);
+ }, VIDEO_HOVER_DELAY_MS);
+ // Bound stalled network/decoder sessions as well as actual playback.
+ const deadline = setTimeout(cancel, 8000);
+ stop = cancel;
+ stopCurrentPreview = cancel;
+ visibility.observe(element);
+ if (viewport) observer.observe(viewport, { attributes: true, attributeFilter: ["data-canvas-viewport-interacting"] });
+ for (const type of ["pointerdown", "wheel", "keydown", "blur"] as const) {
+ window.addEventListener(type, cancel, { capture: true, passive: true, signal: listeners.signal });
+ }
+ document.addEventListener("visibilitychange", cancel, { signal: listeners.signal });
+ document.addEventListener("play", (event) => { if (event.target !== video) cancel(); }, { capture: true, signal: listeners.signal });
+ };
+ const leave = () => stop?.();
+ element.addEventListener("pointerenter", enter);
+ element.addEventListener("pointerleave", leave);
+ element.addEventListener("pointercancel", leave);
+ return () => {
+ leave();
+ element.removeEventListener("pointerenter", enter);
+ element.removeEventListener("pointerleave", leave);
+ element.removeEventListener("pointercancel", leave);
+ };
+}
diff --git a/web/src/lib/canvas/chapter-asset-breakdown.ts b/web/src/lib/canvas/chapter-asset-breakdown.ts
new file mode 100644
index 000000000..f95292bc8
--- /dev/null
+++ b/web/src/lib/canvas/chapter-asset-breakdown.ts
@@ -0,0 +1,27 @@
+import { extractCharacterBreakdownJson, parseCharacterBreakdown, type CharacterBreakdown } from "./canvas-character-reference";
+
+export type ChapterAssetDefinition = { name: string; description: string; prompt: string };
+export type ChapterAssetBreakdown = { characters: CharacterBreakdown[]; scenes: ChapterAssetDefinition[]; props: ChapterAssetDefinition[] };
+
+export function parseChapterAssetBreakdown(raw: string): ChapterAssetBreakdown {
+ const text = raw.trim().replace(/^```(?:json)?\s*/i, "").replace(/\s*```$/i, "");
+ const value: unknown = extractCharacterBreakdownJson(text, true);
+ if (!value || typeof value !== "object" || Array.isArray(value)) throw new Error("章节资产结果必须是 JSON 对象");
+ const payload = value as Record;
+ if (!Array.isArray(payload.characters) || !Array.isArray(payload.scenes) || !Array.isArray(payload.props)) {
+ throw new Error("章节资产结果缺少角色、场景或道具数组，请重新提取");
+ }
+ const parseAssets = (items: unknown[], label: string): ChapterAssetDefinition[] => items.map((item) => {
+ if (!item || typeof item !== "object" || Array.isArray(item)) throw new Error(`${label}资产格式无效`);
+ const asset = item as Record;
+ for (const key of ["name", "description", "prompt"]) {
+ if (typeof asset[key] !== "string" || !asset[key].trim()) throw new Error(`${label}资产缺少有效的 ${key}`);
+ }
+ return { name: (asset.name as string).trim(), description: (asset.description as string).trim(), prompt: (asset.prompt as string).trim() };
+ });
+ return {
+ characters: payload.characters.length ? parseCharacterBreakdown(JSON.stringify({ characters: payload.characters })) : [],
+ scenes: parseAssets(payload.scenes, "场景"),
+ props: parseAssets(payload.props, "道具"),
+ };
+}
diff --git a/web/src/lib/canvas/tool-registry/definitions/node-hover-tools.tsx b/web/src/lib/canvas/tool-registry/definitions/node-hover-tools.tsx
index 0b3f81fb2..3c29b3ceb 100644
--- a/web/src/lib/canvas/tool-registry/definitions/node-hover-tools.tsx
+++ b/web/src/lib/canvas/tool-registry/definitions/node-hover-tools.tsx
@@ -3,6 +3,7 @@ import { AudioLines, Captions, Clapperboard, Download, FolderPlus, Images, Image
import { CONTENT_MODERATION_ERROR_CODE, isContentModerationError } from "@/lib/generation-error";
import { registerToolbarTools, type ToolContext, type ToolDefinition } from "@/lib/canvas/tool-registry";
import { CanvasNodeType } from "@/types/canvas";
+import { isCanvasImageSourceNode } from "@/lib/canvas/canvas-image-source";
// 节点状态判定辅助函数——从 ToolContext 派生
function isImage(ctx: ToolContext) { return ctx.node?.type === CanvasNodeType.Image; }
@@ -15,10 +16,11 @@ function hasVideo(ctx: ToolContext) { return isVideo(ctx) && Boolean(ctx.nodeMet
function hasAudio(ctx: ToolContext) { return isAudio(ctx) && Boolean(ctx.nodeMetadata?.content); }
function isCharacterReference(ctx: ToolContext) { return isText(ctx) && ctx.nodeMetadata?.workflowKind === "character" && Boolean(ctx.nodeMetadata?.characterAssetId); }
function isEditableText(ctx: ToolContext) { return isText(ctx) && !isCharacterReference(ctx); }
-function canOpenDialog(ctx: ToolContext) { return isEditableText(ctx) || isImage(ctx) || isVideo(ctx); }
+function canOpenDialog(ctx: ToolContext) { return isEditableText(ctx) || (isImage(ctx) && !isCanvasImageSourceNode(ctx.node)) || isVideo(ctx); }
function simpleMode(ctx: ToolContext) { return ctx.workspaceMode === "simple"; }
function isImageBatchRoot(ctx: ToolContext) { return isImage(ctx) && Boolean(ctx.nodeMetadata?.isBatchRoot && ctx.nodeMetadata.batchChildIds?.length); }
function canRetry(ctx: ToolContext) {
+ if (ctx.nodeMetadata?.fileUpload) return false;
const requiresPromptChange = ctx.nodeMetadata?.generationErrorCode === CONTENT_MODERATION_ERROR_CODE || isContentModerationError(ctx.nodeMetadata?.errorDetails);
const batchHasFailures = isImageBatchRoot(ctx) && (ctx.nodeMetadata?.batchFailedCount || (ctx.nodeMetadata?.status === "error" ? 1 : 0)) > 0;
return (ctx.nodeMetadata?.status === "error" || (batchHasFailures && ctx.nodeMetadata?.status !== "loading")) && !requiresPromptChange;
diff --git a/web/src/pages/admin/logs/logs-page.tsx b/web/src/pages/admin/logs/logs-page.tsx
index 897a58723..ce32906e9 100644
--- a/web/src/pages/admin/logs/logs-page.tsx
+++ b/web/src/pages/admin/logs/logs-page.tsx
@@ -20,6 +20,7 @@ export default function LogsPage() {
const [searchParams, setSearchParams] = useSearchParams();
const keyword = searchParams.get("filter") || "";
const status = normalizeStatus(searchParams.get("status"));
+ const recordType = searchParams.get("recordType") === "download" ? "download" : searchParams.get("recordType") === "all" ? "all" : "request";
const page = positiveInt(searchParams.get("page"), 1);
const pageSize = normalizePageSize(searchParams.get("pageSize"));
const debouncedKeyword = useDebouncedValue(keyword);
@@ -30,7 +31,7 @@ export default function LogsPage() {
const [detailLogId, setDetailLogId] = useState(null);
const [mediaPreview, setMediaPreview] = useState<{ url: string; kind: "image" | "video"; title: string } | null>(null);
const requestSequence = useRef(0);
- const hasFilters = Boolean(keyword || status !== "all");
+ const hasFilters = Boolean(keyword || status !== "all" || recordType !== "request");
const updateUrl = (patch: Record, replace = false) => {
const next = new URLSearchParams(searchParams);
@@ -45,7 +46,7 @@ export default function LogsPage() {
useEffect(() => {
const sequence = ++requestSequence.current;
setLoading(true);
- void listAdminApiLogs({ keyword: debouncedKeyword || undefined, status: status === "all" ? undefined : status, page, limit: pageSize })
+ void listAdminApiLogs({ recordType, keyword: debouncedKeyword || undefined, status: status === "all" ? undefined : status, page, limit: pageSize })
.then((result) => {
if (sequence !== requestSequence.current) return;
setLogs(result.logs);
@@ -55,7 +56,7 @@ export default function LogsPage() {
})
.catch((error) => sequence === requestSequence.current && message.error(error instanceof Error ? error.message : "读取请求明细失败"))
.finally(() => sequence === requestSequence.current && setLoading(false));
- }, [debouncedKeyword, status, page, pageSize]);
+ }, [debouncedKeyword, status, recordType, page, pageSize]);
const columns: ColumnsType = [
{ title: "时间", width: 168, render: (_, log) => formatTime(log.startedAt || log.createdAt) },
@@ -129,7 +130,7 @@ export default function LogsPage() {
description="模型生成、状态查询与结果下载；仅计费调用扣除积分"
actions={
exportAdminApiLogs({ keyword: debouncedKeyword || undefined, status: status === "all" ? undefined : status })}
+ exportFile={() => exportAdminApiLogs({ recordType, keyword: debouncedKeyword || undefined, status: status === "all" ? undefined : status })}
fileName={() => `请求明细-${new Date().toISOString().slice(0, 10)}.csv`}
label="导出当前筛选"
successMessage="已按当前筛选导出请求明细"
@@ -155,6 +156,8 @@ export default function LogsPage() {
}
toolbarFilters={
+ <>
+
-
{progress}%
+
处理步骤 {status.step}/{status.total}
);
}
diff --git a/web/src/pages/canvas/canvas-project-world-layers.tsx b/web/src/pages/canvas/canvas-project-world-layers.tsx
index 9c47691c6..d023b11f4 100644
--- a/web/src/pages/canvas/canvas-project-world-layers.tsx
+++ b/web/src/pages/canvas/canvas-project-world-layers.tsx
@@ -4,6 +4,7 @@ import { Link2 } from "lucide-react";
import { ConnectionPath } from "@/components/canvas/canvas-connections";
import { CanvasFrameNode } from "@/components/canvas/canvas-frame-node";
import { CanvasNode } from "@/components/canvas/canvas-node";
+import type { CanvasConnectionApproach } from "@/lib/canvas/canvas-connection-tilt";
import type { CanvasBatchConnectionPreview } from "@/lib/canvas/canvas-batch-connection";
import { sortCanvasNodesByStackOrder, type CanvasNodeStackOrder } from "@/lib/canvas/canvas-node-stack-order";
import type { CanvasResourceReference } from "@/lib/canvas/canvas-resource-references";
@@ -24,6 +25,7 @@ type CanvasProjectWorldLayersProps = {
connectingParams: ConnectionHandle | null;
mouseWorld: Position;
connectionTargetNodeId: string | null;
+ connectionApproach: CanvasConnectionApproach;
nodeById: Map
;
visibleNodes: CanvasNodeData[];
nodeStackOrder: CanvasNodeStackOrder;
@@ -159,6 +161,7 @@ export const CanvasProjectWorldLayers = memo(function CanvasProjectWorldLayers(p
isRelated={props.relatedNodeIds.has(node.id)}
isFocusRelated={props.activeNodeId === node.id}
isConnectionTarget={props.connectionTargetNodeId === node.id || props.batchConnectionPreview?.targetNodeId === node.id}
+ connectionApproach={props.connectionApproach?.nodeId === node.id ? props.connectionApproach.point : undefined}
forceInputVisible={Boolean(props.batchConnectionPreview)}
batchCount={props.batchChildCountById.get(node.id) || 0}
batchExpanded={Boolean(node.metadata?.imageBatchExpanded)}
diff --git a/web/src/pages/canvas/project.tsx b/web/src/pages/canvas/project.tsx
index 490b71585..8a17176ae 100644
--- a/web/src/pages/canvas/project.tsx
+++ b/web/src/pages/canvas/project.tsx
@@ -12,6 +12,7 @@ import { getActiveUserScope } from "@/lib/user-scope";
import { resourceFileUrl, resourceIdFromStorageKey, syncResourceToArkPrivateAsset } from "@/services/api/resources";
import { uploadImage } from "@/services/image-storage";
import { imageMetadata } from "@/lib/canvas/canvas-generation-task-sync";
+import { isCanvasImageSourceNode } from "@/lib/canvas/canvas-image-source";
import copyToClipboard from "copy-to-clipboard";
import { nanoid } from "nanoid";
import { canvasAppearanceBaseTheme, canvasAppearanceForTheme, DEFAULT_CANVAS_BACKGROUND_MODE, normalizeCanvasAppearance, resolveCanvasAppearance, writeCanvasAppearanceDefault, type CanvasAppearance } from "@/lib/canvas/canvas-appearance";
@@ -983,6 +984,7 @@ function InfiniteCanvasPage() {
closeConnectionCreateMenu,
connectionTargetAnchorRatio,
connectionTargetNodeId,
+ connectionApproach,
connectingParams,
createConnectedNode,
getConnectionCreateDisabledReason,
@@ -1460,6 +1462,7 @@ function InfiniteCanvasPage() {
updateNodeFromContent(nodeId, (node) => ({ ...node, metadata: { ...node.metadata, ...patch } }));
}, [updateNodeFromContent]);
const canvasNodeActions = useMemo(() => ({
+ upload: replaceCanvasNodeMedia,
download: downloadNodeImage,
duplicate: duplicateNodeFromContent,
deleteNode: deleteNodeFromContent,
@@ -1468,7 +1471,7 @@ function InfiniteCanvasPage() {
updateMediaNode: updateMediaNodeFromContent,
openPortraitClearance,
openArtCritique,
- }), [deleteNodeFromContent, downloadNodeImage, duplicateNodeFromContent, openArtCritique, openPortraitClearance, updateMediaNodeFromContent, updateNodeFromContent, updateNodeMetadataFromContent]);
+ }), [deleteNodeFromContent, downloadNodeImage, duplicateNodeFromContent, openArtCritique, openPortraitClearance, replaceCanvasNodeMedia, updateMediaNodeFromContent, updateNodeFromContent, updateNodeMetadataFromContent]);
const { agentSnapshot, agentUndoCount, applyAgentOps, canUndoAgentOps, dismissLastAgentChange, lastAgentChange, undoAgentOps, viewLastAgentChange } = useCanvasAgentOperations({
projectId,
domainProjectId: currentProject?.projectId,
@@ -2295,6 +2298,7 @@ function InfiniteCanvasPage() {
) : null}
- {dialogNode && dialogNode.type !== CanvasNodeType.Script && dialogNode.type !== CanvasNodeType.Drawing && !selectionBox && !isCanvasNodeMoving ? (
+ {dialogNode && !isCanvasImageSourceNode(dialogNode) && !dialogNode.metadata?.fileUpload && dialogNode.type !== CanvasNodeType.Script && dialogNode.type !== CanvasNodeType.Drawing && !selectionBox && !isCanvasNodeMoving ? (
state.runtimeStatuses);
const [connectingParams, setConnectingParams] = useState(null);
const [connectionTargetNodeId, setConnectionTargetNodeId] = useState(null);
+ const [connectionApproach, setConnectionApproach] = useState(null);
const [connectionTargetAnchorRatio, setConnectionTargetAnchorRatio] = useState();
const [pendingConnectionCreate, setPendingConnectionCreate] = useState(null);
const [batchConnectionPreview, setBatchConnectionPreview] = useState(null);
@@ -108,6 +110,7 @@ export function useCanvasConnectionController({
const updateBatchConnectionPreview = useCallback((next: CanvasBatchConnectionPreview | null) => {
batchConnectionPreviewRef.current = next;
setBatchConnectionPreview(next);
+ setConnectionApproach((previous) => latchCanvasConnectionApproach(previous, next && next.status !== "invalid" ? next.targetNodeId : null, next?.mouseWorld || { x: 0, y: 0 }));
}, []);
const clearBatchConnection = useCallback(() => {
@@ -120,6 +123,7 @@ export function useCanvasConnectionController({
connectingParamsRef.current = next;
setConnectingParams(next);
if (!next) {
+ setConnectionApproach(null);
connectingPointerIdRef.current = null;
connectingPointerStartRef.current = null;
setConnectionTargetNodeId(null);
@@ -596,9 +600,11 @@ export function useCanvasConnectionController({
const current = connectingParamsRef.current;
if (!current || connectingPointerIdRef.current !== event.pointerId || pendingConnectionCreateRef.current) return;
const dropTarget = getConnectionDropTarget(event.clientX, event.clientY, current);
+ const point = screenToCanvas(event.clientX, event.clientY);
+ setConnectionApproach((previous) => latchCanvasConnectionApproach(previous, dropTarget.nodeId, point));
setConnectionTargetNodeId(dropTarget.nodeId);
setConnectionTargetAnchorRatio(dropTarget.anchorRatio);
- setMouseWorld(screenToCanvas(event.clientX, event.clientY));
+ setMouseWorld(point);
};
const handlePointerMove = (event: PointerEvent) => {
// Pointer events can arrive faster than the canvas can paint. Keep
@@ -677,6 +683,7 @@ export function useCanvasConnectionController({
cancelPendingConnectionCreate,
closeConnectionCreateMenu,
connectionTargetNodeId,
+ connectionApproach,
connectionTargetAnchorRatio,
connectingParams,
createConnectedNode,
diff --git a/web/src/pages/canvas/use-canvas-media-tools.ts b/web/src/pages/canvas/use-canvas-media-tools.ts
index 506383879..da4e34b5e 100644
--- a/web/src/pages/canvas/use-canvas-media-tools.ts
+++ b/web/src/pages/canvas/use-canvas-media-tools.ts
@@ -26,6 +26,7 @@ import {
import { fitNodeSize, VIDEO_NODE_MAX_SIZE } from "@/lib/canvas/canvas-node-size";
import { compositeEmotionImage, emotionGenerationSize, emotionProviderMask, normalizeEmotionPromptForProvider, resolveEmotionEditPlan } from "@/lib/canvas/canvas-emotion";
import { DEFAULT_PORTRAIT_TEXTURE_SETTINGS } from "@/lib/canvas/canvas-portrait-texture";
+import { createPortraitTextureNode } from "@/lib/canvas/canvas-image-source";
import { captureVideoFrames } from "@/lib/canvas/canvas-video-frame";
import { buildVideoFrameNodes } from "@/lib/canvas/canvas-video-frame-nodes";
import { mergeVideos, type MergeVideoProgress } from "@/lib/canvas/canvas-video-merge";
@@ -182,14 +183,16 @@ export function useCanvasMediaTools({
return;
}
const portraitTextureSettings = { ...DEFAULT_PORTRAIT_TEXTURE_SETTINGS, ...node.metadata?.portraitTexture };
- const composerContent = node.metadata?.composerContent?.trim() || node.metadata?.prompt?.trim() || "@图片1";
+ const child = createPortraitTextureNode(node, nanoid());
+ child.metadata = { ...child.metadata, portraitTexture: portraitTextureSettings };
setHoveredNodeId(null);
setToolbarNodeId(null);
- setNodes((current) => current.map((item) => item.id === node.id ? { ...item, metadata: { ...item.metadata, prompt: composerContent, composerContent, portraitTexture: portraitTextureSettings } } : item));
- setSelectedNodeIds(new Set([node.id]));
+ setNodes((current) => [...current, child]);
+ setConnections((current) => [...current, { id: nanoid(), fromNodeId: node.id, toNodeId: child.id }]);
+ setSelectedNodeIds(new Set([child.id]));
setSelectedConnectionId(null);
- setDialogNodeId(node.id);
- }, [message, setDialogNodeId, setHoveredNodeId, setNodes, setSelectedConnectionId, setSelectedNodeIds, setToolbarNodeId]);
+ setDialogNodeId(child.id);
+ }, [message, setConnections, setDialogNodeId, setHoveredNodeId, setNodes, setSelectedConnectionId, setSelectedNodeIds, setToolbarNodeId]);
const cropImageNode = useCallback(async (node: CanvasNodeData, crop: CanvasImageCropRect) => {
if (!node.metadata?.content) return;
diff --git a/web/src/pages/canvas/use-canvas-upload.ts b/web/src/pages/canvas/use-canvas-upload.ts
index f87797a52..780a07c84 100644
--- a/web/src/pages/canvas/use-canvas-upload.ts
+++ b/web/src/pages/canvas/use-canvas-upload.ts
@@ -11,6 +11,8 @@ import { audioMetadata, imageMetadata, videoMetadata } from "@/lib/canvas/canvas
import { createCanvasNode } from "@/lib/canvas/canvas-project-domain";
import { isAudioFile } from "@/lib/canvas/canvas-project-generation";
import { fitNodeSize, VIDEO_NODE_MAX_SIZE } from "@/lib/canvas/canvas-node-size";
+import { CANVAS_UPLOAD_ACCEPT, createFileUploadPlaceholder, uploadNodeType, uploadPercent } from "@/lib/canvas/canvas-file-upload";
+import { resourceIdFromStorageKey, resourceStorageKey, uploadResourceFile } from "@/services/api/resources";
import { uploadMediaFile } from "@/services/file-storage";
import { resolveImageUrl, uploadImage } from "@/services/image-storage";
import { getProjectUnit } from "@/services/api/projects";
@@ -141,36 +143,83 @@ export function useCanvasUpload({
return result.assetId;
}, [canvasId, domainProjectId, queryClient]);
- const createImageFileNode = useCallback(async (file: File, position: Position) => {
- const progress = startUploadStatus("上传图片", "读取图片文件", domainProjectId ? 4 : 3);
+ const activeUploadsRef = useRef(new Set());
+ const createFileNode = useCallback(async (file: File, position: Position, replaceId?: string) => {
+ const original = replaceId ? nodesRef.current.find((node) => node.id === replaceId) : undefined;
+ if (replaceId && (!original || activeUploadsRef.current.has(replaceId))) return null;
+ const id = replaceId || `upload-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+ activeUploadsRef.current.add(id);
+ const progress = startUploadStatus(replaceId ? "替换文件" : "上传文件", "读取文件信息", domainProjectId ? 4 : 3);
try {
- progress.update("上传到服务器并同步资源", 2);
- const image = await uploadImage(file);
- progress.update("更新画布节点", 3);
- const size = fitNodeSize(image.width, image.height);
- const id = `image-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
- const node: CanvasNodeData = {
- id,
- type: CanvasNodeType.Image,
- title: file.name,
- position: { x: position.x - size.width / 2, y: position.y - size.height / 2 },
- width: size.width,
- height: size.height,
- metadata: imageMetadata(image),
+ const placeholder = await createFileUploadPlaceholder(id, file, position);
+ setNodes((current) => replaceId ? current.map((item) => item.id === id ? {
+ ...item, width: placeholder.width, height: placeholder.height,
+ metadata: { ...item.metadata, fileUpload: "uploading", fileUploadProgress: undefined, status: undefined, size: undefined, errorDetails: undefined },
+ } : item) : [...current, placeholder]);
+ selectInsertedNode(id, "close");
+ let lastPercent: number | undefined;
+ const onProgress = (loaded: number, total: number) => {
+ const percent = uploadPercent(loaded, total);
+ if (percent === undefined || percent === lastPercent) return;
+ lastPercent = percent;
+ setNodes((current) => current.map((item) => item.id === id ? { ...item, metadata: { ...item.metadata, fileUploadProgress: percent } } : item));
+ progress.update(percent === 100 ? "文件已传输，正在保存与处理" : `已上传 ${percent}%`, 2);
};
- setNodes((current) => [...current, node]);
- selectInsertedNode(id, "open");
+ progress.update("上传文件并同步资源", 2);
+ let metadata: CanvasNodeData["metadata"];
+ if (placeholder.type === CanvasNodeType.Image) {
+ metadata = imageMetadata(await uploadImage(file, onProgress));
+ } else if (placeholder.type === CanvasNodeType.Text) {
+ const content = await file.text();
+ const resource = await uploadResourceFile(file, "file", { fileName: file.name }, onProgress);
+ metadata = { content, prompt: content, storageKey: resourceStorageKey(resource.id), mimeType: file.type || "text/plain", bytes: file.size, status: "success" };
+ } else {
+ const media = await uploadMediaFile(file, placeholder.type === CanvasNodeType.Video ? "video" : "audio", onProgress);
+ metadata = placeholder.type === CanvasNodeType.Video ? videoMetadata(media) : audioMetadata(media);
+ }
+ progress.update("更新画布节点", 3);
+ const currentNode = nodesRef.current.find((item) => item.id === id);
+ if (!currentNode) {
+ progress.done("上传完成，画布占位已移除");
+ return null;
+ }
+ const node: CanvasNodeData = {
+ ...currentNode, type: placeholder.type,
+ metadata: {
+ ...currentNode.metadata, ...metadata,
+ fileUpload: undefined, fileUploadProgress: undefined, errorDetails: undefined,
+ ...(replaceId ? {
+ assetId: undefined, taskId: undefined, freeResize: false,
+ isBatchRoot: undefined, batchRootId: undefined, batchChildIds: undefined,
+ batchFailedCount: undefined, batchUsesReferenceImages: undefined,
+ generationType: undefined, generationResultPlacement: undefined,
+ copiedFromNodeId: undefined, versionOfNodeId: undefined,
+ model: undefined, size: undefined, quality: undefined,
+ transparentBackground: undefined, count: undefined, references: undefined,
+ primaryImageId: undefined, imageBatchExpanded: undefined,
+ richText: undefined, composerContent: undefined,
+ } : {}),
+ },
+ };
+ setNodes((current) => current.map((item) => item.id === id ? { ...item, type: node.type, metadata: node.metadata } : item));
if (domainProjectId) progress.update("写入项目资产", 4);
const persisted = await persistMediaNode(node);
- progress.done(persisted ? "图片已添加到画布" : "图片已添加，项目资产待重试");
+ const localOnly = metadata.storageKey && !resourceIdFromStorageKey(metadata.storageKey);
+ progress.done(localOnly ? "已保存在本机，尚未上传到服务器" : persisted ? "文件已添加到画布" : "文件已添加，项目资产待重试");
+ if (localOnly) message.warning("文件已保存在本机，尚未上传到服务器");
return id;
} catch (error) {
- const details = error instanceof Error ? error.message : "图片上传失败";
+ const details = error instanceof Error ? error.message : "文件上传失败";
+ setNodes((current) => current.map((item) => item.id !== id ? item : original?.metadata?.content ? {
+ ...item, width: original.width, height: original.height, metadata: original.metadata,
+ } : { ...item, metadata: { ...item.metadata, fileUpload: "error", fileUploadProgress: undefined, errorDetails: details } }));
progress.fail(details);
message.error(details);
return null;
+ } finally {
+ activeUploadsRef.current.delete(id);
}
- }, [domainProjectId, message, persistMediaNode, selectInsertedNode, setNodes, startUploadStatus]);
+ }, [domainProjectId, message, nodesRef, persistMediaNode, selectInsertedNode, setNodes, startUploadStatus]);
const createImageAssetNode = useCallback(async (asset: ImageAsset, position?: Position) => {
try {
@@ -209,52 +258,6 @@ export function useCanvasUpload({
}
}, [getCanvasCenter, message, selectInsertedNode, setNodes]);
- const createVideoFileNode = useCallback(async (file: File, position: Position) => {
- const progress = startUploadStatus("上传视频", "读取视频文件", domainProjectId ? 4 : 3);
- try {
- progress.update("上传到服务器并同步资源", 2);
- const video = await uploadMediaFile(file, "video");
- progress.update("更新画布节点", 3);
- const size = fitNodeSize(video.width || 1280, video.height || 720, VIDEO_NODE_MAX_SIZE.width, VIDEO_NODE_MAX_SIZE.height);
- const id = `video-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
- const node = { id, type: CanvasNodeType.Video, title: file.name, position: { x: position.x - size.width / 2, y: position.y - size.height / 2 }, width: size.width, height: size.height, metadata: videoMetadata(video) } satisfies CanvasNodeData;
- setNodes((current) => [...current, node]);
- selectInsertedNode(id, "open");
- if (domainProjectId) progress.update("写入项目资产", 4);
- const persisted = await persistMediaNode(node);
- progress.done(persisted ? "视频已添加到画布" : "视频已添加，项目资产待重试");
- return id;
- } catch (error) {
- const details = error instanceof Error ? error.message : "视频上传失败";
- progress.fail(details);
- message.error(details);
- return null;
- }
- }, [domainProjectId, message, persistMediaNode, selectInsertedNode, setNodes, startUploadStatus]);
-
- const createAudioFileNode = useCallback(async (file: File, position: Position) => {
- const progress = startUploadStatus("上传音频", "读取音频文件", domainProjectId ? 4 : 3);
- try {
- progress.update("上传到服务器并同步资源", 2);
- const audio = await uploadMediaFile(file, "audio");
- progress.update("更新画布节点", 3);
- const size = NODE_DEFAULT_SIZE[CanvasNodeType.Audio];
- const id = `audio-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
- const node = { id, type: CanvasNodeType.Audio, title: file.name, position: { x: position.x - size.width / 2, y: position.y - size.height / 2 }, width: size.width, height: size.height, metadata: audioMetadata(audio) } satisfies CanvasNodeData;
- setNodes((current) => [...current, node]);
- selectInsertedNode(id, "preserve");
- if (domainProjectId) progress.update("写入项目资产", 4);
- const persisted = await persistMediaNode(node);
- progress.done(persisted ? "音频已添加到画布" : "音频已添加，项目资产待重试");
- return id;
- } catch (error) {
- const details = error instanceof Error ? error.message : "音频上传失败";
- progress.fail(details);
- message.error(details);
- return null;
- }
- }, [domainProjectId, message, persistMediaNode, selectInsertedNode, setNodes, startUploadStatus]);
-
const createTextNodeFromClipboard = useCallback((text: string, position?: Position) => {
const trimmed = text.trim();
if (!trimmed) return false;
@@ -312,8 +315,8 @@ export function useCanvasUpload({
: target?.type === CanvasNodeType.Video
? "video/*"
: target?.type === CanvasNodeType.Audio
- ? "audio/mpeg,audio/wav,audio/x-wav,.mp3,.wav"
- : "image/*,video/*,audio/mpeg,audio/wav,audio/x-wav,.mp3,.wav";
+ ? "audio/*,.mp3,.wav"
+ : target?.type === CanvasNodeType.Text ? "text/plain,text/markdown,.txt,.md,.markdown" : CANVAS_UPLOAD_ACCEPT;
}
imageInputRef.current?.click();
}, [nodesRef]);
@@ -324,9 +327,9 @@ export function useCanvasUpload({
}, []);
const handleUploadFiles = useCallback(async (files: File[]) => {
- const supportedFiles = files.filter((file) => file.type.startsWith("image/") || file.type.startsWith("video/") || isAudioFile(file));
+ const supportedFiles = files.filter((file) => uploadNodeType(file));
if (!supportedFiles.length) {
- message.warning("请选择图片、视频、MP3 或 WAV 文件");
+ message.warning("请选择图片、视频、音频或 TXT / Markdown 文件");
return false;
}
const center = uploadTargetRef.current?.position || getCanvasCenter();
@@ -339,11 +342,7 @@ export function useCanvasUpload({
x: originX + (index % columns) * BATCH_UPLOAD_COLUMN_GAP,
y: center.y + Math.floor(index / columns) * BATCH_UPLOAD_ROW_GAP,
};
- const createdId = await (isAudioFile(file)
- ? createAudioFileNode(file, position)
- : file.type.startsWith("video/")
- ? createVideoFileNode(file, position)
- : createImageFileNode(file, position));
+ const createdId = await createFileNode(file, position);
if (createdId) createdIds.push(createdId);
}
if (!createdIds.length) return false;
@@ -354,7 +353,7 @@ export function useCanvasUpload({
if (failedCount) message.warning(`已添加 ${createdIds.length} 个文件，${failedCount} 个上传失败`);
else message.success(`已添加 ${createdIds.length} 个文件到画布`);
return true;
- }, [createAudioFileNode, createImageFileNode, createVideoFileNode, getCanvasCenter, message, setDialogNodeId, setSelectedConnectionId, setSelectedNodeIds]);
+ }, [createFileNode, getCanvasCenter, message, setDialogNodeId, setSelectedConnectionId, setSelectedNodeIds]);
// 时间线专用：把本地音视频文件上传为直连媒体（仅时间线作用域，不创建画布节点），返回媒体描述数组。
const uploadTimelineMedia = useCallback(async (files: File[]): Promise => {
@@ -441,89 +440,11 @@ export function useCanvasUpload({
const replaceNodeMedia = useCallback(async (nodeId: string, file: File) => {
const currentNode = nodesRef.current.find((node) => node.id === nodeId);
- if (!currentNode) return false;
- if (isAudioFile(file)) {
- const progress = startUploadStatus("替换音频", "读取音频文件");
- try {
- progress.update("上传到服务器并同步资源", 2);
- const audio = await uploadMediaFile(file, "audio");
- progress.update("更新画布节点", 3);
- const node = { ...currentNode, type: CanvasNodeType.Audio, title: file.name, metadata: { ...currentNode.metadata, ...audioMetadata(audio), assetId: undefined, taskId: undefined, errorDetails: undefined } } satisfies CanvasNodeData;
- setNodes((current) => current.map((item) => item.id === nodeId ? node : item));
- selectInsertedNode(nodeId, "preserve");
- const persisted = await persistMediaNode(node);
- progress.done(persisted ? "音频已替换，可撤销恢复" : "音频已替换，项目资产待重试");
- return true;
- } catch (error) {
- const details = error instanceof Error ? error.message : "音频替换失败";
- progress.fail(details);
- message.error(details);
- return false;
- }
- }
- if (file.type.startsWith("video/")) {
- const progress = startUploadStatus("替换视频", "读取视频文件");
- try {
- progress.update("上传到服务器并同步资源", 2);
- const video = await uploadMediaFile(file, "video");
- progress.update("更新画布节点", 3);
- const node = { ...currentNode, type: CanvasNodeType.Video, title: file.name, metadata: { ...currentNode.metadata, ...videoMetadata(video), assetId: undefined, taskId: undefined, errorDetails: undefined } } satisfies CanvasNodeData;
- setNodes((current) => current.map((item) => item.id === nodeId ? node : item));
- selectInsertedNode(nodeId, "open");
- const persisted = await persistMediaNode(node);
- progress.done(persisted ? "视频已替换，可撤销恢复" : "视频已替换，项目资产待重试");
- return true;
- } catch (error) {
- const details = error instanceof Error ? error.message : "视频替换失败";
- progress.fail(details);
- message.error(details);
- return false;
- }
- }
- const progress = startUploadStatus("替换图片", "读取图片文件");
- try {
- progress.update("上传到服务器并同步资源", 2);
- const image = await uploadImage(file);
- progress.update("更新画布节点", 3);
- const node = {
- ...currentNode,
- type: CanvasNodeType.Image,
- title: file.name,
- metadata: {
- ...currentNode.metadata,
- ...imageMetadata(image),
- assetId: undefined,
- taskId: undefined,
- errorDetails: undefined,
- freeResize: false,
- isBatchRoot: undefined,
- batchRootId: undefined,
- batchChildIds: undefined,
- batchFailedCount: undefined,
- batchUsesReferenceImages: undefined,
- generationType: undefined,
- model: undefined,
- size: undefined,
- quality: undefined,
- transparentBackground: undefined,
- count: undefined,
- references: undefined,
- primaryImageId: undefined,
- imageBatchExpanded: undefined,
- },
- } satisfies CanvasNodeData;
- setNodes((current) => current.map((item) => item.id === nodeId ? node : item));
- selectInsertedNode(nodeId, "open");
- const persisted = await persistMediaNode(node);
- progress.done(persisted ? "图片已替换，可撤销恢复" : "图片已替换，项目资产待重试");
- return true;
- } catch (error) {
- const details = error instanceof Error ? error.message : "图片替换失败";
- progress.fail(details);
- message.error(details);
- return false;
- }
- }, [message, nodesRef, persistMediaNode, selectInsertedNode, setNodes, startUploadStatus]);
+ if (!currentNode || !uploadNodeType(file)) return false;
+ const typedNode = [CanvasNodeType.Image, CanvasNodeType.Video, CanvasNodeType.Audio, CanvasNodeType.Text].includes(currentNode.type as CanvasNodeType);
+ if (typedNode && uploadNodeType(file) !== currentNode.type) return false;
+ return Boolean(await createFileNode(file, currentNode.position, nodeId));
+ }, [createFileNode, nodesRef]);
const pasteSystemClipboard = useCallback(async (position?: Position, clipboardEvent?: ClipboardEvent | null) => {
const isNodeMarker = (value: string) => {
@@ -536,7 +457,7 @@ export function useCanvasUpload({
if (await replaceNodeMedia(selected[0].id, file)) message.success("已用剪切板图片替换，可撤销恢复");
return true;
}
- const inserted = await createImageFileNode(file, position || getCanvasCenter());
+ const inserted = await createFileNode(file, position || getCanvasCenter());
if (inserted) message.success("已从剪切板添加图片");
return Boolean(inserted);
};
@@ -587,20 +508,17 @@ export function useCanvasUpload({
// ignore
}
return false;
- }, [createImageFileNode, createTextNodeFromClipboard, getCanvasCenter, message, nodesRef, replaceNodeMedia, selectedNodeIdsRef]);
+ }, [createFileNode, createTextNodeFromClipboard, getCanvasCenter, message, nodesRef, replaceNodeMedia, selectedNodeIdsRef]);
const handleImageInputChange = useCallback(async (event: ChangeEvent) => {
const file = event.target.files?.[0];
const target = uploadTargetRef.current;
try {
- if (!file || (!file.type.startsWith("image/") && !file.type.startsWith("video/") && !isAudioFile(file))) return;
+ if (!file || !uploadNodeType(file)) return;
if (target?.nodeId) {
const targetNode = nodesRef.current.find((node) => node.id === target.nodeId);
- const compatible = !targetNode
- || (targetNode.type === CanvasNodeType.Image && file.type.startsWith("image/"))
- || (targetNode.type === CanvasNodeType.Video && file.type.startsWith("video/"))
- || (targetNode.type === CanvasNodeType.Audio && isAudioFile(file))
- || (targetNode.type !== CanvasNodeType.Image && targetNode.type !== CanvasNodeType.Video && targetNode.type !== CanvasNodeType.Audio);
+ const compatible = targetNode && (targetNode.type === uploadNodeType(file)
+ || ![CanvasNodeType.Image, CanvasNodeType.Video, CanvasNodeType.Audio, CanvasNodeType.Text].includes(targetNode.type as CanvasNodeType));
if (!compatible) {
message.warning("请选择与当前节点相同类型的媒体文件");
return;
@@ -609,12 +527,12 @@ export function useCanvasUpload({
return;
}
const position = target?.position || getCanvasCenter();
- await (isAudioFile(file) ? createAudioFileNode(file, position) : file.type.startsWith("video/") ? createVideoFileNode(file, position) : createImageFileNode(file, position));
+ await createFileNode(file, position);
} finally {
uploadTargetRef.current = null;
event.target.value = "";
}
- }, [createAudioFileNode, createImageFileNode, createVideoFileNode, getCanvasCenter, message, nodesRef, replaceNodeMedia]);
+ }, [createFileNode, getCanvasCenter, message, nodesRef, replaceNodeMedia]);
const handleDrop = useCallback((event: DragEvent) => {
event.preventDefault();
@@ -635,7 +553,7 @@ export function useCanvasUpload({
void createImageAssetNode(asset, screenToCanvas(event.clientX, event.clientY));
return;
}
- const files = Array.from(event.dataTransfer.files).filter((item) => item.type.startsWith("image/") || item.type.startsWith("video/") || isAudioFile(item));
+ const files = Array.from(event.dataTransfer.files).filter((item) => uploadNodeType(item));
if (!files.length) return;
if (files.length > 1) {
void handleUploadFiles(files);
@@ -644,9 +562,7 @@ export function useCanvasUpload({
const file = files[0];
const position = screenToCanvas(event.clientX, event.clientY);
const target = [...nodesRef.current].reverse().find((node) => {
- const compatible = (node.type === CanvasNodeType.Image && file.type.startsWith("image/"))
- || (node.type === CanvasNodeType.Video && file.type.startsWith("video/"))
- || (node.type === CanvasNodeType.Audio && isAudioFile(file));
+ const compatible = node.type === uploadNodeType(file);
return compatible && position.x >= node.position.x && position.x <= node.position.x + node.width && position.y >= node.position.y && position.y <= node.position.y + node.height;
});
if (target) {
@@ -655,8 +571,8 @@ export function useCanvasUpload({
});
return;
}
- void (isAudioFile(file) ? createAudioFileNode(file, position) : file.type.startsWith("video/") ? createVideoFileNode(file, position) : createImageFileNode(file, position));
- }, [createAudioFileNode, createImageAssetNode, createImageFileNode, createVideoFileNode, handleProjectChapterInsert, handleUploadFiles, message, nodesRef, replaceNodeMedia, screenToCanvas]);
+ void createFileNode(file, position);
+ }, [createFileNode, createImageAssetNode, handleProjectChapterInsert, handleUploadFiles, message, nodesRef, replaceNodeMedia, screenToCanvas]);
const handleFileDragEnter = useCallback((event: DragEvent) => {
if (!hasDraggedFiles(event)) return;
@@ -678,10 +594,10 @@ export function useCanvasUpload({
}, []);
const pasteAssistantImage = useCallback((file: File) => {
- void createImageFileNode(file, getCanvasCenter()).then((inserted) => {
+ void createFileNode(file, getCanvasCenter()).then((inserted) => {
if (inserted) message.success("已从剪切板添加图片");
});
- }, [createImageFileNode, getCanvasCenter, message]);
+ }, [createFileNode, getCanvasCenter, message]);
const openAssetsAtPosition = useCallback((position?: Position) => {
assetInsertPositionRef.current = position || null;
diff --git a/web/src/pages/plugins/index.tsx b/web/src/pages/plugins/index.tsx
index decc8939a..ce67f370b 100644
--- a/web/src/pages/plugins/index.tsx
+++ b/web/src/pages/plugins/index.tsx
@@ -157,10 +157,11 @@ export default function PluginsPage() {
}, [backendPluginById, categoryFilter, features.systemPluginsVisibleToUsers, installations, pluginStates, registeredPlugins, search, statusFilter, trustFilter, user?.role]);
const pluginSections = useMemo(
- () => [
- ...protocolSectionMeta.map((section) => ({ ...section, plugins: filteredPlugins.filter((plugin) => pluginMatchesCategory(plugin.manifest, section.key)) })),
- { key: "other", label: "应用插件", description: "画布、素材与工作流扩展", icon: PlugZap, plugins: filteredPlugins.filter((plugin) => pluginMatchesCategory(plugin.manifest, "other")) },
- ].filter((section) => categoryFilter === "all" || section.key === categoryFilter),
+ () =>
+ [
+ ...protocolSectionMeta.map((section) => ({ ...section, plugins: filteredPlugins.filter((plugin) => pluginMatchesCategory(plugin.manifest, section.key)) })),
+ { key: "other", label: "应用插件", description: "画布、素材与工作流扩展", icon: PlugZap, plugins: filteredPlugins.filter((plugin) => pluginMatchesCategory(plugin.manifest, "other")) },
+ ].filter((section) => categoryFilter === "all" || section.key === categoryFilter),
[categoryFilter, filteredPlugins],
);
diff --git a/web/src/pages/projects/detail/chapters.tsx b/web/src/pages/projects/detail/chapters.tsx
index 944e3860b..995185f45 100644
--- a/web/src/pages/projects/detail/chapters.tsx
+++ b/web/src/pages/projects/detail/chapters.tsx
@@ -54,7 +54,6 @@ import { SkillRuntimePicker, useSkillRuntimeCatalog } from "@/components/skills/
import { ModelPicker } from "@/components/model-picker";
import { WorkspaceState } from "@/components/layout/workspace-state";
import { resolveProjectCanvasStyle } from "@/components/canvas/canvas-style-picker-modal";
-import { normalizeCharacterName } from "@/lib/canvas/canvas-character-reference";
import { decodeNovelText, splitTextIntoChapters } from "@/lib/canvas/canvas-document";
import { navigateToSettings } from "@/lib/settings-navigation";
import {
@@ -73,7 +72,7 @@ import { listGenerationTasks, queryGenerationTask, type GenerationTask } from "@
import { formatCount, formatTime, statusLabel, type ProjectDetailViewProps } from "./shared";
import { chapterStoryboardAssets, chapterStoryboardCharacters, chapterStoryboardReplaceImpact, storyboardRowsToProjectShots } from "./chapter-storyboard-production";
-import { chapterCharactersFromGenerationTask, chapterStoryboardFromGenerationTask, chapterTaskIdentity, extractChapterCharacters, generateChapterStoryboard } from "./project-chapter-ai";
+import { chapterAssetsFromGenerationTask, chapterStoryboardFromGenerationTask, chapterTaskIdentity, extractChapterAssets, generateChapterStoryboard } from "./project-chapter-ai";
const CHAPTER_ROW_HEIGHT = 62;
const MAX_NOVEL_IMPORT_CHAPTERS = 2500;
@@ -349,14 +348,15 @@ export default function ProjectChaptersView({ detail, refreshProject }: ProjectD
const markChapterOperationCompleted = (unitId: string, kind: ChapterOperationKind) => {
setCompletedChapterOperations((current) => ({ ...current, [chapterOperationKey(unitId, kind)]: true }));
};
- const storeExtractedCharacters = async (unitId: string, characters: Awaited>) => {
- const knownNames = new Set([
- ...detail.assetCandidates.filter((candidate) => candidate.category === "character").map((candidate) => normalizeCharacterName(candidate.name)),
- ...detail.assets.filter((asset) => asset.category === "character").map((asset) => normalizeCharacterName(asset.title)),
- ]);
- const fresh = characters.filter((character) => ![character.name, ...character.aliases].map(normalizeCharacterName).some((name) => knownNames.has(name)));
- const created = fresh.length
- ? await createProjectAssetCandidates(detail.project.id, fresh.map((character) => ({ unitId, name: character.name, category: "character", details: { ...character } })), "chapter_character_extract")
+ const storeExtractedAssets = async (unitId: string, assets: Awaited>) => {
+ // 去重由服务端按分类、名称及别名统一完成，避免使用页面分页快照漏判。
+ const candidates = [
+ ...assets.characters.map((asset) => ({ unitId, name: asset.name, category: "character" as const, details: { ...asset } })),
+ ...assets.scenes.map((asset) => ({ unitId, name: asset.name, category: "environment" as const, details: { ...asset } })),
+ ...assets.props.map((asset) => ({ unitId, name: asset.name, category: "prop" as const, details: { ...asset } })),
+ ];
+ const created = candidates.length
+ ? await createProjectAssetCandidates(detail.project.id, candidates, "chapter_character_extract")
: { candidates: [] };
markChapterOperationCompleted(unitId, "characters");
refreshProject();
@@ -380,16 +380,16 @@ export default function ProjectChaptersView({ detail, refreshProject }: ProjectD
operationUnitId = input.chapterId;
setCharacterExtractOpen(false);
beginChapterOperation(operationUnitId, "characters");
- message.info("角色提取任务已开始，可继续编辑或切换章节");
- const characters = await extractChapterCharacters(input, { onTaskUpdate: (task) => updateChapterOperation(operationUnitId, "characters", task) });
- const freshCount = await storeExtractedCharacters(operationUnitId, characters);
+ message.info("角色、场景与道具提取任务已开始，可继续编辑或切换章节");
+ const assets = await extractChapterAssets(input, { onTaskUpdate: (task) => updateChapterOperation(operationUnitId, "characters", task) });
+ const freshCount = await storeExtractedAssets(operationUnitId, assets);
if (!freshCount) {
- message.info("本章角色已存在于待确认列表中");
+ message.info("没有新增资产：提取为空或资产已存在");
return;
}
- message.success(`已提取 ${freshCount} 个角色，请到项目资产确认`);
+ message.success(`已提取 ${freshCount} 个角色、场景或道具，请到项目资产确认`);
} catch (error) {
- message.error(error instanceof Error ? error.message : "角色提取失败");
+ message.error(error instanceof Error ? error.message : "章节资产提取失败");
} finally {
if (operationUnitId) finishChapterOperation(operationUnitId, "characters");
}
@@ -477,8 +477,8 @@ export default function ProjectChaptersView({ detail, refreshProject }: ProjectD
recoveringTaskIdsRef.current.add(task.id);
void queryGenerationTask(task.id).then(async (completedTask) => {
if (kind === "characters") {
- await storeExtractedCharacters(taskChapterId, chapterCharactersFromGenerationTask(completedTask));
- message.success("已恢复刷新前完成的角色提取结果");
+ await storeExtractedAssets(taskChapterId, chapterAssetsFromGenerationTask(completedTask));
+ message.success("已恢复刷新前完成的章节资产提取结果");
} else {
await storeGeneratedStoryboard(taskChapterId, chapterStoryboardFromGenerationTask(completedTask).rows);
message.success("已恢复刷新前完成的章节分镜");
@@ -599,7 +599,7 @@ export default function ProjectChaptersView({ detail, refreshProject }: ProjectD
{dirty ? "有未保存修改" : `保存于 ${formatTime(selectedUnit.updatedAt)}`}·{formatCount(wordCount)} 字·{chapterCanvasCount(selectedUnit.id)} 个画布