tt/ttstd-infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(*): 数据同步与资源删除 - 收敛服务端真相并保证删除可恢复

Browse Source
This commit is contained in:
ddCat
2026-08-25 20:10:11 +08:00
parent d2748243d8
commit 48dca6c796
21 changed files with 970 additions and 1784 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/canvas/canvas-assistant-panel.tsx
View File

@@ -631,14 +631,14 @@ export function CanvasAssistantPanel({
setLocalSessions(next);
setLocalActiveSessionId(localActiveSessionId && ids.includes(localActiveSessionId) ? next[0].id : localActiveSessionId);
}
cleanupImages({ sessions: next });
void cleanupImages({ sessions: next });
};
const clearSessions = () => {
const session = createSession();
setLocalSessions([session]);
setLocalActiveSessionId(session.id);
cleanupImages({ sessions: [session] });
void cleanupImages({ sessions: [session] });
};
const sendMessage = async (text: string, history: CanvasAssistantMessage[], savedReferences?: CanvasAssistantReference[]) => {

2
web/src/components/canvas/canvas-delete-projects-dialog.tsx
View File

@@ -16,7 +16,7 @@ export function CanvasDeleteProjectsDialog() {
setDeleting(true);
try {
await deleteCanvasProjectsWithRemoteSync(ids);
cleanupImages();
void cleanupImages();
removeSelectedIds(ids);
setDeleteIds([]);
} catch (error) {

9
web/src/lib/user-session.ts
View File

@@ -8,12 +8,12 @@ import { ASSET_STORE_KEY, flushAssetStorePersistence, useAssetStore } from "@/st
import { CONFIG_STORE_KEY, PUBLIC_MODEL_CATALOG_ID, defaultConfig, normalizeConfigSnapshot, useConfigStore, type ModelCapability, type ModelChannel } from "@/stores/use-config-store";
import { defaultModelCapabilityConfig, STANDARD_IMAGE_SIZE_VALUES, type ModelCapabilityConfig } from "@/lib/model-capabilities";
import { useUserStore } from "@/stores/use-user-store";
import { installRemoteUserDataAutoSync, resetRemoteUserDataSync, syncRemoteUserData, withRemoteUserDataSyncPaused } from "@/services/user-data-sync";
import { installRemoteUserDataAutoSync, resetRemoteUserDataSync, syncRemoteUserData, withRemoteUserDataSyncExclusive } from "@/services/user-data-sync";
import { withGenerationConsumersPaused } from "@/services/generation-consumer-lifecycle";
export async function switchUserStorageScope(userId?: string | null) {
await withGenerationConsumersPaused(async () => {
await withRemoteUserDataSyncPaused(async () => {
await withRemoteUserDataSyncExclusive(async () => {
await Promise.all([flushCanvasStorePersistence(), flushAssetStorePersistence()]);
resetRemoteUserDataSync();
setActiveUserScope(userId);
@@ -69,8 +69,9 @@ export async function applyUserSession(payload: AuthSessionPayload) {
}
installRemoteUserDataAutoSync();
if (payload.user?.id) {
// 认证状态先完成，云端数据在后台合并；远端同步失败不能伪装成登录失败。
void syncRemoteUserData(payload.user.id).catch((error) => console.warn("登录后云端数据同步失败，保留本地数据等待重试", error));
// 登录后的服务端快照是实体基线；基线完成前不开放工作区写操作。
// 拉取失败时保留本地缓存供只读降级，但远端写入口会明确拒绝，不能把旧缓存上传成真相。
await syncRemoteUserData(payload.user.id).catch((error) => console.warn("登录后云端数据基线建立失败，已停止远端写入", error));
} else resetRemoteUserDataSync();
} finally {
useUserStore.getState().setHydrated(true);

24
web/src/services/canvas-generation-consumer.ts
View File

@@ -15,6 +15,7 @@ import {
rebasePendingCanvasStorePersistenceAfterGenerationCommitLocked,
reconcileCanvasGenerationFailure,
recordCanvasStorageDocument,
registerCanvasGenerationPersistenceAttempt,
useCanvasStore,
withCanvasStorePersistenceLock,
withCanvasStorePersistenceSuppressed,
@@ -445,9 +446,17 @@ export async function persistCanvasGenerationEffect(input: CanvasGenerationEffec
const delta = generationProjectDelta(input, memoryProject);
if (!delta.stamped) throw new Error("生成副作用缺少持久幂等标记");
return withCanvasStorePersistenceLock(
scope,
async () => {
const unregisterAttempt = registerCanvasGenerationPersistenceAttempt(scope, input.projectId, input.effectKey, {
previousNodes: input.previousNodes,
nodes: input.nodes,
previousChatSessions: input.previousChatSessions,
chatSessions: input.chatSessions,
});
try {
return await withCanvasStorePersistenceLock(
scope,
async () => {
let latestDurable: ReturnType<typeof parseCanvasStorageDocument> | undefined;
let generationCommittedProject: CanvasProject | undefined;
let reconcileLiveOnFailure = false;
@@ -519,7 +528,10 @@ export async function persistCanvasGenerationEffect(input: CanvasGenerationEffec
}
throw error;
}
},
{ requireCrossRealmLock: true },
);
},
{ requireCrossRealmLock: true },
);
} finally {
unregisterAttempt();
}
}

269
web/src/services/user-data-sync.ts
View File

@@ -8,47 +8,46 @@ import type { CanvasProject } from "@/stores/canvas/use-canvas-store";
import { flushCanvasStorePersistence, useCanvasStore } from "@/stores/canvas/use-canvas-store";
let activeRemoteUserId = "";
let applyingRemoteState = false;
type RemoteUserDataPhase = "inactive" | "hydrating" | "ready" | "failed";
let remoteUserDataPhase: RemoteUserDataPhase = "inactive";
let syncTimer: number | null = null;
let syncPromise: Promise<void> | null = null;
let syncQueued = false;
let syncPauseCount = 0;
let syncPauseTail: Promise<void> = Promise.resolve();
let resumeSync: (() => void) | null = null;
let syncResumed: Promise<void> | null = null;
const activeRemoteSyncOperations = new Set<Promise<void>>();
let remoteOperationTail: Promise<void> = Promise.resolve();
let subscriptionsInstalled = false;
let remoteAssetVersions = new Map<string, string>();
let remoteProjectVersions = new Map<string, string>();
let acknowledgedAssets = new Map<string, Asset>();
let acknowledgedProjects = new Map<string, CanvasProject>();
const LOCAL_STORAGE_KEY_PATTERN = /^(image|video|audio|file|video-reference|audio-reference):/;
export async function syncRemoteUserData(userId?: string | null) {
await runRemoteUserDataSyncOperation(async () => {
await withRemoteUserDataSyncExclusive(async () => {
activeRemoteUserId = userId || "";
if (!activeRemoteUserId) return;
applyingRemoteState = true;
acknowledgedProjects.clear();
acknowledgedAssets.clear();
if (!activeRemoteUserId) {
remoteUserDataPhase = "inactive";
return;
}
remoteUserDataPhase = "hydrating";
try {
// 登录只拉一次聚合快照。摘要列表再逐条请求详情会把 N 条数据放大成 2N+2 个请求，
// 并且会在登录阶段同时触发大量媒体解析，任何一项失败都会污染登录结果。
const snapshot = await getRemoteUserDataSnapshot();
remoteProjectVersions = versionMap(snapshot.projects);
remoteAssetVersions = versionMap(snapshot.assets);
// 登录时服务端是实体真相。浏览器 IndexedDB 只作为首屏缓存，不能把服务端已删除的记录补回去。
// 这里只替换结构化记录，不在登录阶段解析图片/视频/音频 URL；媒体由实际使用方按需解析。
useCanvasStore.getState().replaceProjects(snapshot.projects);
useAssetStore.getState().replaceAssets(snapshot.assets);
} finally {
applyingRemoteState = false;
await Promise.all([flushCanvasStorePersistence(), flushAssetStorePersistence()]);
acknowledgedProjects = new Map(snapshot.projects.map((project) => [project.id, project]));
acknowledgedAssets = new Map(snapshot.assets.map((asset) => [asset.id, asset]));
remoteUserDataPhase = "ready";
} catch (error) {
remoteUserDataPhase = "failed";
throw error;
}
});
// 首次登录可能带有尚未创建到云端的本地画布；先完成一次 upsert，避免详情页保存/分享先于项目创建。
try {
await saveRemoteUserDataNow();
} catch (error) {
console.warn("登录后画布首次同步失败，保留本地项目等待重试", error);
}
scheduleRemoteUserDataSync();
}
export function installRemoteUserDataAutoSync() {
@@ -64,8 +63,9 @@ export function installRemoteUserDataAutoSync() {
export function resetRemoteUserDataSync() {
activeRemoteUserId = "";
remoteAssetVersions.clear();
remoteProjectVersions.clear();
remoteUserDataPhase = "inactive";
acknowledgedAssets.clear();
acknowledgedProjects.clear();
if (syncTimer) {
window.clearTimeout(syncTimer);
syncTimer = null;
@@ -73,73 +73,17 @@ export function resetRemoteUserDataSync() {
syncQueued = false;
}
function waitForRemoteUserDataSyncResume() {
if (!syncPauseCount) return Promise.resolve();
if (!syncResumed) {
syncResumed = new Promise<void>((resolve) => {
resumeSync = resolve;
});
}
return syncResumed;
}
async function runRemoteUserDataSyncOperation<T>(operation: () => Promise<T>): Promise<T> {
while (syncPauseCount) await waitForRemoteUserDataSyncResume();
let finish!: () => void;
const active = new Promise<void>((resolve) => {
finish = resolve;
});
activeRemoteSyncOperations.add(active);
try {
return await operation();
} finally {
activeRemoteSyncOperations.delete(active);
finish();
}
}
export async function withRemoteUserDataSyncPaused<T>(operation: () => Promise<T>): Promise<T> {
syncPauseCount += 1;
if (syncTimer) {
window.clearTimeout(syncTimer);
syncTimer = null;
syncQueued = true;
}
let releaseTurn!: () => void;
const previousTurn = syncPauseTail;
syncPauseTail = new Promise<void>((resolve) => {
releaseTurn = resolve;
});
await previousTurn;
try {
if (activeRemoteSyncOperations.size) {
await Promise.allSettled([...activeRemoteSyncOperations]);
}
if (syncPromise) await syncPromise;
return await operation();
} finally {
releaseTurn();
syncPauseCount -= 1;
if (!syncPauseCount) {
const resolve = resumeSync;
resumeSync = null;
syncResumed = null;
resolve?.();
if (syncQueued) scheduleRemoteUserDataSync();
}
}
export function withRemoteUserDataSyncExclusive<T>(operation: () => Promise<T>): Promise<T> {
const pending = remoteOperationTail.catch(() => undefined).then(operation);
remoteOperationTail = pending.then(
() => undefined,
() => undefined,
);
return pending;
}
export function scheduleRemoteUserDataSync() {
if (!activeRemoteUserId || applyingRemoteState) return;
if (syncPauseCount) {
syncQueued = true;
if (syncTimer) {
window.clearTimeout(syncTimer);
syncTimer = null;
}
return;
}
if (!activeRemoteUserId || remoteUserDataPhase !== "ready") return;
if (syncPromise) {
syncQueued = true;
return;
@@ -165,12 +109,15 @@ export async function createCanvasProjectWithRemoteSync(title: string, projectId
}
export async function deleteAssetWithRemoteSync(id: string) {
await runRemoteUserDataSyncOperation(async () => {
const assetId = id.trim();
if (!assetId) throw new Error("素材 ID 不能为空");
await withRemoteUserDataSyncExclusive(async () => {
if (activeRemoteUserId) {
await deleteRemoteAsset(id);
remoteAssetVersions.delete(id);
requireRemoteUserDataBaseline();
await deleteRemoteAsset(assetId);
acknowledgedAssets.delete(assetId);
}
useAssetStore.getState().removeAsset(id);
await useAssetStore.getState().removeAsset(assetId);
await flushAssetStorePersistence();
});
}
@@ -178,31 +125,31 @@ export async function deleteAssetWithRemoteSync(id: string) {
export async function deleteCanvasProjectsWithRemoteSync(ids: string[]) {
const projectIds = [...new Set(ids.map((id) => id.trim()).filter(Boolean))];
if (!projectIds.length) return;
await withRemoteUserDataSyncPaused(async () => {
if (activeRemoteUserId) {
for (const id of projectIds) {
await withRemoteUserDataSyncExclusive(async () => {
if (activeRemoteUserId) requireRemoteUserDataBaseline();
for (const id of projectIds) {
if (activeRemoteUserId) {
await deleteRemoteCanvasProject(id);
remoteProjectVersions.delete(id);
acknowledgedProjects.delete(id);
}
useCanvasStore.getState().deleteProjects([id]);
// 批量删除允许部分成功；每个已成功远端删除的实体都立即落实到本地 durable cache。
await flushCanvasStorePersistence();
}
useCanvasStore.getState().deleteProjects(projectIds);
// 删除完成后再返回，确保刷新不会读到尚未写入 IndexedDB 的旧快照。
await flushCanvasStorePersistence();
});
}
export async function saveRemoteUserDataNow() {
if (!activeRemoteUserId) return;
if (syncPauseCount) {
syncQueued = true;
await waitForRemoteUserDataSyncResume();
return saveRemoteUserDataNow();
}
requireRemoteUserDataBaseline();
if (syncPromise) {
syncQueued = true;
return syncPromise;
}
syncPromise = drainRemoteUserDataChanges();
syncPromise = withRemoteUserDataSyncExclusive(async () => {
requireRemoteUserDataBaseline();
await drainRemoteUserDataChanges();
});
try {
await syncPromise;
} finally {
@@ -218,53 +165,37 @@ async function drainRemoteUserDataChanges() {
}
async function saveRemoteUserDataBatch() {
try {
const currentProjects = useCanvasStore.getState().projects;
const currentAssets = useAssetStore.getState().assets;
const dirtyProjects = currentProjects.filter((item) => !sameVersion(remoteProjectVersions.get(item.id), item.updatedAt));
const dirtyAssets = currentAssets.filter((item) => !sameVersion(remoteAssetVersions.get(item.id), item.updatedAt));
const deletedProjectIds = missingIds(remoteProjectVersions, currentProjects);
const deletedAssetIds = missingIds(remoteAssetVersions, currentAssets);
if (!dirtyProjects.length && !dirtyAssets.length && !deletedProjectIds.length && !deletedAssetIds.length) return;
const uploaded = new Map<string, string>();
const projects = await prepareRemoteCanvasProjects(dirtyProjects, uploaded);
const assets = await prepareRemoteAssets(dirtyAssets, uploaded);
applyingRemoteState = true;
if (projects.length) useCanvasStore.getState().replaceProjects(replaceById(currentProjects, projects));
if (assets.length) useAssetStore.getState().replaceAssets(replaceById(currentAssets, assets));
applyingRemoteState = false;
// SQLite 和接口频控都要求写入保持有界；逐项提交还能准确记录已完成版本。
for (const project of projects) {
await upsertRemoteCanvasProject(project);
remoteProjectVersions.set(project.id, project.updatedAt);
}
for (const asset of assets) {
await upsertRemoteAsset(asset);
remoteAssetVersions.set(asset.id, asset.updatedAt);
}
for (const id of deletedProjectIds) {
await deleteRemoteCanvasProject(id);
remoteProjectVersions.delete(id);
}
for (const id of deletedAssetIds) {
await deleteRemoteAsset(id);
remoteAssetVersions.delete(id);
}
} finally {
applyingRemoteState = false;
const currentProjects = useCanvasStore.getState().projects;
const currentAssets = useAssetStore.getState().assets;
const dirtyProjects = currentProjects.filter((project) => !sameEntitySnapshot(acknowledgedProjects.get(project.id), project));
const dirtyAssets = currentAssets.filter((asset) => !sameEntitySnapshot(acknowledgedAssets.get(asset.id), asset));
const currentProjectIds = new Set(currentProjects.map((project) => project.id));
const currentAssetIds = new Set(currentAssets.map((asset) => asset.id));
const deletedProjectIds = [...acknowledgedProjects.keys()].filter((id) => !currentProjectIds.has(id));
const deletedAssetIds = [...acknowledgedAssets.keys()].filter((id) => !currentAssetIds.has(id));
if (!dirtyProjects.length && !dirtyAssets.length && !deletedProjectIds.length && !deletedAssetIds.length) return;
const uploaded = new Map<string, string>();
// 转换后的 resource: 引用只属于发往服务端的 payload，不能反写整份实时 store。
// 已确认快照记录的是本次上传所依据的本地实体；上传期间的新编辑会在下一轮继续提交。
for (const source of dirtyProjects) {
const remotePayload = await ensureRemoteResourceReferences(source, uploaded);
await upsertRemoteCanvasProject(remotePayload);
acknowledgedProjects.set(source.id, source);
}
for (const source of dirtyAssets) {
const remotePayload = await ensureRemoteResourceReferences(source, uploaded);
await upsertRemoteAsset(remotePayload);
acknowledgedAssets.set(source.id, source);
}
for (const id of deletedProjectIds) {
await deleteRemoteCanvasProject(id);
acknowledgedProjects.delete(id);
}
for (const id of deletedAssetIds) {
await deleteRemoteAsset(id);
acknowledgedAssets.delete(id);
}
}
async function prepareRemoteAssets(assets: Asset[], uploaded: Map<string, string>) {
const result: Asset[] = [];
for (const asset of assets) result.push(await ensureRemoteResourceReferences(asset, uploaded));
return result;
}
async function prepareRemoteCanvasProjects(projects: CanvasProject[], uploaded: Map<string, string>) {
const result: CanvasProject[] = [];
for (const project of projects) result.push(await ensureRemoteResourceReferences(project, uploaded));
return result;
}
async function ensureRemoteResourceReferences<T>(value: T, uploaded = new Map<string, string>()): Promise<T> {
@@ -287,13 +218,12 @@ async function ensureRemoteResourceReferences<T>(value: T, uploaded = new Map<st
if (!isLocalStorageKey(storageKey)) {
const inline = inlineMediaDataUrl(next);
if (!inline) return next as T;
const resourceStorage = await uploadInlineDataUrl(inline).catch(() => "");
return (resourceStorage ? applyResourceReference(next, resourceStorage) : next) as T;
const resourceStorage = await uploadInlineDataUrl(inline);
return applyResourceReference(next, resourceStorage) as T;
}
const cached = uploaded.get(storageKey);
const resourceStorage = cached || (await uploadLocalStorageKey(storageKey, next).catch(() => ""));
if (!resourceStorage) return next as T;
const resourceStorage = cached || (await uploadLocalStorageKey(storageKey, next));
uploaded.set(storageKey, resourceStorage);
return applyResourceReference(next, resourceStorage) as T;
}
@@ -316,7 +246,9 @@ function inlineMediaDataUrl(payload: Record<string, unknown>) {
}
async function uploadInlineDataUrl(dataUrl: string) {
const blob = await (await fetch(dataUrl)).blob();
const response = await fetch(dataUrl);
if (!response.ok) throw new Error("内嵌媒体读取失败");
const blob = await response.blob();
const kind: "image" | "video" | "audio" | "file" = blob.type.startsWith("image/") ? "image" : blob.type.startsWith("video/") ? "video" : blob.type.startsWith("audio/") ? "audio" : "file";
const resource = await uploadResourceFile(blob, kind);
return resourceStorageKey(resource.id);
@@ -324,7 +256,7 @@ async function uploadInlineDataUrl(dataUrl: string) {
async function uploadLocalStorageKey(storageKey: string, payload: Record<string, unknown>) {
const blob = storageKey.startsWith("image:") ? await getImageBlob(storageKey) : await getMediaBlob(storageKey);
if (!blob) return "";
if (!blob) throw new Error(`本地媒体不存在：${storageKey}`);
const kind = blob.type.startsWith("image/") ? "image" : blob.type.startsWith("video/") ? "video" : blob.type.startsWith("audio/") ? "audio" : "file";
const resource = await uploadResourceFile(blob, kind, {
width: numberValue(payload.naturalWidth) || numberValue(payload.width),
@@ -334,27 +266,12 @@ async function uploadLocalStorageKey(storageKey: string, payload: Record<string,
return resourceStorageKey(resource.id);
}
function versionMap(items: Array<{ id: string; updatedAt?: string }>) {
return new Map<string, string>(items.map((item) => [item.id, item.updatedAt || ""]));
function requireRemoteUserDataBaseline() {
if (remoteUserDataPhase !== "ready") throw new Error("云端数据基线尚未建立，已停止写入");
}
function missingIds<T extends { id: string }>(remote: Map<string, string>, local: T[]) {
const localIds = new Set(local.map((item) => item.id));
return Array.from(remote.keys()).filter((id) => !localIds.has(id));
}
function replaceById<T extends { id: string }>(current: T[], changed: T[]) {
const changedById = new Map(changed.map((item) => [item.id, item]));
return current.map((item) => changedById.get(item.id) || item);
}
function timeValue(value?: string) {
const time = value ? Date.parse(value) : 0;
return Number.isFinite(time) ? time : 0;
}
function sameVersion(remote?: string, local?: string) {
return Boolean(remote && local) && timeValue(remote) === timeValue(local);
function sameEntitySnapshot<T>(acknowledged: T | undefined, current: T) {
return acknowledged !== undefined && (acknowledged === current || JSON.stringify(acknowledged) === JSON.stringify(current));
}
function isLocalStorageKey(value: string) {

116
web/src/stores/canvas/use-canvas-store.ts
View File

@@ -62,6 +62,13 @@ const observedCanvasPersists = new Map<string, ObservedCanvasPersist>();
const queuedCanvasPersists = new Map<string, QueuedCanvasPersist>();
const canvasSaveTimers = new Map<string, ReturnType<typeof setTimeout>>();
const canvasPersistTokens = new Map<string, number>();
type CanvasGenerationPersistenceAttempt = {
previousNodes?: CanvasNodeData[];
nodes?: CanvasNodeData[];
previousChatSessions?: CanvasAssistantSession[];
chatSessions?: CanvasAssistantSession[];
};
const pendingCanvasGenerationAttempts = new Map<string, Map<string, CanvasGenerationPersistenceAttempt>>();
type AsyncCanvasStorageLock = {
request<T>(name: string, callback: () => Promise<T>): Promise<T>;
@@ -162,7 +169,7 @@ export function rebasePendingCanvasStorePersistenceAfterGenerationCommitLocked(s
// Dedicated commit 已确认 generation stamp；用同 scope 最新内存重新投影队列，避免同节点普通编辑被旧 durable 快照替换。
queued.baseProjects = committed.state.projects;
queued.baseRevision = committed.storageRevision;
queued.state = ordinaryCanvasPersistenceState({ projects: latestMemory }, committed.state.projects);
queued.state = ordinaryCanvasPersistenceState(scope, { projects: latestMemory }, committed.state.projects);
}
export function withCanvasStorePersistenceSuppressed<T>(operation: () => T) {
@@ -174,11 +181,81 @@ export function withCanvasStorePersistenceSuppressed<T>(operation: () => T) {
}
}
export function registerCanvasGenerationPersistenceAttempt(scope: string, projectId: string, effectKey: string, attempt: CanvasGenerationPersistenceAttempt) {
const projectKey = `${scope}\0${projectId}`;
const attempts = pendingCanvasGenerationAttempts.get(projectKey) ?? new Map<string, CanvasGenerationPersistenceAttempt>();
attempts.set(effectKey, attempt);
pendingCanvasGenerationAttempts.set(projectKey, attempts);
const queued = queuedCanvasPersists.get(scope);
if (queued) {
const latestMemory = canvasMemoryStates.get(scope)?.projects ?? queued.state.projects;
const durableProjects = observedCanvasPersists.get(scope)?.projects ?? queued.baseProjects;
queued.state = ordinaryCanvasPersistenceState(scope, { projects: latestMemory }, durableProjects);
}
return () => {
if (attempts.get(effectKey) !== attempt) return;
attempts.delete(effectKey);
if (!attempts.size) pendingCanvasGenerationAttempts.delete(projectKey);
};
}
function hasUnconfirmedGenerationKey(localKeys?: string[], durableKeys?: string[]) {
return Boolean(localKeys?.some((key) => !durableKeys?.includes(key)));
}
function ordinaryCanvasProjectSnapshot(project: CanvasProject, durableProject: CanvasProject | undefined) {
function samePersistenceValue(left: unknown, right: unknown) {
return left === right || JSON.stringify(left) === JSON.stringify(right);
}
function rollbackGenerationValue(previous: unknown, attempted: unknown, live: unknown, durable: unknown): unknown {
if (samePersistenceValue(previous, attempted)) return live;
if (samePersistenceValue(live, attempted)) return durable;
if (!previous || !attempted || !live || !durable || Array.isArray(previous) || Array.isArray(attempted) || Array.isArray(live) || Array.isArray(durable) || typeof previous !== "object" || typeof attempted !== "object" || typeof live !== "object" || typeof durable !== "object") return live;
const previousRecord = previous as Record<string, unknown>;
const attemptedRecord = attempted as Record<string, unknown>;
const liveRecord = live as Record<string, unknown>;
const durableRecord = durable as Record<string, unknown>;
const result: Record<string, unknown> = { ...durableRecord };
for (const key of new Set([...Object.keys(previousRecord), ...Object.keys(attemptedRecord), ...Object.keys(liveRecord)])) {
const previousHasKey = Object.hasOwn(previousRecord, key);
const attemptedHasKey = Object.hasOwn(attemptedRecord, key);
const liveHasKey = Object.hasOwn(liveRecord, key);
if (!previousHasKey && !attemptedHasKey) {
if (liveHasKey) result[key] = liveRecord[key];
continue;
}
if (!previousHasKey && attemptedHasKey) {
if (!liveHasKey || samePersistenceValue(liveRecord[key], attemptedRecord[key])) delete result[key];
else result[key] = liveRecord[key];
continue;
}
if (previousHasKey && !attemptedHasKey) {
if (liveHasKey) result[key] = liveRecord[key];
continue;
}
if (!liveHasKey) {
delete result[key];
continue;
}
const value = rollbackGenerationValue(previousRecord[key], attemptedRecord[key], liveRecord[key], durableRecord[key]);
if (value === undefined) delete result[key];
else result[key] = value;
}
return result;
}
function pendingGenerationAttempt(scope: string, projectId: string, effectKeys?: string[]) {
const attempts = pendingCanvasGenerationAttempts.get(`${scope}\0${projectId}`);
if (!attempts) return undefined;
for (const effectKey of effectKeys || []) {
const attempt = attempts.get(effectKey);
if (attempt) return attempt;
}
return undefined;
}
function ordinaryCanvasProjectSnapshot(scope: string, project: CanvasProject, durableProject: CanvasProject | undefined) {
const durableNodes = new Map((durableProject?.nodes || []).map((node) => [node.id, node]));
const durableSessions = new Map((durableProject?.chatSessions || []).map((session) => [session.id, session]));
let changed = false;
@@ -191,7 +268,20 @@ function ordinaryCanvasProjectSnapshot(project: CanvasProject, durableProject: C
if (durableProject && hasUnconfirmedGenerationKey(localKeys, durableKeys)) {
hasUnconfirmedGeneration = true;
changed = true;
if (durableNode) nodes.push(durableNode);
if (durableNode) {
const attempt = pendingGenerationAttempt(scope, project.id, localKeys);
const previousNode = attempt?.previousNodes?.find((candidate) => candidate.id === node.id);
const attemptedNode = attempt?.nodes?.find((candidate) => candidate.id === node.id);
// durableNode comes from the observed storage snapshot. Never mutate that snapshot while
// rebuilding a failed generation, otherwise a later retry observes a partially rolled-back base.
const rolledBack = previousNode && attemptedNode
? (rollbackGenerationValue(previousNode, attemptedNode, node, durableNode) as CanvasNodeData)
: { ...durableNode, metadata: durableNode.metadata ? { ...durableNode.metadata } : undefined };
const metadata = { ...(rolledBack.metadata || {}) };
if (durableKeys?.length) metadata.generationEffectKeys = [...durableKeys];
else delete metadata.generationEffectKeys;
nodes.push({ ...rolledBack, metadata });
}
continue;
}
if (JSON.stringify(localKeys) === JSON.stringify(durableKeys)) {
@@ -211,7 +301,17 @@ function ordinaryCanvasProjectSnapshot(project: CanvasProject, durableProject: C
if (durableProject && hasUnconfirmedGenerationKey(session.generationEffectKeys, durableKeys)) {
hasUnconfirmedGeneration = true;
changed = true;
if (durableSession) chatSessions.push(durableSession);
if (durableSession) {
const attempt = pendingGenerationAttempt(scope, project.id, session.generationEffectKeys);
const previousSession = attempt?.previousChatSessions?.find((candidate) => candidate.id === session.id);
const attemptedSession = attempt?.chatSessions?.find((candidate) => candidate.id === session.id);
const rolledBack = previousSession && attemptedSession
? (rollbackGenerationValue(previousSession, attemptedSession, session, durableSession) as CanvasAssistantSession)
: { ...durableSession, generationEffectKeys: durableSession.generationEffectKeys ? [...durableSession.generationEffectKeys] : undefined };
if (durableKeys?.length) rolledBack.generationEffectKeys = [...durableKeys];
else delete rolledBack.generationEffectKeys;
chatSessions.push(rolledBack);
}
continue;
}
if (JSON.stringify(session.generationEffectKeys) === JSON.stringify(durableKeys)) {
@@ -237,16 +337,16 @@ function ordinaryCanvasProjectSnapshot(project: CanvasProject, durableProject: C
return changed ? { ...project, nodes, chatSessions } : project;
}
function ordinaryCanvasPersistenceState(state: PersistedCanvasState, durableProjects: CanvasProject[]) {
function ordinaryCanvasPersistenceState(scope: string, state: PersistedCanvasState, durableProjects: CanvasProject[]) {
const durableById = new Map(durableProjects.map((project) => [project.id, project]));
return {
projects: state.projects.map((project) => ordinaryCanvasProjectSnapshot(project, durableById.get(project.id))),
projects: state.projects.map((project) => ordinaryCanvasProjectSnapshot(scope, project, durableById.get(project.id))),
};
}
export function reconcileCanvasGenerationFailure(scope: string, durableProjects: CanvasProject[]) {
if (getActiveUserScope() !== scope) return;
const projects = ordinaryCanvasPersistenceState({ projects: useCanvasStore.getState().projects }, durableProjects).projects;
const projects = ordinaryCanvasPersistenceState(scope, { projects: useCanvasStore.getState().projects }, durableProjects).projects;
withCanvasStorePersistenceSuppressed(() => {
useCanvasStore.setState({ projects });
});
@@ -285,7 +385,7 @@ const canvasStorage: PersistStorage<CanvasStore> = {
baseProjects,
baseRevision: queued?.baseRevision ?? observed?.revision ?? 0,
// generationEffectKeys 由专用 generation durable commit 管理；普通队列只能携带已确认 stamp。
state: ordinaryCanvasPersistenceState(nextState, observed?.projects ?? baseProjects),
state: ordinaryCanvasPersistenceState(scope, nextState, observed?.projects ?? baseProjects),
token,
});
clearCanvasSaveTimer(scope);

72
web/src/stores/use-asset-store.ts
View File

@@ -52,9 +52,9 @@ type AssetStore = {
addAsset: (asset: NewAsset) => string;
addGenerationAsset: (effectKey: string, asset: NewAsset, signal?: AbortSignal) => Promise<string>;
updateAsset: (id: string, patch: Partial<Omit<Asset, "id" | "createdAt">>) => void;
removeAsset: (id: string) => void;
removeAsset: (id: string) => Promise<void>;
replaceAssets: (assets: Asset[]) => void;
cleanupImages: (extra?: unknown) => void;
cleanupImages: (extra?: unknown) => Promise<void>;
};
export const ASSET_STORE_KEY = "infinite-canvas:asset_store";
@@ -355,42 +355,52 @@ export const useAssetStore = create<AssetStore>()(
set((state) => ({
assets: state.assets.map((asset) => (asset.id === id ? ({ ...asset, ...patch, updatedAt: new Date().toISOString() } as Asset) : asset)),
})),
removeAsset: (id) =>
removeAsset: async (id) => {
let remainingAssets: Asset[] = [];
let removedAsset: Asset | undefined;
set((state) => {
removedAsset = state.assets.find((asset) => asset.id === id);
const assets = state.assets.filter((asset) => asset.id !== id);
get().cleanupImages({ assets });
remainingAssets = assets;
return { assets };
}),
});
// 没有本地媒体定位时没有需要由该删除动作回收的 Blob；跳过全库扫描，
// 避免纯文本/远程资源删除依赖浏览器 IndexedDB 驱动。
if (!removedAsset || (!collectImageStorageKeys(removedAsset).size && !collectMediaStorageKeys(removedAsset).size)) return;
await get().cleanupImages({ assets: remainingAssets });
},
replaceAssets: (assets) => set({ assets }),
cleanupImages: (extra) => {
cleanupImages: async (extra) => {
const scope = getActiveUserScope();
const frozenExtraImageKeys = collectImageStorageKeys(extra);
const frozenExtraMediaKeys = collectMediaStorageKeys(extra);
window.setTimeout(async () => {
await withGenerationArtifactCommitLock(scope, async () => {
// 固定锁序：artifact -> Canvas（释放）-> Asset，避免跨 store 锁重入。
const canvasProjects = await withCanvasStorePersistenceLock(scope, async () => {
await commitPendingCanvasStorePersistenceLocked(scope);
const durableCanvas = parseCanvasStorageDocument(await localForageStorageForScope(scope).getItem(CANVAS_STORE_KEY));
return pendingCanvasStorePersistence(scope)?.projects ?? durableCanvas.state.projects;
});
await withGenerationAssetStorageLock(scope, async () => {
await commitPendingAssetStorePersistenceLocked(scope);
const durableAssets = (await readPersistedAssetDocumentForScope(scope)).state.assets;
const references = { projects: canvasProjects, assets: durableAssets };
const imageKeys = new Set([...frozenExtraImageKeys, ...collectImageStorageKeys(references)]);
const mediaKeys = new Set([...frozenExtraMediaKeys, ...collectMediaStorageKeys(references)]);
await cleanupUnusedImages(
[...imageKeys].map((storageKey) => ({ storageKey })),
scope,
);
await cleanupUnusedMedia(
[...mediaKeys].map((storageKey) => ({ storageKey })),
scope,
);
});
});
}, 0);
await new Promise<void>((resolve, reject) => {
window.setTimeout(() =>
withGenerationArtifactCommitLock(scope, async () => {
// 固定锁序：artifact -> Canvas（释放）-> Asset，避免跨 store 锁重入。
const canvasProjects = await withCanvasStorePersistenceLock(scope, async () => {
await commitPendingCanvasStorePersistenceLocked(scope);
const durableCanvas = parseCanvasStorageDocument(await localForageStorageForScope(scope).getItem(CANVAS_STORE_KEY));
return pendingCanvasStorePersistence(scope)?.projects ?? durableCanvas.state.projects;
});
await withGenerationAssetStorageLock(scope, async () => {
await commitPendingAssetStorePersistenceLocked(scope);
const durableAssets = (await readPersistedAssetDocumentForScope(scope)).state.assets;
const references = { projects: canvasProjects, assets: durableAssets };
const imageKeys = new Set([...frozenExtraImageKeys, ...collectImageStorageKeys(references)]);
const mediaKeys = new Set([...frozenExtraMediaKeys, ...collectMediaStorageKeys(references)]);
await cleanupUnusedImages(
[...imageKeys].map((storageKey) => ({ storageKey })),
scope,
);
await cleanupUnusedMedia(
[...mediaKeys].map((storageKey) => ({ storageKey })),
scope,
);
});
}).then(resolve, reject),
);
});
},
}),
{