fix(canvas): 画布保存 - 修复重生成媒体绑定死锁并新增手动保存与强制覆盖保存 (#517)
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
ddCat
@@ -1,5 +1,6 @@
|
||||
import { canvasNodeToAsset } from "@/lib/canvas/canvas-node-asset";
|
||||
import { useAssetStore, type Asset } from "@/stores/use-asset-store";
|
||||
import { resourceIdFromStorageKey } from "@/services/api/resources";
|
||||
import { useAssetStore, type Asset, type NewAsset } from "@/stores/use-asset-store";
|
||||
import { useCanvasStore, type CanvasProject } from "@/stores/canvas/use-canvas-store";
|
||||
import { CanvasNodeType, type CanvasNodeData } from "@/types/canvas";
|
||||
import type { TimelineDirectMedia } from "@/types/timeline";
|
||||
@@ -32,13 +33,15 @@ export function repairMissingCanvasAssets(projectIds?: Set<string>, partialAsset
|
||||
for (const node of project.nodes) {
|
||||
if (node.metadata?.assetId) {
|
||||
knownAssetIds.add(node.metadata.assetId);
|
||||
if (node.metadata.storageKey) storageKeyByAssetId.set(node.metadata.assetId, node.metadata.storageKey);
|
||||
// 节点声明只用于补充本地未加载的素材映射，不能覆盖素材库的真实绑定：
|
||||
// 原地重生成的节点可能保留旧 assetId 却指向新资源，覆盖会让修复永远放行错误配对。
|
||||
if (node.metadata.storageKey && !storageKeyByAssetId.has(node.metadata.assetId)) storageKeyByAssetId.set(node.metadata.assetId, node.metadata.storageKey);
|
||||
}
|
||||
}
|
||||
for (const clip of project.timeline?.clips || []) {
|
||||
if (clip.directMedia?.assetId) {
|
||||
knownAssetIds.add(clip.directMedia.assetId);
|
||||
if (clip.directMedia.storageKey) storageKeyByAssetId.set(clip.directMedia.assetId, clip.directMedia.storageKey);
|
||||
if (clip.directMedia.storageKey && !storageKeyByAssetId.has(clip.directMedia.assetId)) storageKeyByAssetId.set(clip.directMedia.assetId, clip.directMedia.storageKey);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -99,8 +102,7 @@ function matchingAssetId(explicitId: string | undefined, storageKey: string | un
|
||||
}
|
||||
|
||||
function isDurableMediaNode(node: CanvasNodeData) {
|
||||
const isMedia = node.type === CanvasNodeType.Image || node.type === CanvasNodeType.Video || node.type === CanvasNodeType.Audio;
|
||||
return isMedia && Boolean(node.metadata?.content || node.metadata?.storageKey);
|
||||
return isCanvasMediaNodeType(node) && Boolean(node.metadata?.content || node.metadata?.storageKey);
|
||||
}
|
||||
|
||||
function timelineMediaNode(media: TimelineDirectMedia): CanvasNodeData {
|
||||
@@ -131,3 +133,145 @@ function mediaContent(media: TimelineDirectMedia) {
|
||||
function assetStorageKey(asset: Asset) {
|
||||
return asset.kind === "text" || asset.kind === "entity" ? undefined : asset.data.storageKey;
|
||||
}
|
||||
|
||||
export type CanvasAssetRebindResult = {
|
||||
reboundNodes: number;
|
||||
createdAssets: number;
|
||||
updatedProjects: number;
|
||||
};
|
||||
|
||||
const LOCAL_MEDIA_KEY_PATTERN = /^(image|video|audio|file|video-reference|audio-reference):/;
|
||||
const RESOURCE_URL_PATTERN = /\/resources\/([A-Za-z0-9_-]{1,80})\/file/;
|
||||
const RESOURCE_ID_PATTERN = /^[A-Za-z0-9_-]{1,80}$/;
|
||||
|
||||
/**
|
||||
* 强制对齐画布媒体与素材的绑定：以素材记录实际引用的资源为准校验节点声明的
|
||||
* (assetId, 资源) 对，不一致时重绑到引用同一资源的现有素材，缺失则按节点新建。
|
||||
* 服务端画布不变式只认「资源被 assetId 对应素材引用」，重绑后按素材先于画布
|
||||
* 推送即可在不破坏该不变式的前提下用本地画布覆盖云端。
|
||||
*/
|
||||
export function rebindInconsistentCanvasAssets(records: Asset[], projectIds?: Set<string>): CanvasAssetRebindResult {
|
||||
const identitiesByAssetId = new Map<string, Set<string>>();
|
||||
const assetIdByIdentity = new Map<string, string>();
|
||||
const registerAsset = (asset: Asset) => {
|
||||
const identities = assetIdentities(asset);
|
||||
identitiesByAssetId.set(asset.id, identities);
|
||||
for (const identity of identities) {
|
||||
if (!assetIdByIdentity.has(identity)) assetIdByIdentity.set(identity, asset.id);
|
||||
}
|
||||
};
|
||||
for (const asset of records) registerAsset(asset);
|
||||
|
||||
let reboundNodes = 0;
|
||||
let createdAssets = 0;
|
||||
let updatedProjects = 0;
|
||||
const canvasStore = useCanvasStore.getState();
|
||||
for (const project of canvasStore.projects) {
|
||||
if (projectIds && !projectIds.has(project.id)) continue;
|
||||
let projectChanged = false;
|
||||
const resolveAssetId = (declaredId: string | undefined, identity: string, buildAsset: () => NewAsset | null): string | undefined => {
|
||||
if (declaredId && identitiesByAssetId.get(declaredId)?.has(identity)) return declaredId;
|
||||
const candidate = assetIdByIdentity.get(identity);
|
||||
if (candidate) return candidate;
|
||||
const input = buildAsset();
|
||||
if (!input) return declaredId;
|
||||
const assetStore = useAssetStore.getState();
|
||||
const assetId = assetStore.addAsset(input);
|
||||
identitiesByAssetId.set(assetId, new Set([identity]));
|
||||
if (!assetIdByIdentity.has(identity)) assetIdByIdentity.set(identity, assetId);
|
||||
createdAssets += 1;
|
||||
return assetId;
|
||||
};
|
||||
const nodes = project.nodes.map((node) => {
|
||||
if (!isCanvasMediaNodeType(node)) return node;
|
||||
const identity = mediaNodeIdentity(node.metadata?.storageKey, node.metadata?.content);
|
||||
if (!identity) return node;
|
||||
const assetId = resolveAssetId(node.metadata?.assetId, identity, () => canvasNodeToAsset(node, { canvasId: project.id, source: "canvas-manual" }));
|
||||
if (!assetId || node.metadata?.assetId === assetId) return node;
|
||||
reboundNodes += 1;
|
||||
projectChanged = true;
|
||||
return { ...node, metadata: { ...node.metadata, assetId } };
|
||||
});
|
||||
const timeline = project.timeline
|
||||
? {
|
||||
...project.timeline,
|
||||
clips: project.timeline.clips.map((clip) => {
|
||||
const media = clip.directMedia;
|
||||
const identity = media && media.kind !== "text" ? mediaNodeIdentity(media.storageKey, mediaContent(media)) : undefined;
|
||||
if (!media || !identity) return clip;
|
||||
const assetId = resolveAssetId(media.assetId, identity, () => canvasNodeToAsset(timelineMediaNode(media), { canvasId: project.id, source: "canvas-manual" }));
|
||||
if (!assetId || media.assetId === assetId) return clip;
|
||||
reboundNodes += 1;
|
||||
projectChanged = true;
|
||||
return { ...clip, directMedia: { ...media, assetId } };
|
||||
}),
|
||||
}
|
||||
: project.timeline;
|
||||
if (!projectChanged) continue;
|
||||
canvasStore.updateProject(project.id, { nodes, timeline });
|
||||
updatedProjects += 1;
|
||||
}
|
||||
return { reboundNodes, createdAssets, updatedProjects };
|
||||
}
|
||||
|
||||
/** 收集画布媒体节点与时间线片段声明过 assetId 的媒体引用，供强制覆盖前批量拉取服务端素材记录。 */
|
||||
export function collectCanvasMediaAssetIds(projects: CanvasProject[]): Set<string> {
|
||||
const ids = new Set<string>();
|
||||
for (const project of projects) {
|
||||
for (const node of project.nodes) {
|
||||
if (isCanvasMediaNodeType(node) && node.metadata?.assetId && mediaNodeIdentity(node.metadata.storageKey, node.metadata.content)) ids.add(node.metadata.assetId);
|
||||
}
|
||||
for (const clip of project.timeline?.clips || []) {
|
||||
const media = clip.directMedia;
|
||||
if (media?.assetId && media.kind !== "text" && mediaNodeIdentity(media.storageKey, mediaContent(media))) ids.add(media.assetId);
|
||||
}
|
||||
}
|
||||
return ids;
|
||||
}
|
||||
|
||||
function isCanvasMediaNodeType(node: CanvasNodeData) {
|
||||
return node.type === CanvasNodeType.Image || node.type === CanvasNodeType.Video || node.type === CanvasNodeType.Audio;
|
||||
}
|
||||
|
||||
function mediaNodeIdentity(storageKey: string | undefined, content: string | undefined) {
|
||||
const fromKey = mediaIdentityFromValue(storageKey);
|
||||
if (fromKey) return fromKey;
|
||||
const resourceId = resourceIdFromStorageKey(content);
|
||||
if (resourceId) return resourceIdFromIdentity(resourceId);
|
||||
const urlMatch = RESOURCE_URL_PATTERN.exec(content || "");
|
||||
return urlMatch ? urlMatch[1] : undefined;
|
||||
}
|
||||
|
||||
function mediaIdentityFromValue(value: string | undefined) {
|
||||
const key = value?.trim();
|
||||
if (!key || key.startsWith("data:") || key.startsWith("blob:")) return undefined;
|
||||
const resourceId = resourceIdFromStorageKey(key);
|
||||
if (resourceId) return resourceIdFromIdentity(resourceId);
|
||||
const urlMatch = RESOURCE_URL_PATTERN.exec(key);
|
||||
if (urlMatch) return urlMatch[1];
|
||||
// 本地存储 key（image:/video:…）上传时以 key 为幂等标识，同名必得同资源，可作稳定身份。
|
||||
return LOCAL_MEDIA_KEY_PATTERN.test(key) ? key : undefined;
|
||||
}
|
||||
|
||||
function resourceIdFromIdentity(candidate: string | undefined) {
|
||||
const id = candidate?.trim() || "";
|
||||
return RESOURCE_ID_PATTERN.test(id) ? id : undefined;
|
||||
}
|
||||
|
||||
/** 镜像服务端 guard 的素材资源定位来源：storageKey、resourceKey 与 URL 形态的资源引用。 */
|
||||
function assetIdentities(asset: Asset) {
|
||||
const identities = new Set<string>();
|
||||
const data = asset.kind === "text" || asset.kind === "entity" ? undefined : asset.data;
|
||||
const values = [
|
||||
typeof asset.metadata?.resourceKey === "string" ? asset.metadata.resourceKey : "",
|
||||
assetStorageKey(asset) || "",
|
||||
...(data && "url" in data && typeof data.url === "string" ? [data.url] : []),
|
||||
...(data && "dataUrl" in data && typeof data.dataUrl === "string" ? [data.dataUrl] : []),
|
||||
asset.coverUrl || "",
|
||||
];
|
||||
for (const value of values) {
|
||||
const identity = mediaIdentityFromValue(value);
|
||||
if (identity) identities.add(identity);
|
||||
}
|
||||
return identities;
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@ import type { CanvasProject } from "@/stores/canvas/use-canvas-store";
|
||||
import { flushCanvasStorePersistence, useCanvasStore } from "@/stores/canvas/use-canvas-store";
|
||||
import { useSyncProgressStore } from "@/stores/use-sync-progress-store";
|
||||
import { useCanvasHistoryStore } from "@/stores/canvas/use-canvas-history-store";
|
||||
import { repairMissingCanvasAssets } from "@/services/canvas-asset-repair";
|
||||
import { repairMissingCanvasAssets, collectCanvasMediaAssetIds, rebindInconsistentCanvasAssets, type CanvasAssetRebindResult } from "@/services/canvas-asset-repair";
|
||||
import { canvasNodeToAsset } from "@/lib/canvas/canvas-node-asset";
|
||||
import { sameAgentCanvasContent } from "@/lib/canvas/agent-canvas-snapshot";
|
||||
import { applyAgentCanvasPatch, type AgentCanvasPatch } from "@/lib/canvas/agent-canvas-patch";
|
||||
@@ -436,7 +436,7 @@ export async function deleteCanvasProjectsWithRemoteSync(ids: string[]) {
|
||||
});
|
||||
}
|
||||
|
||||
export async function saveRemoteUserDataNow() {
|
||||
export async function saveRemoteUserDataNow(options: { force?: boolean } = {}) {
|
||||
// 这是远端写入的总闸门：只有 phase=ready 且已建立 acknowledged 基线时才能提交。
|
||||
// 本地 Zustand/localForage 写成功不等于服务端写成功，任何同步异常都必须继续抛出给调用方。
|
||||
const epoch = sessionEpoch;
|
||||
@@ -451,7 +451,7 @@ export async function saveRemoteUserDataNow() {
|
||||
syncPromise = withRemoteUserDataSyncExclusive(async () => {
|
||||
if (epoch !== sessionEpoch) throw new Error("账号已切换，已停止旧会话保存");
|
||||
requireRemoteUserDataBaseline();
|
||||
await drainRemoteUserDataChanges();
|
||||
await drainRemoteUserDataChanges(options);
|
||||
});
|
||||
try {
|
||||
await syncPromise;
|
||||
@@ -460,15 +460,47 @@ export async function saveRemoteUserDataNow() {
|
||||
}
|
||||
}
|
||||
|
||||
async function drainRemoteUserDataChanges() {
|
||||
/**
|
||||
* 强制覆盖保存：以本地内容为准修复画布媒体与素材的绑定（重绑到引用同一资源的素材，
|
||||
* 缺失则按节点新建），再走「素材先于画布」的整体推送覆盖云端。服务端画布不变式只认
|
||||
* 「节点资源被其 assetId 对应素材引用」，重绑后的本地画布可以在不破坏该不变式的前提下
|
||||
* 覆盖远端。素材远端版本冲突时采纳远端为基线继续覆盖，避免显式覆盖被冲突检测卡死。
|
||||
*/
|
||||
export async function forceOverwriteRemoteCanvasSync(): Promise<CanvasAssetRebindResult> {
|
||||
const epoch = sessionEpoch;
|
||||
if (!activeRemoteUserId) throw new Error("尚未建立云端同步会话，请登录后重试");
|
||||
requireRemoteUserDataBaseline();
|
||||
await waitForRemoteProjectLoads();
|
||||
const rebind = await withRemoteUserDataSyncExclusive(async () => {
|
||||
if (epoch !== sessionEpoch) throw new Error("账号已切换，已停止强制覆盖");
|
||||
requireRemoteUserDataBaseline();
|
||||
const projects = useCanvasStore.getState().projects;
|
||||
// 服务端素材记录是 guard 实际校验的事实；本地缓存可能落后，须先取回再判定绑定一致性。
|
||||
const claimedIds = [...collectCanvasMediaAssetIds(projects)];
|
||||
const remoteAssets: Asset[] = [];
|
||||
for (let offset = 0; offset < claimedIds.length; offset += 100) {
|
||||
const { assets } = await getRemoteAssetsByIds(claimedIds.slice(offset, offset + 100));
|
||||
remoteAssets.push(...assets);
|
||||
}
|
||||
const remoteById = new Map(remoteAssets.map((asset) => [asset.id, asset]));
|
||||
const merged = [...remoteAssets, ...useAssetStore.getState().assets.filter((asset) => !remoteById.has(asset.id))];
|
||||
const result = rebindInconsistentCanvasAssets(parseAssetRecordList(merged));
|
||||
await Promise.all([flushCanvasStorePersistence(), flushAssetStorePersistence()]);
|
||||
return result;
|
||||
});
|
||||
await saveRemoteUserDataNow({ force: true });
|
||||
return rebind;
|
||||
}
|
||||
|
||||
async function drainRemoteUserDataChanges(options: { force?: boolean } = {}) {
|
||||
const uploaded = new Map<string, string>();
|
||||
do {
|
||||
syncQueued = false;
|
||||
await saveRemoteUserDataBatch(uploaded);
|
||||
await saveRemoteUserDataBatch(uploaded, options);
|
||||
} while (syncQueued);
|
||||
}
|
||||
|
||||
async function saveRemoteUserDataBatch(uploaded: Map<string, string>) {
|
||||
async function saveRemoteUserDataBatch(uploaded: Map<string, string>, options: { force?: boolean } = {}) {
|
||||
// 中央兜底：任何调用方只要把持久媒体写进画布，提交前都会先补齐素材记录与 assetId。
|
||||
// 页面级入口仍主动入库，以便立即反馈；这里负责阻止遗漏入口形成远端幽灵资源。
|
||||
const changedProjectIds = new Set(useCanvasStore.getState().projects.filter((project) => !sameEntitySnapshot(acknowledgedProjects.get(project.id), project)).map((project) => project.id));
|
||||
@@ -495,7 +527,11 @@ async function saveRemoteUserDataBatch(uploaded: Map<string, string>) {
|
||||
const baseline = acknowledgedAssets.get(source.id);
|
||||
if (!baseline || verifiedAssets.has(source.id)) continue;
|
||||
const { asset } = await getRemoteAsset(source.id);
|
||||
if (Date.parse(asset.updatedAt) !== Date.parse(baseline.updatedAt)) throw new Error("素材远端版本已变化，已停止覆盖，请重新打开素材库");
|
||||
if (Date.parse(asset.updatedAt) !== Date.parse(baseline.updatedAt)) {
|
||||
if (!options.force) throw new Error("素材远端版本已变化，已停止覆盖，请重新打开素材库");
|
||||
// 强制覆盖是用户显式指令：采纳远端版本为新基线后继续用本地内容覆盖。
|
||||
acknowledgedAssets.set(source.id, asset);
|
||||
}
|
||||
verifiedAssets.add(source.id);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user