diff --git a/backend/internal/service/resource_delete.go b/backend/internal/service/resource_delete.go
index 89839da17..b8a9808bf 100644
--- a/backend/internal/service/resource_delete.go
+++ b/backend/internal/service/resource_delete.go
@@ -72,18 +72,40 @@ func (s *Service) deleteUserAssetWithResources(userID string, assetID string) er
 		if snapshotErr != nil {
 			return snapshotErr
 		}
+		sharedAssetResourceIDs := map[string]struct{}{}
 		for _, reference := range snapshot.Direct {
 			if _, exists := ownedIDSet[reference.ResourceID]; exists {
+				if reference.Kind == "素材" {
+					sharedAssetResourceIDs[reference.ResourceID] = struct{}{}
+					continue
+				}
 				usages = append(usages, resourceUsage{Kind: reference.Kind, ID: reference.ID, Title: reference.Title})
 			}
 		}
 		for _, document := range snapshot.Documents {
-			primaryReferenced := documentReferencesResources(document.PrimaryJSON, ownedIDSet)
-			secondaryReferenced := documentReferencesResources(document.SecondaryJSON, ownedIDSet)
-			if primaryReferenced || secondaryReferenced {
+			referencedIDs := documentReferencedResourceIDs(document.PrimaryJSON, ownedIDSet)
+			for resourceID := range documentReferencedResourceIDs(document.SecondaryJSON, ownedIDSet) {
+				referencedIDs[resourceID] = struct{}{}
+			}
+			if len(referencedIDs) > 0 {
+				if document.Kind == "素材" {
+					for resourceID := range referencedIDs {
+						sharedAssetResourceIDs[resourceID] = struct{}{}
+					}
+					continue
+				}
 				usages = append(usages, resourceUsage{Kind: document.Kind, ID: document.ID, Title: document.Title})
 			}
 		}
+		if len(sharedAssetResourceIDs) > 0 {
+			deletableOwnedIDs := ownedIDs[:0]
+			for _, resourceID := range ownedIDs {
+				if _, shared := sharedAssetResourceIDs[resourceID]; !shared {
+					deletableOwnedIDs = append(deletableOwnedIDs, resourceID)
+				}
+			}
+			ownedIDs = deletableOwnedIDs
+		}
 	}
 	if message := resourceOccupiedMessage(usages); message != "" {
 		return BadAuthRequest(message)
@@ -233,13 +255,18 @@ func isResourceLocatorField(field string) bool {
 }
 
 func documentReferencesResources(raw string, resourceIDs map[string]struct{}) bool {
+	return len(documentReferencedResourceIDs(raw, resourceIDs)) > 0
+}
+
+func documentReferencedResourceIDs(raw string, resourceIDs map[string]struct{}) map[string]struct{} {
+	matched := map[string]struct{}{}
 	raw = strings.TrimSpace(raw)
 	if raw == "" || len(resourceIDs) == 0 {
-		return false
+		return matched
 	}
+	found := map[string]struct{}{}
 	var value any
 	if err := json.Unmarshal([]byte(raw), &value); err == nil {
-		found := map[string]struct{}{}
 		if scalar, ok := value.(string); ok {
 			if resourceID := canvasResourceID(scalar); resourceID != "" {
 				found[resourceID] = struct{}{}
@@ -247,19 +274,16 @@ func documentReferencesResources(raw string, resourceIDs map[string]struct{}) bo
 		} else {
 			walkReferenceDocument(value, "", found)
 		}
-		for resourceID := range found {
-			if _, exists := resourceIDs[resourceID]; exists {
-				return true
-			}
+	} else if resourceID := canvasResourceID(raw); resourceID != "" {
+		// cover_url 等数据库列可以直接保存一个资源 URL，而不是 JSON。
+		found[resourceID] = struct{}{}
+	}
+	for resourceID := range found {
+		if _, exists := resourceIDs[resourceID]; exists {
+			matched[resourceID] = struct{}{}
 		}
-		return false
 	}
-	// cover_url 等数据库列可以直接保存一个资源 URL，而不是 JSON。
-	if resourceID := canvasResourceID(raw); resourceID != "" {
-		_, exists := resourceIDs[resourceID]
-		return exists
-	}
-	return false
+	return matched
 }
 
 func sortedReferenceIDs(values map[string]struct{}) []string {
diff --git a/backend/internal/service/resource_delete_test.go b/backend/internal/service/resource_delete_test.go
index d8e63c133..8e2b15538 100644
--- a/backend/internal/service/resource_delete_test.go
+++ b/backend/internal/service/resource_delete_test.go
@@ -164,6 +164,67 @@ func TestDeleteAssetDatabaseFailureLeavesPhysicalObjectAndNoOutbox(t *testing.T)
 	}
 }
 
+func TestDeleteAssetKeepsResourceSharedByIndependentAsset(t *testing.T) {
+	svc, db, _ := newResourceDeletionTestService(t)
+	resource := model.Resource{ID: "resource-shared", UserID: "user-1", Provider: "local", ObjectKey: "users/user-1/image/shared.png", Status: model.ResourceStatusReady}
+	target := model.Asset{ID: "asset-target", UserID: "user-1", Title: "待删除素材", PayloadJSON: `{"data":{"storageKey":"resource:resource-shared"}}`}
+	independent := model.Asset{ID: "asset-independent", UserID: "user-1", Title: "生成图片", PayloadJSON: `{"data":{"storageKey":"resource:resource-shared"}}`}
+	for _, item := range []any{&resource, &target, &independent} {
+		if err := db.Create(item).Error; err != nil {
+			t.Fatal(err)
+		}
+	}
+
+	if err := svc.DeleteUserAsset("user-1", target.ID); err != nil {
+		t.Fatalf("DeleteUserAsset() error = %v", err)
+	}
+
+	var targetCount, independentCount, resourceCount, jobCount int64
+	if err := db.Model(&model.Asset{}).Where("id = ?", target.ID).Count(&targetCount).Error; err != nil {
+		t.Fatal(err)
+	}
+	if err := db.Model(&model.Asset{}).Where("id = ?", independent.ID).Count(&independentCount).Error; err != nil {
+		t.Fatal(err)
+	}
+	if err := db.Model(&model.Resource{}).Where("id = ?", resource.ID).Count(&resourceCount).Error; err != nil {
+		t.Fatal(err)
+	}
+	if err := db.Model(&model.ResourceDeletionJob{}).Count(&jobCount).Error; err != nil {
+		t.Fatal(err)
+	}
+	if targetCount != 0 || independentCount != 1 || resourceCount != 1 || jobCount != 0 {
+		t.Fatalf("unexpected delete result: target=%d independent=%d resource=%d jobs=%d", targetCount, independentCount, resourceCount, jobCount)
+	}
+}
+
+func TestDeleteAssetStillRejectsLiveCanvasResourceReference(t *testing.T) {
+	svc, db, _ := newResourceDeletionTestService(t)
+	resource := model.Resource{ID: "resource-canvas", UserID: "user-1", Provider: "local", ObjectKey: "users/user-1/image/canvas.png", Status: model.ResourceStatusReady}
+	asset := model.Asset{ID: "asset-canvas", UserID: "user-1", Title: "画布素材", PayloadJSON: `{"data":{"storageKey":"resource:resource-canvas"}}`}
+	canvas := model.CanvasProject{ID: "canvas-live", UserID: "user-1", Title: "仍在使用的画布", PayloadJSON: `{"nodes":[{"data":{"storageKey":"resource:resource-canvas"}}]}`}
+	for _, item := range []any{&resource, &asset, &canvas} {
+		if err := db.Create(item).Error; err != nil {
+			t.Fatal(err)
+		}
+	}
+
+	err := svc.DeleteUserAsset("user-1", asset.ID)
+	if err == nil || !strings.Contains(err.Error(), "画布「仍在使用的画布」") {
+		t.Fatalf("DeleteUserAsset() error = %v, want live canvas reference", err)
+	}
+
+	var assetCount, resourceCount int64
+	if err := db.Model(&model.Asset{}).Where("id = ?", asset.ID).Count(&assetCount).Error; err != nil {
+		t.Fatal(err)
+	}
+	if err := db.Model(&model.Resource{}).Where("id = ?", resource.ID).Count(&resourceCount).Error; err != nil {
+		t.Fatal(err)
+	}
+	if assetCount != 1 || resourceCount != 1 {
+		t.Fatalf("blocked delete changed data: asset=%d resource=%d", assetCount, resourceCount)
+	}
+}
+
 func TestResourceDeletionWorkerRemovesObjectAndCompletesOutbox(t *testing.T) {
 	svc, db, dataDir := newResourceDeletionTestService(t)
 	objectKey := "users/user-1/image/queued.png"
diff --git a/docs/content/docs/progress/pending-test.mdx b/docs/content/docs/progress/pending-test.mdx
index 6901d2b8e..da88cfc4f 100644
--- a/docs/content/docs/progress/pending-test.mdx
+++ b/docs/content/docs/progress/pending-test.mdx
@@ -126,6 +126,14 @@ description: 影策已实现功能的手工验证清单与未确认边界
 - [ ] 在任务运行中和任务刚完成尚未写回结果时分别刷新项目，确认对应章节继续显示累计计时或“已生成”，成功结果会自动写回；再检查无新角色、生成失败和重新生成替换确认场景的按钮恢复、错误提示和旧分镜保护。
 - [ ] 在浅色、深色、常规桌面和窄屏下检查全局头部：项目名、状态、项目导航、右侧全局操作和新建画布/章节选择不重叠，导航可横向滚动，内容区高度确实增加。
 
+## 画布生成副本与结果落点
+
+- [x] 图片、视频节点右键菜单新增“创建生成副本”：副本保留提示词、模型参数、首尾帧设置和原有参考入边，但不加入原节点的参数版本族。
+- [x] 图片与视频生成统一使用结构化结果落点；生成副本、复制粘贴节点和参数变体直接回填当前节点，普通已有媒体再次生成继续创建新版本，不再依赖节点标题判断。
+- [x] 参考入边复用、图片/视频原地生成策略专项测试、TypeScript 检查与前端生产构建通过。
+- [ ] 分别对带一张、多张参考图及首尾帧设置的图片和视频使用“创建生成副本”，确认副本提示词、模型参数、参考缩略图和连线与原节点一致；连续生成多次时只更新副本自身，不新增下一级节点。
+- [ ] 对普通已有图片、普通已有视频、参数变体和旧版复制节点分别生成，确认普通媒体创建并行版本，参数变体和复制节点原地更新；刷新画布后结果落点不改变。
+
 ## 画布生成结果命名
 
 - [x] 快捷键复制节点生成图片后保留 `_copyN`，参数变体生成图片后保留 `A/B/C/D` 版本标识；批量输出追加结果序号。
@@ -574,6 +582,35 @@ description: 影策已实现功能的手工验证清单与未确认边界
 - [ ] 在拉取镜像、创建备份、迁移、启动和健康检查阶段分别模拟失败，确认停服前失败不会改变运行版本，停服后失败进入回退，回退失败明确显示“需人工介入”。
 - [ ] 更新期间刷新页面、关闭浏览器和 Backend 短暂不可用，确认宿主机操作不中断，恢复后日志与最终状态完整。
 
+## 大型画布媒体节点性能
+
+大型画布已修复 LibTV 图片强制并发加载、缩略图反向覆盖原始尺寸、节点操作 Context 失稳和小范围平移频繁卸载媒体节点的问题；以下场景仍需使用真实大型画布确认：
+
+- [x] 前端专项测试覆盖 LibTV 延迟加载、尺寸回写保护、节点渲染滞回、Context 稳定引用，以及缩放/平移期间不得隐藏节点壳；TypeScript 检查与生产构建通过。
+- [ ] 导入包含数百个图片、视频节点的 LibTV 画布，确认初次打开不会同时加载全部图片，平移和反向平移时已显示图片不再反复闪烁或重新解码。
+- [ ] 在自动、性能、画质三种模式下分别缩放和平移，确认操作期间视口内节点持续可见，远离视口的节点仍会卸载，选中、拖动、连线和节点尺寸保持正确。
+- [ ] 使用浏览器 Performance 与 Network 面板记录导入前后数据，确认平移期间主线程长任务、图片并发请求和节点重复渲染明显下降。
+
+## 大型画布进入详情性能
+
+画布列表进入详情已增加详情模块预取、点击即时反馈和可中断的数据恢复渲染；节点引用改为一次建图索引，列表封面结果按节点数组缓存，避免延迟随节点数快速放大。以下场景仍需使用真实大型画布确认：
+
+- [x] 专项测试覆盖详情模块预取、点击反馈时序、批量引用索引语义；TypeScript 检查与生产构建通过。
+- [ ] 首次打开应用后悬停并点击包含数百节点的 LibTV 画布，确认卡片立即出现“正在打开”，随后进入详情加载态，不再数秒无反馈。
+- [ ] 分别使用空画布、100 节点和数百节点画布记录从点击到详情可见的耗时，确认增长接近线性且列表返回后再次进入更快。
+
+## 画布保存被历史素材阻断
+
+- [x] 素材远端同步会在发送副本中移除超过后端约束的历史 `primaryVersionId`，合法项目资产版本 UUID 原样保留，本地素材对象不被修改。
+- [x] 后端 36 字符强校验保持不变；前端专项测试覆盖非法历史值清理、合法 UUID 保留与本地对象不可变。
+- [ ] 使用曾出现“素材主版本 ID 不能超过 36 个字符”的账号编辑并保存画布，确认云端同步成功，刷新后画布布局仍然存在。
+
+## 独立素材共享文件删除
+
+- [x] 素材删除不再把另一条素材共用同一资源文件误判为素材实体引用；删除当前素材时保留其他素材仍使用的资源记录与物理文件。
+- [x] 项目、镜头等真实业务引用仍会阻止素材删除；后端专项测试覆盖两个独立素材共享同一资源的删除场景。
+- [ ] 在素材库删除曾由同一生成结果产生的重复素材，确认当前素材删除成功，其他素材仍可预览和下载；实际仍关联项目或镜头的素材继续显示引用来源。
+
 ## 管理后台存储资源
 
 管理后台已新增资源列表、筛选、去重容量统计、预览下载和安全批量删除；以下场景仍需使用真实资源数据确认：
diff --git a/web/package.json b/web/package.json
index b8bb28ee2..1491c6a24 100644
--- a/web/package.json
+++ b/web/package.json
@@ -9,7 +9,7 @@
         "build": "bun run build:bridge && tsc --noEmit && vite build",
         "pretest": "bun test test/admin-ui-regressions.test.ts test/password-reset.test.ts test/oss-settings.test.ts",
         "typecheck": "tsc --noEmit",
-        "test:canvas": "bun test test/canvas-media-performance.test.ts test/canvas-node-title-interaction.test.ts",
+        "test:canvas": "bun test test/canvas-media-performance.test.ts test/canvas-node-title-interaction.test.ts test/canvas-spatial-index.test.ts",
         "test": "bun test test/api-request.test.ts test/video-api-contracts.test.ts test/image-api-contracts.test.ts test/channel-model-catalog.test.ts test/model-protocols.test.ts test/model-capabilities.test.ts test/agent-prompt-cache.test.ts test/canvas-agent-context.test.ts test/canvas-batch-connection.test.ts test/canvas-character-reference.test.ts test/canvas-document.test.ts test/canvas-drawing-engine.test.ts test/canvas-emotion-edit-plan.test.ts test/canvas-extension-nodes.test.ts test/canvas-folder.test.ts test/canvas-generation-layout.test.ts test/canvas-generation-submission.test.ts test/canvas-image-batch-retry.test.ts test/canvas-keyboard.test.ts test/canvas-node-generation-mentions.test.ts test/canvas-node-search.test.ts test/canvas-leafer-viewport.test.ts test/canvas-media-download.test.ts test/canvas-local-runtime.test.ts test/canvas-model-policy.test.ts test/canvas-resource-mention-editor.test.ts test/canvas-resource-references.test.ts test/canvas-storyboard-assets.test.ts test/canvas-storyboard-references.test.ts test/canvas-node-config-reset.test.ts test/canvas-node-registry.test.ts test/canvas-video-frame.test.ts test/canvas-video-regeneration.test.ts test/canvas-video-timeline-segments.test.ts test/create-canvas-handoff.test.ts test/create-library-button.test.ts test/creation-references.test.ts test/director-transform-semantics.test.ts test/director-bone-precedence.test.ts test/director-gesture-transaction.test.ts test/director-transaction-lifecycle.test.ts test/director-session-authority.test.ts test/director-placement.test.ts test/director-resources.test.ts test/director-recovery.test.ts test/director-node-preview.test.ts test/generation-asset-repository.node.test.ts test/generation-storage-consistency.test.ts test/generation-task-durability.node.test.ts test/generation-task-local.test.ts test/generation-task-materializer.test.ts test/task-media-fallback.test.ts test/user-scoped-generation-persistence.test.ts test/local-channel-permission.test.ts test/local-channel-runtime-projection.node.test.mjs test/local-channel-task-center.node.test.mjs test/local-channel-ui.node.test.mjs test/local-cli-settings.test.ts test/local-dreamina-cli.test.ts test/local-dreamina-generation.test.ts test/local-dreamina-model-catalog.test.ts test/local-runtime-bootstrap.test.ts test/local-runtime-connection.test.ts test/local-runtime.test.ts test/client-id.test.ts test/grok-image-prompt-limit.test.ts test/image-resolution-tiers.test.ts test/gemini-image.test.ts test/libtv-import.test.ts test/timeline-to-ffmpeg.test.ts test/canvas-video-segment-args.test.ts test/tapnow-import.test.ts test/prompt-optimizer-drawer.test.ts test/director-save-coordinator.test.ts test/director-save-wiring.test.ts test/director-diagnostics.test.ts test/director-repro-runtime.test.ts test/director-diagnostics-recorder.test.ts test/director-keyframe-editing.test.ts test/director-shortcuts.test.ts test/director-keyframe-delete-wiring.test.ts test/director-templates.test.ts test/director-modes.test.ts test/director-template-mode-wiring.test.ts test/director-view-modes.test.ts && bun test test/local-dreamina-cross-runtime.test.ts",
         "test:director:e2e": "bun scripts/director-p0-chrome-e2e.mjs",
         "start": "vite preview --host 0.0.0.0 --port 3000",
diff --git a/web/src/components/canvas/canvas-context-menu.tsx b/web/src/components/canvas/canvas-context-menu.tsx
index c7cc2d4e5..f332c6fea 100644
--- a/web/src/components/canvas/canvas-context-menu.tsx
+++ b/web/src/components/canvas/canvas-context-menu.tsx
@@ -38,6 +38,7 @@ type CanvasNodeContextMenuProps = {
     onRedo: () => void;
     onPaste: () => void;
     onCopyNode: () => void;
+    onCreateGenerationCopy: () => void;
     onDuplicate: () => void;
     onDelete: () => void;
     onSaveAsset: () => void;
@@ -72,6 +73,7 @@ export function CanvasNodeContextMenu({
     onRedo,
     onPaste,
     onCopyNode,
+    onCreateGenerationCopy,
     onDuplicate,
     onDelete,
     onSaveAsset,
@@ -201,6 +203,7 @@ export function CanvasNodeContextMenu({
                                     <MenuButton icon={<Copy />} label="复制节点" shortcut="⌘C" onClick={() => runAction(onCopyNode)} />
                                     {isImage ? <MenuButton icon={<Clipboard />} label="复制图片" disabled={!hasNodeContent} onClick={() => runAction(onCopyContent)} /> : null}
                                     <MenuButton icon={<Link2 />} label={isImage ? "复制图片地址" : "复制视频地址"} disabled={!canCopyMediaUrl} onClick={() => runAction(onCopyMediaUrl)} />
+                                    <MenuButton icon={<Copy />} label="创建生成副本" onClick={() => runAction(onCreateGenerationCopy)} />
                                     <MenuButton icon={<Layers3 />} label="创建参数变体" shortcut="⌘D" onClick={() => runAction(onDuplicate)} />
                                     <MenuButton icon={<Trash2 />} label="删除节点" danger onClick={() => runAction(onDelete)} />
                                 </>
diff --git a/web/src/components/canvas/canvas-folder-card.tsx b/web/src/components/canvas/canvas-folder-card.tsx
index 328c08a4c..9b5d36465 100644
--- a/web/src/components/canvas/canvas-folder-card.tsx
+++ b/web/src/components/canvas/canvas-folder-card.tsx
@@ -1,5 +1,5 @@
 import { Dropdown, Input } from "antd";
-import { Download, MoreHorizontal, Pencil, Trash2 } from "lucide-react";
+import { Download, LoaderCircle, MoreHorizontal, Pencil, Trash2 } from "lucide-react";
 import type { KeyboardEvent } from "react";
 
 import { ProjectPreview } from "@/components/canvas/canvas-project-card";
@@ -12,10 +12,12 @@ type CanvasFolderCardProps = {
     project: CanvasProject;
     projectName?: string;
     onClick: () => void;
+    onPrefetch?: () => void;
+    opening?: boolean;
 };
 
 /** 画布库中的文件夹封面：单一卡片表面承载预览和信息，避免相邻卡片互相侵入。 */
-export function CanvasFolderCard({ project, projectName, onClick }: CanvasFolderCardProps) {
+export function CanvasFolderCard({ project, projectName, onClick, onPrefetch, opening = false }: CanvasFolderCardProps) {
     const renameProject = useCanvasStore((state) => state.renameProject);
     const selectedIds = useCanvasUiStore((state) => state.selectedProjectIds);
     const editingId = useCanvasUiStore((state) => state.editingProjectId);
@@ -42,10 +44,11 @@ export function CanvasFolderCard({ project, projectName, onClick }: CanvasFolder
     };
 
     return (
-        <article className={cn("canvas-folder-card", selected && "is-selected", editing && "is-editing")}>
-            <div className="canvas-folder-open" role="button" tabIndex={0} aria-label={`打开画布 ${project.title}`} onClick={() => !editing && onClick()} onKeyDown={handleOpenKeyDown}>
+        <article className={cn("canvas-folder-card", selected && "is-selected", editing && "is-editing", opening && "is-opening")} onPointerEnter={onPrefetch} onPointerDown={onPrefetch} onFocusCapture={onPrefetch}>
+            <div className="canvas-folder-open" role="button" tabIndex={0} aria-label={`打开画布 ${project.title}`} aria-busy={opening} onClick={() => !editing && !opening && onClick()} onKeyDown={handleOpenKeyDown}>
                 <div className="canvas-folder-preview" aria-hidden="true">
                     <ProjectPreview project={project} preferLatestImage />
+                    {opening ? <div className="canvas-folder-opening"><LoaderCircle className="size-5 animate-spin" /><span>正在打开</span></div> : null}
                 </div>
                 <div className="canvas-folder-body">
                     <div className="canvas-folder-heading-row">
diff --git a/web/src/components/canvas/canvas-leafer-graphics-layer.tsx b/web/src/components/canvas/canvas-leafer-graphics-layer.tsx
index 47cea0404..2a55a75d9 100644
--- a/web/src/components/canvas/canvas-leafer-graphics-layer.tsx
+++ b/web/src/components/canvas/canvas-leafer-graphics-layer.tsx
@@ -3,7 +3,7 @@ import { Group, Leafer, Path, Rect } from "leafer-ui";
 
 import { activeConnectionPath, canvasConnectionPath } from "@/components/canvas/canvas-connections";
 import type { CanvasBatchConnectionPreview } from "@/lib/canvas/canvas-batch-connection";
-import { subscribeCanvasGraphicsViewportPreview, subscribeCanvasSelectionPreview } from "@/lib/canvas/canvas-live-viewport";
+import { subscribeCanvasGraphicsViewportPreview, subscribeCanvasNodeDragPreview, subscribeCanvasSelectionPreview, type CanvasNodeDragPreview } from "@/lib/canvas/canvas-live-viewport";
 import { calculateCanvasPreviewTransform, sameCanvasViewport, shouldRebaseCanvasRaster } from "@/lib/canvas/canvas-leafer-viewport";
 import type { CanvasTheme } from "@/lib/canvas-theme";
 import type { CanvasDisplayConnection, CanvasNodeData, ConnectionHandle, Position, SelectionBox, ViewportTransform } from "@/types/canvas";
@@ -37,6 +37,18 @@ type LeaferScene = {
 
 type UnderlayScene = LeaferScene & {
     connections: Group;
+    connectionEntries: Map<string, ConnectionSceneEntry>;
+    connectionIdsByNodeId: Map<string, Set<string>>;
+    dragPreview: CanvasNodeDragPreview | null;
+    dragPreviewConnectionIds: Set<string>;
+};
+
+type ConnectionSceneEntry = {
+    path: Path;
+    connection: CanvasDisplayConnection["connection"];
+    from: CanvasNodeData;
+    to: CanvasNodeData;
+    signature: string;
 };
 
 type OverlayScene = LeaferScene & {
@@ -104,11 +116,15 @@ export function CanvasLeaferGraphicsLayer(props: CanvasLeaferGraphicsLayerProps)
         const unsubscribeSelection = subscribeCanvasSelectionPreview(container, (selection) => {
             syncSelection(overlay.selection, selection, propsRef.current.theme);
         });
+        const unsubscribeNodeDrag = subscribeCanvasNodeDragPreview(container, (preview) => {
+            applyConnectionDragPreview(underlay, propsRef.current, preview);
+        });
         resize();
 
         return () => {
             unsubscribe();
             unsubscribeSelection();
+            unsubscribeNodeDrag();
             resizeObserver.disconnect();
             window.removeEventListener("resize", resize);
             underlay.leafer.destroy(true);
@@ -173,7 +189,7 @@ function createUnderlayScene(host: HTMLDivElement): UnderlayScene {
     const connections = new Group({ hittable: false });
     world.add(connections);
     leafer.add(world);
-    return { leafer, world, host, connections };
+    return { leafer, world, host, connections, connectionEntries: new Map(), connectionIdsByNodeId: new Map(), dragPreview: null, dragPreviewConnectionIds: new Set() };
 }
 
 function createOverlayScene(host: HTMLDivElement): OverlayScene {
@@ -194,22 +210,109 @@ function createOverlayScene(host: HTMLDivElement): OverlayScene {
 }
 
 function rebuildConnections(scene: UnderlayScene, props: CanvasLeaferGraphicsLayerProps) {
-    scene.connections.removeAll(true);
-    props.displayConnections.forEach(({ connection, from, to }) => {
+    const nextIds = new Set(props.displayConnections.map(({ connection }) => connection.id));
+    for (const [connectionId, entry] of scene.connectionEntries) {
+        if (nextIds.has(connectionId)) continue;
+        entry.path.remove();
+        scene.connectionEntries.delete(connectionId);
+    }
+
+    scene.connectionIdsByNodeId.clear();
+    const previewIds = scene.dragPreview ? scene.dragPreview.nodeIds : null;
+    for (const { connection, from, to } of props.displayConnections) {
         const emphasized = props.selectedConnectionId === connection.id || props.relatedConnectionIds.has(connection.id);
-        const path = new Path({
-            path: canvasConnectionPath(connection, from, to, props.scriptScrollTopById[from.id] || 0, props.scriptScrollTopById[to.id] || 0).pathD,
-            stroke: emphasized ? props.theme.accent.primary : props.theme.node.muted,
-            strokeWidth: emphasized ? 1.6 : 1,
-            strokeScaleFixed: true,
-            strokeCap: "round",
-            opacity: emphasized ? 0.52 : 0.24,
-            hittable: false,
-        });
-        scene.connections.add(path);
+        const signature = connectionSceneSignature(connection, from, to, props, emphasized);
+        let entry = scene.connectionEntries.get(connection.id);
+        if (!entry) {
+            const path = new Path({ hittable: false });
+            scene.connections.add(path);
+            entry = { path, connection, from, to, signature: "" };
+            scene.connectionEntries.set(connection.id, entry);
+        }
+        entry.connection = connection;
+        entry.from = from;
+        entry.to = to;
+        if (entry.signature !== signature || scene.dragPreview) {
+            syncConnectionPath(entry, props, scene.dragPreview, previewIds);
+            entry.signature = signature;
+        }
+        for (const nodeId of [from.id, to.id]) {
+            const connectionIds = scene.connectionIdsByNodeId.get(nodeId) || new Set<string>();
+            connectionIds.add(connection.id);
+            scene.connectionIdsByNodeId.set(nodeId, connectionIds);
+        }
+    }
+
+    scene.dragPreviewConnectionIds = collectPreviewConnectionIds(scene, scene.dragPreview);
+}
+
+function connectionSceneSignature(connection: CanvasDisplayConnection["connection"], from: CanvasNodeData, to: CanvasNodeData, props: CanvasLeaferGraphicsLayerProps, emphasized: boolean) {
+    return [
+        connection.id,
+        connection.fromNodeId,
+        connection.toNodeId,
+        connection.fromHandleId || "",
+        connection.toHandleId || "",
+        from.id,
+        from.position.x,
+        from.position.y,
+        from.width,
+        from.height,
+        to.id,
+        to.position.x,
+        to.position.y,
+        to.width,
+        to.height,
+        props.scriptScrollTopById[from.id] || 0,
+        props.scriptScrollTopById[to.id] || 0,
+        emphasized ? "active" : "idle",
+        props.theme.accent.primary,
+        props.theme.node.muted,
+    ].join("|");
+}
+
+function syncConnectionPath(entry: ConnectionSceneEntry, props: CanvasLeaferGraphicsLayerProps, preview: CanvasNodeDragPreview | null, previewIds: ReadonlySet<string> | null = preview?.nodeIds || null) {
+    const from = translatePreviewNode(entry.from, previewIds, preview);
+    const to = translatePreviewNode(entry.to, previewIds, preview);
+    const emphasized = props.selectedConnectionId === entry.connection.id || props.relatedConnectionIds.has(entry.connection.id);
+    entry.path.set({
+        path: canvasConnectionPath(entry.connection, from, to, props.scriptScrollTopById[entry.from.id] || 0, props.scriptScrollTopById[entry.to.id] || 0).pathD,
+        stroke: emphasized ? props.theme.accent.primary : props.theme.node.muted,
+        strokeWidth: emphasized ? 1.6 : 1,
+        strokeScaleFixed: true,
+        strokeCap: "round",
+        opacity: emphasized ? 0.52 : 0.24,
+        hittable: false,
     });
 }
 
+function translatePreviewNode(node: CanvasNodeData, previewIds: ReadonlySet<string> | null, preview: CanvasNodeDragPreview | null) {
+    if (!preview || !previewIds?.has(node.id) || (preview.x === 0 && preview.y === 0)) return node;
+    return { ...node, position: { x: node.position.x + preview.x, y: node.position.y + preview.y } };
+}
+
+function collectPreviewConnectionIds(scene: UnderlayScene, preview: CanvasNodeDragPreview | null) {
+    const connectionIds = new Set<string>();
+    if (!preview) return connectionIds;
+    for (const nodeId of preview.nodeIds) {
+        scene.connectionIdsByNodeId.get(nodeId)?.forEach((connectionId) => connectionIds.add(connectionId));
+    }
+    return connectionIds;
+}
+
+function applyConnectionDragPreview(scene: UnderlayScene, props: CanvasLeaferGraphicsLayerProps, preview: CanvasNodeDragPreview | null) {
+    const affectedConnectionIds = new Set(scene.dragPreviewConnectionIds);
+    const previewIds = preview?.nodeIds || null;
+    collectPreviewConnectionIds(scene, preview).forEach((connectionId) => affectedConnectionIds.add(connectionId));
+    scene.dragPreview = preview;
+    scene.dragPreviewConnectionIds = collectPreviewConnectionIds(scene, preview);
+    for (const connectionId of affectedConnectionIds) {
+        const entry = scene.connectionEntries.get(connectionId);
+        if (!entry) continue;
+        syncConnectionPath(entry, props, preview, previewIds);
+    }
+}
+
 function syncOverlayContent(scene: OverlayScene, props: CanvasLeaferGraphicsLayerProps, viewportScale: number) {
     const selection = props.selectionBox;
     scene.selection.visible = Boolean(selection);
diff --git a/web/src/components/canvas/canvas-node-action-context.ts b/web/src/components/canvas/canvas-node-action-context.ts
index 8029ac512..0e6174b11 100644
--- a/web/src/components/canvas/canvas-node-action-context.ts
+++ b/web/src/components/canvas/canvas-node-action-context.ts
@@ -11,6 +11,10 @@ export type CanvasNodeActionContextValue = {
     deleteNode?: (node: CanvasNodeData) => void;
     /** 合并式更新节点 metadata；扩展节点（如调色）在自己的面板里改参数时用。 */
     updateMetadata?: (nodeId: string, patch: CanvasNodeMetadata) => void;
+    /** 更新单个节点；媒体尺寸回写使用它，避免触发全量节点时间戳归并。 */
+    updateNode?: (nodeId: string, update: (node: CanvasNodeData) => CanvasNodeData) => void;
+    /** 合并延迟提交媒体测量结果，避免首屏图片同时解码时反复刷新画布。 */
+    updateMediaNode?: (nodeId: string, update: (node: CanvasNodeData) => CanvasNodeData) => void;
     /** 改节点宽高；图片首次量到真实尺寸后按比例校正节点用。 */
     resizeNode?: (nodeId: string, size: { width: number; height: number }) => void;
     /** 打开节点级肖像排查工作台；任务生命周期由画布页面持有。 */
diff --git a/web/src/components/canvas/canvas-node-content.tsx b/web/src/components/canvas/canvas-node-content.tsx
index ce9e09955..f3f268977 100644
--- a/web/src/components/canvas/canvas-node-content.tsx
+++ b/web/src/components/canvas/canvas-node-content.tsx
@@ -419,7 +419,7 @@ function EmptyImageContent({ node, theme, isBatchRoot, batchCount, batchExpanded
 
 function VideoNodeContent({ node, theme, reduceMediaEffects, mediaActive = false, hydrateMediaPreview = false }: CanvasNodeContentProps) {
     const playerBoxRef = useRef<HTMLDivElement>(null);
-    const { updateMetadata } = useCanvasNodeActions();
+    const { updateMediaNode } = useCanvasNodeActions();
     const { url, loading } = useNodeResourceUrl(node, mediaActive);
     const subtitleEntries = node.metadata?.subtitleEntries || [];
     const subtitleStyle = node.metadata?.subtitleStyle || createDefaultSubtitleStyle();
@@ -434,7 +434,7 @@ function VideoNodeContent({ node, theme, reduceMediaEffects, mediaActive = false
             if (video.videoWidth <= 0 || video.videoHeight <= 0) return;
             setVideoSize({ width: video.videoWidth, height: video.videoHeight });
             if (node.metadata?.naturalWidth !== video.videoWidth || node.metadata?.naturalHeight !== video.videoHeight) {
-                updateMetadata?.(node.id, { naturalWidth: video.videoWidth, naturalHeight: video.videoHeight });
+                updateMediaNode?.(node.id, (current) => ({ ...current, metadata: { ...current.metadata, naturalWidth: video.videoWidth, naturalHeight: video.videoHeight } }));
             }
         };
         video.addEventListener("loadedmetadata", handleLoadedMetadata);
@@ -446,7 +446,7 @@ function VideoNodeContent({ node, theme, reduceMediaEffects, mediaActive = false
             video.removeEventListener("timeupdate", handleTimeUpdate);
             video.removeEventListener("loadedmetadata", handleLoadedMetadata);
         };
-    }, [node.id, node.metadata?.naturalHeight, node.metadata?.naturalWidth, subtitleEntries.length, updateMetadata, url]);
+    }, [node.id, node.metadata?.naturalHeight, node.metadata?.naturalWidth, subtitleEntries.length, updateMediaNode, url]);
 
     if (!node.metadata?.content) return <EmptyMediaContent icon={<Video className="size-7 opacity-35" />} label="空视频节点" color={theme.node.placeholder} />;
     if (!mediaActive) return <InactiveVideoPreview node={node} theme={theme} hydrateMediaPreview={hydrateMediaPreview} />;
@@ -535,7 +535,8 @@ function ImageContent({ node, theme, isBatchRoot, batchCount, batchExpanded, bat
     const nearViewport = useNearViewport(imageContainerRef);
     const { url, loading } = useNodeResourceUrl(node, nearViewport);
     const importedFromLibTV = node.metadata?.importSource?.provider === "libtv";
-    const { resizeNode, updateMetadata } = useCanvasNodeActions();
+    const { updateMediaNode } = useCanvasNodeActions();
+    const measuredSizeRef = useRef<{ width: number; height: number } | null>(null);
 
     /**
      * 让节点跟随图片真实比例。
@@ -548,23 +549,34 @@ function ImageContent({ node, theme, isBatchRoot, batchCount, batchExpanded, bat
      * 手动拉过（manualSize）或自由比例（freeResize）的节点只补记尺寸、不动宽高。
      */
     const fitToImage = (element: HTMLImageElement) => {
+        // LibTV 已提供原图尺寸和节点尺寸；960px 缩略图不能反向覆盖这些数据。
+        if (importedFromLibTV) return;
         const naturalWidth = element.naturalWidth;
         const naturalHeight = element.naturalHeight;
         if (!naturalWidth || !naturalHeight) return;
-        if (node.metadata?.naturalWidth !== naturalWidth || node.metadata?.naturalHeight !== naturalHeight) {
-            updateMetadata?.(node.id, { naturalWidth, naturalHeight });
-        }
-        if (node.metadata?.freeResize || node.metadata?.manualSize) return;
-        const size = fitNodeSize(naturalWidth, naturalHeight);
-        // 差不到 1px 就别动，避免无意义的状态写入。
-        if (Math.abs(size.width - node.width) < 1 && Math.abs(size.height - node.height) < 1) return;
-        resizeNode?.(node.id, size);
+        if (measuredSizeRef.current?.width === naturalWidth && measuredSizeRef.current.height === naturalHeight) return;
+        measuredSizeRef.current = { width: naturalWidth, height: naturalHeight };
+        updateMediaNode?.(node.id, (current) => {
+            const metadata = current.metadata;
+            const needsMetadata = metadata?.naturalWidth !== naturalWidth || metadata?.naturalHeight !== naturalHeight;
+            if (current.metadata?.freeResize || current.metadata?.manualSize) {
+                return needsMetadata ? { ...current, metadata: { ...metadata, naturalWidth, naturalHeight } } : current;
+            }
+            const size = fitNodeSize(naturalWidth, naturalHeight);
+            const needsResize = Math.abs(size.width - current.width) >= 1 || Math.abs(size.height - current.height) >= 1;
+            if (!needsMetadata && !needsResize) return current;
+            return {
+                ...current,
+                ...(needsResize ? size : {}),
+                metadata: needsMetadata ? { ...metadata, naturalWidth, naturalHeight } : metadata,
+            };
+        });
     };
 
     return (
         <BatchFrame batchCount={isBatchRoot ? batchCount : 0} batchExpanded={batchExpanded} batchOpening={batchOpening} batchRecovering={batchRecovering} theme={theme} onToggleBatch={onToggleBatch}>
             <div ref={imageContainerRef} className="h-full w-full overflow-hidden rounded-[var(--node-radius)]">
-                {url ? <img src={url} alt={node.title} loading={importedFromLibTV ? "eager" : "lazy"} decoding="async" draggable={false} onDragStart={(event) => event.preventDefault()} onLoad={(event) => fitToImage(event.currentTarget)} className={`pointer-events-none block h-full w-full select-none ${node.metadata?.freeResize ? "object-fill" : "object-contain"}`} /> : <div className="grid size-full place-items-center" style={{ color: theme.node.muted }}>{loading ? <LoaderCircle className="size-5 animate-spin" /> : <ImageIcon className="size-5 opacity-45" />}</div>}
+                {url ? <img src={url} alt={node.title} loading="lazy" decoding="async" draggable={false} onDragStart={(event) => event.preventDefault()} onLoad={(event) => fitToImage(event.currentTarget)} className={`pointer-events-none block h-full w-full select-none ${node.metadata?.freeResize ? "object-fill" : "object-contain"}`} /> : <div className="grid size-full place-items-center" style={{ color: theme.node.muted }}>{loading ? <LoaderCircle className="size-5 animate-spin" /> : <ImageIcon className="size-5 opacity-45" />}</div>}
             </div>
         </BatchFrame>
     );
@@ -584,18 +596,23 @@ function useNodeResourceUrl(node: CanvasNodeData, eager: boolean) {
         : node.metadata?.previewContent
             || (node.type === CanvasNodeType.Image && node.metadata?.importSource?.provider === "libtv" ? buildLibTVImagePreviewUrl(content) : content);
     const isRemoteResource = Boolean(resourceIdFromStorageKey(storageKey));
-    const [url, setUrl] = useState(isRemoteResource ? "" : fallback);
+    // Inline data URLs are already local, but decoding thousands of them is
+    // still expensive. Images must wait for the same viewport gate as remote
+    // resources; otherwise DOM virtualization does not reduce image work.
+    const isLazyVisual = node.type === CanvasNodeType.Image;
+    const [url, setUrl] = useState(isRemoteResource || isLazyVisual ? "" : fallback);
     const [loading, setLoading] = useState(isRemoteResource && eager);
 
     useEffect(() => {
         let cancelled = false;
         if (!isRemoteResource) {
-            setUrl(fallback);
+            setUrl(isLazyVisual && !eager ? "" : fallback);
             setLoading(false);
             return;
         }
         setUrl("");
         setLoading(eager);
+        // 只有进入视口或被激活的节点才下载远程媒体；缓存层会复用已有 Blob URL 和 in-flight 请求。
         const resolve = eager ? cacheResourceObjectUrl(storageKey) : getCachedResourceObjectUrl(storageKey);
         void resolve.then((cached) => {
             if (!cancelled) setUrl(cached || (eager ? fallback : ""));
@@ -605,7 +622,7 @@ function useNodeResourceUrl(node: CanvasNodeData, eager: boolean) {
             if (!cancelled) setLoading(false);
         });
         return () => { cancelled = true; };
-    }, [eager, fallback, isRemoteResource, storageKey]);
+    }, [eager, fallback, isLazyVisual, isRemoteResource, storageKey]);
 
     return { url, loading };
 }
diff --git a/web/src/components/canvas/canvas-project-card.tsx b/web/src/components/canvas/canvas-project-card.tsx
index 87a70d28a..a37cf992c 100644
--- a/web/src/components/canvas/canvas-project-card.tsx
+++ b/web/src/components/canvas/canvas-project-card.tsx
@@ -12,6 +12,9 @@ import { resolveBackendApiUrl } from "@/stores/use-config-store";
 import { CachedResourceImage } from "@/components/cached-resource-image";
 import { cn } from "@/lib/utils";
 
+type ProjectPreviewMedia = { node: CanvasNodeData; url: string; storageKey?: string };
+const projectPreviewMediaCache = new WeakMap<CanvasNodeData[], { first?: ProjectPreviewMedia; latest?: ProjectPreviewMedia }>();
+
 export function CanvasCreateCard({ disabled, onClick }: { disabled?: boolean; onClick: () => void }) {
     return <button type="button" className="app-canvas-create-card" disabled={disabled} onClick={onClick}>
         <span className="app-canvas-create-preview"><Plus className="app-canvas-create-icon" /></span>
@@ -106,16 +109,7 @@ export function CanvasProjectCard({ project, projectName, variant = "library", r
 }
 
 export function ProjectPreview({ project, preferLatestImage = false }: { project: CanvasProject; preferLatestImage?: boolean }) {
-    const mediaNodes = project.nodes
-        .flatMap((node) => {
-            if (node.type !== CanvasNodeType.Image && node.type !== CanvasNodeType.Video) return [];
-            const url = getNodeMediaUrl(node);
-            return isPreviewUrl(url) ? [{ node, url, storageKey: node.metadata?.storageKey }] : [];
-        });
-    const imageNodes = mediaNodes.filter(({ node }) => node.type === CanvasNodeType.Image);
-    const media = preferLatestImage
-        ? imageNodes[imageNodes.length - 1] || mediaNodes[mediaNodes.length - 1]
-        : imageNodes[0] || mediaNodes[0];
+    const media = projectPreviewMedia(project.nodes, preferLatestImage);
     if (media) {
         const { node, url, storageKey } = media;
         return (
@@ -145,6 +139,31 @@ export function ProjectPreview({ project, preferLatestImage = false }: { project
     );
 }
 
+export function projectPreviewMedia(nodes: CanvasNodeData[], preferLatestImage = false) {
+    let cached = projectPreviewMediaCache.get(nodes);
+    if (!cached) {
+        let firstMedia: ProjectPreviewMedia | undefined;
+        let firstImage: ProjectPreviewMedia | undefined;
+        let latestMedia: ProjectPreviewMedia | undefined;
+        let latestImage: ProjectPreviewMedia | undefined;
+        for (const node of nodes) {
+            if (node.type !== CanvasNodeType.Image && node.type !== CanvasNodeType.Video) continue;
+            const url = getNodeMediaUrl(node);
+            if (!isPreviewUrl(url)) continue;
+            const media = { node, url, storageKey: node.metadata?.storageKey };
+            firstMedia ||= media;
+            latestMedia = media;
+            if (node.type === CanvasNodeType.Image) {
+                firstImage ||= media;
+                latestImage = media;
+            }
+        }
+        cached = { first: firstImage || firstMedia, latest: latestImage || latestMedia };
+        projectPreviewMediaCache.set(nodes, cached);
+    }
+    return preferLatestImage ? cached.latest : cached.first;
+}
+
 function getNodeMediaUrl(node: CanvasNodeData) {
     const resourceId = resourceIdFromStorageKey(node.metadata?.storageKey);
     if (resourceId) return resourceFileUrl(resourceId);
diff --git a/web/src/lib/asset-remote-sync.ts b/web/src/lib/asset-remote-sync.ts
new file mode 100644
index 000000000..f376cceaa
--- /dev/null
+++ b/web/src/lib/asset-remote-sync.ts
@@ -0,0 +1,11 @@
+import type { Asset } from "@/stores/use-asset-store";
+
+const PRIMARY_VERSION_ID_MAX_LENGTH = 36;
+
+export function assetForRemoteSync(asset: Asset): Asset {
+    const primaryVersionId = asset.primaryVersionId?.trim();
+    if (!primaryVersionId || [...primaryVersionId].length <= PRIMARY_VERSION_ID_MAX_LENGTH) return asset;
+
+    const { primaryVersionId: _invalidPrimaryVersionId, ...remoteAsset } = asset;
+    return remoteAsset as Asset;
+}
diff --git a/web/src/lib/canvas/canvas-frame.ts b/web/src/lib/canvas/canvas-frame.ts
index 58f65ba06..d2018a415 100644
--- a/web/src/lib/canvas/canvas-frame.ts
+++ b/web/src/lib/canvas/canvas-frame.ts
@@ -1,4 +1,5 @@
-import { CanvasNodeType, type CanvasConnection, type CanvasNodeData } from "@/types/canvas";
+import { CanvasNodeType, type CanvasConnection, type CanvasNodeData, type Position } from "@/types/canvas";
+import { buildCanvasSpatialIndex, canvasNodeBounds, type CanvasSpatialIndex } from "@/lib/canvas/canvas-spatial-index";
 
 export const FRAME_HEADER_HEIGHT = 36;
 export const FRAME_PADDING = 24;
@@ -52,23 +53,44 @@ export function findFrameDropTarget(nodes: CanvasNodeData[], draggedNodeIds: Set
     return (
         [...nodes]
             .reverse()
-            .find((frame) => {
-                if (!isFrameNode(frame) || (frame.metadata?.frame?.collapsed && !isCanvasFolderNode(frame)) || draggedNodeIds.has(frame.id)) return false;
-                const canContain = frame.metadata?.folder?.assetFolderId ? canLinkedFolderArchive : isCanvasFolderNode(frame) ? canFolderContain : canFrameContain;
-                if (!dragged.every(canContain)) return false;
-                const left = frame.position.x;
-                const top = frame.position.y + (isCanvasFolderNode(frame) && frame.metadata?.frame?.collapsed ? 0 : FRAME_HEADER_HEIGHT);
-                const right = frame.position.x + frame.width;
-                const bottom = frame.position.y + frame.height;
-                return dragged.every((node) => {
-                    const centerX = node.position.x + node.width / 2;
-                    const centerY = node.position.y + node.height / 2;
-                    return centerX >= left && centerX <= right && centerY >= top && centerY <= bottom;
-                });
-            })?.id || null
+            .find((frame) => isValidFrameDropTarget(frame, dragged, draggedNodeIds))?.id || null
     );
 }
 
+export type CanvasFrameDropIndex = CanvasSpatialIndex<CanvasNodeData>;
+
+export function buildCanvasFrameDropIndex(nodes: CanvasNodeData[]): CanvasFrameDropIndex {
+    return buildCanvasSpatialIndex(nodes.filter(isFrameNode).map((node) => ({ id: node.id, bounds: canvasNodeBounds(node), value: node })));
+}
+
+/** Finds a drop target using the drag preview offset without rebuilding all node positions. */
+export function findFrameDropTargetFromIndex(index: CanvasFrameDropIndex, draggedNodes: CanvasNodeData[], draggedNodeIds: Set<string>, offset: Position) {
+    if (!draggedNodes.length) return null;
+    const centers = draggedNodes.map((node) => ({ x: node.position.x + offset.x + node.width / 2, y: node.position.y + offset.y + node.height / 2 }));
+    const left = Math.min(...centers.map((center) => center.x)) - 0.01;
+    const top = Math.min(...centers.map((center) => center.y)) - 0.01;
+    const right = Math.max(...centers.map((center) => center.x)) + 0.01;
+    const bottom = Math.max(...centers.map((center) => center.y)) + 0.01;
+    return [...index.query({ left, top, right, bottom })]
+        .reverse()
+        .find((frame) => isValidFrameDropTarget(frame, draggedNodes, draggedNodeIds, offset))?.id || null;
+}
+
+function isValidFrameDropTarget(frame: CanvasNodeData, dragged: CanvasNodeData[], draggedNodeIds: Set<string>, offset: Position = { x: 0, y: 0 }) {
+    if (!isFrameNode(frame) || (frame.metadata?.frame?.collapsed && !isCanvasFolderNode(frame)) || draggedNodeIds.has(frame.id)) return false;
+    const canContain = frame.metadata?.folder?.assetFolderId ? canLinkedFolderArchive : isCanvasFolderNode(frame) ? canFolderContain : canFrameContain;
+    if (!dragged.every(canContain)) return false;
+    const left = frame.position.x;
+    const top = frame.position.y + (isCanvasFolderNode(frame) && frame.metadata?.frame?.collapsed ? 0 : FRAME_HEADER_HEIGHT);
+    const right = frame.position.x + frame.width;
+    const bottom = frame.position.y + frame.height;
+    return dragged.every((node) => {
+        const centerX = node.position.x + offset.x + node.width / 2;
+        const centerY = node.position.y + offset.y + node.height / 2;
+        return centerX >= left && centerX <= right && centerY >= top && centerY <= bottom;
+    });
+}
+
 export function applyFrameDrop(nodes: CanvasNodeData[], draggedNodeIds: Set<string>, frameId: string | null) {
     const target = frameId ? nodes.find((node) => node.id === frameId && isFrameNode(node)) : null;
     const canContain = target?.metadata?.folder?.assetFolderId ? canLinkedFolderArchive : target && isCanvasFolderNode(target) ? canFolderContain : canFrameContain;
diff --git a/web/src/lib/canvas/canvas-generation-layout.ts b/web/src/lib/canvas/canvas-generation-layout.ts
index 75ad47b13..2c084e005 100644
--- a/web/src/lib/canvas/canvas-generation-layout.ts
+++ b/web/src/lib/canvas/canvas-generation-layout.ts
@@ -10,7 +10,15 @@ const BATCH_CHILD_GAP = 36;
 const NODE_CLEARANCE = 36;
 
 export function canGenerateImageInPlace(sourceNode: CanvasNodeData | undefined) {
-    return sourceNode?.type === CanvasNodeType.Image && !sourceNode.metadata?.content;
+    return canGenerateMediaInPlace(sourceNode, CanvasNodeType.Image);
+}
+
+export function canGenerateMediaInPlace(sourceNode: CanvasNodeData | undefined, mediaType: typeof CanvasNodeType.Image | typeof CanvasNodeType.Video | typeof CanvasNodeType.Audio) {
+    if (sourceNode?.type !== mediaType) return false;
+    if (sourceNode.metadata?.generationResultPlacement) return sourceNode.metadata.generationResultPlacement === "replace-node";
+    if (!sourceNode.metadata?.content) return true;
+    // 兼容显式落点字段引入前创建的复制节点和版本节点。
+    return Boolean(sourceNode.metadata?.copiedFromNodeId || sourceNode.metadata?.versionOfNodeId);
 }
 
 export function imageGenerationGroupSize(rootSize: Size, imageSize: Size, childCount: number): Size {
diff --git a/web/src/lib/canvas/canvas-live-viewport.ts b/web/src/lib/canvas/canvas-live-viewport.ts
index 596127de6..02478d98f 100644
--- a/web/src/lib/canvas/canvas-live-viewport.ts
+++ b/web/src/lib/canvas/canvas-live-viewport.ts
@@ -3,6 +3,21 @@ import type { SelectionBox, ViewportTransform } from "@/types/canvas";
 export const CANVAS_VIEWPORT_PREVIEW_EVENT = "canvas:viewport-preview";
 export const CANVAS_GRAPHICS_VIEWPORT_PREVIEW_EVENT = "canvas:graphics-viewport-preview";
 export const CANVAS_SELECTION_PREVIEW_EVENT = "canvas:selection-preview";
+export const CANVAS_NODE_DRAG_PREVIEW_EVENT = "canvas:node-drag-preview";
+
+export type CanvasNodeDragPreview = {
+    x: number;
+    y: number;
+    nodeIds: ReadonlySet<string>;
+};
+
+type NodeDragPreviewDomState = {
+    elementsById: Map<string, HTMLElement>;
+    previousIds: Set<string>;
+};
+
+const nodeDragPreviewDomStates = new WeakMap<HTMLDivElement, NodeDragPreviewDomState>();
+const liveViewportElements = new WeakMap<HTMLDivElement, { worldLayer: HTMLElement | null; gridLayer: HTMLElement | null }>();
 
 // 空间网格点模式的点半径（像素单位）。远距时使用更小半径，避免点阵糊成一团。
 export function canvasDotPx(scale: number): string {
@@ -19,19 +34,35 @@ export function applyCanvasLiveViewport(container: HTMLDivElement | null, viewpo
     const gridSize = 48 * viewport.k;
     const dotGridSize = canvasDotGridPx(viewport.k);
     const committedScale = Number(container.style.getPropertyValue("--canvas-committed-scale")) || viewport.k;
-    container.style.setProperty("--canvas-live-x", `${viewport.x}px`);
-    container.style.setProperty("--canvas-live-y", `${viewport.y}px`);
+    let elements = liveViewportElements.get(container);
+    if (!elements) {
+        elements = {
+            worldLayer: container.querySelector<HTMLElement>("[data-canvas-world-layer]"),
+            gridLayer: container.querySelector<HTMLElement>("[data-canvas-grid-layer]"),
+        };
+        liveViewportElements.set(container, elements);
+    }
+    const worldLayer = elements.worldLayer;
+    if (worldLayer) {
+        // 平移期间直接更新合成层，避免修改容器继承变量导致所有节点重新计算样式。
+        worldLayer.style.transformOrigin = "0 0";
+        worldLayer.style.transform = `translate3d(${viewport.x}px, ${viewport.y}px, 0) scale(${viewport.k / committedScale})`;
+        worldLayer.style.willChange = container.dataset.canvasViewportInteracting === "true" ? "transform" : "";
+    }
     container.style.setProperty("--canvas-live-scale", String(viewport.k));
     // 外置节点标题用同一帧逆倍率抵消世界层缩放，避免等待 React 提交后再校正尺寸。
     container.style.setProperty("--canvas-live-inverse-scale", String(1 / Math.max(viewport.k, 0.05)));
-    container.style.setProperty("--canvas-live-scale-ratio", String(viewport.k / committedScale));
-    container.style.setProperty("--canvas-grid-size", `${gridSize}px`);
-    container.style.setProperty("--canvas-grid-x", `${viewport.x % gridSize}px`);
-    container.style.setProperty("--canvas-grid-y", `${viewport.y % gridSize}px`);
-    container.style.setProperty("--canvas-dot-grid-size", `${dotGridSize}px`);
-    container.style.setProperty("--canvas-dot-grid-x", `${viewport.x % dotGridSize}px`);
-    container.style.setProperty("--canvas-dot-grid-y", `${viewport.y % dotGridSize}px`);
-    container.style.setProperty("--canvas-dot-size", canvasDotPx(viewport.k));
+    const gridLayer = elements.gridLayer;
+    if (gridLayer) {
+        // 网格是唯一需要每帧更新背景偏移的元素，不把这些变量放在画布根节点上继承。
+        gridLayer.style.setProperty("--canvas-grid-size", `${gridSize}px`);
+        gridLayer.style.setProperty("--canvas-grid-x", `${viewport.x % gridSize}px`);
+        gridLayer.style.setProperty("--canvas-grid-y", `${viewport.y % gridSize}px`);
+        gridLayer.style.setProperty("--canvas-dot-grid-size", `${dotGridSize}px`);
+        gridLayer.style.setProperty("--canvas-dot-grid-x", `${viewport.x % dotGridSize}px`);
+        gridLayer.style.setProperty("--canvas-dot-grid-y", `${viewport.y % dotGridSize}px`);
+        gridLayer.style.setProperty("--canvas-dot-size", canvasDotPx(viewport.k));
+    }
     // 图形层必须逐帧跟随 DOM 世界层；浮层和滚动通知仍可按原频率节流。
     container.dispatchEvent(new CustomEvent<ViewportTransform>(CANVAS_GRAPHICS_VIEWPORT_PREVIEW_EVENT, { detail: viewport }));
     if (notify) {
@@ -53,6 +84,53 @@ export function subscribeCanvasViewportPreview(container: HTMLDivElement, listen
     return () => container.removeEventListener(CANVAS_VIEWPORT_PREVIEW_EVENT, handlePreview);
 }
 
+/**
+ * Applies transient node movement without changing React state. Only nodes
+ * currently mounted in the virtualized world are touched; the committed
+ * positions are still written by the drag-end path.
+ */
+export function applyCanvasNodeDragPreview(container: HTMLDivElement | null, preview: CanvasNodeDragPreview | null) {
+    if (!container) return;
+
+    let state = nodeDragPreviewDomStates.get(container);
+    if (!state) {
+        state = { elementsById: new Map(), previousIds: new Set() };
+        nodeDragPreviewDomStates.set(container, state);
+    }
+
+    for (const nodeId of state.previousIds) {
+        state.elementsById.get(nodeId)?.style.removeProperty("translate");
+    }
+
+    state.previousIds.clear();
+    if (preview) {
+        // Build the lookup once per drag session. A single DOM scan is much
+        // cheaper than one selector query per selected node on every frame.
+        if (state.elementsById.size === 0) {
+            container.querySelectorAll<HTMLElement>("[data-node-id]").forEach((element) => {
+                const nodeId = element.dataset.nodeId;
+                if (nodeId) state?.elementsById.set(nodeId, element);
+            });
+        }
+        for (const nodeId of preview.nodeIds) {
+            const element = state.elementsById.get(nodeId);
+            if (!element || !element.isConnected) continue;
+            element.style.setProperty("translate", `${preview.x}px ${preview.y}px`);
+            state.previousIds.add(nodeId);
+        }
+    } else {
+        state.elementsById.clear();
+    }
+
+    container.dispatchEvent(new CustomEvent<CanvasNodeDragPreview | null>(CANVAS_NODE_DRAG_PREVIEW_EVENT, { detail: preview }));
+}
+
+export function subscribeCanvasNodeDragPreview(container: HTMLDivElement, listener: (preview: CanvasNodeDragPreview | null) => void) {
+    const handlePreview = (event: Event) => listener((event as CustomEvent<CanvasNodeDragPreview | null>).detail);
+    container.addEventListener(CANVAS_NODE_DRAG_PREVIEW_EVENT, handlePreview);
+    return () => container.removeEventListener(CANVAS_NODE_DRAG_PREVIEW_EVENT, handlePreview);
+}
+
 export function applyCanvasSelectionPreview(container: HTMLDivElement | null, selection: SelectionBox) {
     container?.dispatchEvent(new CustomEvent<SelectionBox>(CANVAS_SELECTION_PREVIEW_EVENT, { detail: selection }));
 }
diff --git a/web/src/lib/canvas/canvas-node-copy.ts b/web/src/lib/canvas/canvas-node-copy.ts
index 96883a150..66244f313 100644
--- a/web/src/lib/canvas/canvas-node-copy.ts
+++ b/web/src/lib/canvas/canvas-node-copy.ts
@@ -1,5 +1,5 @@
 import { resetGenerationTaskMetadata } from "@/lib/canvas/canvas-project-generation";
-import type { CanvasNodeData, CanvasNodeMetadata, StoryboardRow } from "@/types/canvas";
+import { CanvasNodeType, type CanvasNodeData, type CanvasNodeMetadata, type StoryboardRow } from "@/types/canvas";
 
 const COPY_TITLE_SUFFIX = /^(.*)_copy(\d+)$/i;
 
@@ -62,6 +62,9 @@ export function isolateCopiedNodeMetadata(node: CanvasNodeData, idMap: ReadonlyM
     delete metadata.versionPrimary;
 
     metadata.copiedFromNodeId = node.id;
+    if (node.type === CanvasNodeType.Image || node.type === CanvasNodeType.Video || node.type === CanvasNodeType.Audio) {
+        metadata.generationResultPlacement = "replace-node";
+    }
     metadata.frame = node.metadata?.frame ? { ...node.metadata.frame } : undefined;
     metadata.referenceSetId = remapOwnedNodeId(node.metadata?.referenceSetId, idMap);
     metadata.referenceAssetNodeIds = node.metadata?.referenceAssetNodeIds
diff --git a/web/src/lib/canvas/canvas-node-timestamps.ts b/web/src/lib/canvas/canvas-node-timestamps.ts
index 8a38ac6ab..d61474382 100644
--- a/web/src/lib/canvas/canvas-node-timestamps.ts
+++ b/web/src/lib/canvas/canvas-node-timestamps.ts
@@ -50,10 +50,15 @@ export function normalizeCanvasNodeTimestamps(nodes: CanvasNodeData[], fallback:
 
 export function stampCanvasNodeChanges(previousNodes: CanvasNodeData[], nextNodes: CanvasNodeData[], now = new Date().toISOString()) {
     if (previousNodes === nextNodes) return previousNodes;
-    const previousById = new Map(previousNodes.map((node) => [node.id, node]));
+    // Most canvas edits preserve order and replace one node. Avoid allocating a
+    // 50k-entry id map and comparing metadata for every untouched node in that
+    // hot path. The map fallback still handles inserts, deletes and reorders.
+    const sameOrder = previousNodes.length === nextNodes.length && previousNodes.every((node, index) => node.id === nextNodes[index]?.id);
+    const previousById = sameOrder ? null : new Map(previousNodes.map((node) => [node.id, node]));
     let changed = false;
-    const stamped = nextNodes.map((node) => {
-        const previous = previousById.get(node.id);
+    const stamped = nextNodes.map((node, index) => {
+        const previous = sameOrder ? previousNodes[index] : previousById?.get(node.id);
+        if (previous === node) return node;
         const createdAt = canvasNodeCreatedAt(node, canvasNodeCreatedAt(previous || node, now)) || now;
         const meaningfulChange = previous ? canvasNodeMeaningfullyChanged(previous, node) : false;
         const updatedAt = previous
@@ -68,6 +73,33 @@ export function stampCanvasNodeChanges(previousNodes: CanvasNodeData[], nextNode
     return changed ? stamped : nextNodes;
 }
 
+/**
+ * Update one node without routing through the generic full-array timestamp
+ * reconciliation. This is used by media metadata callbacks, which can fire
+ * in bursts while a large canvas is first becoming visible.
+ */
+export function updateCanvasNode(nodes: CanvasNodeData[], nodeId: string, update: (node: CanvasNodeData) => CanvasNodeData, now = new Date().toISOString()) {
+    return updateCanvasNodes(nodes, new Map([[nodeId, update]]), now);
+}
+
+export function updateCanvasNodes(nodes: CanvasNodeData[], updates: ReadonlyMap<string, (node: CanvasNodeData) => CanvasNodeData>, now = new Date().toISOString()) {
+    if (!updates.size) return nodes;
+    let changed = false;
+    const next = nodes.map((current) => {
+        const update = updates.get(current.id);
+        if (!update) return current;
+        const updated = update(current);
+        if (updated === current) return current;
+        changed = true;
+        const createdAt = canvasNodeCreatedAt(updated, canvasNodeCreatedAt(current, now)) || now;
+        const updatedAt = canvasNodeMeaningfullyChanged(current, updated)
+            ? now
+            : canvasNodeUpdatedAt(updated, canvasNodeUpdatedAt(current, createdAt)) || createdAt;
+        return updated.createdAt === createdAt && updated.updatedAt === updatedAt ? updated : { ...updated, createdAt, updatedAt };
+    });
+    return changed ? next : nodes;
+}
+
 function canvasNodeMeaningfullyChanged(previous: CanvasNodeData, next: CanvasNodeData) {
     if (
         previous.type !== next.type
diff --git a/web/src/lib/canvas/canvas-performance-mode.ts b/web/src/lib/canvas/canvas-performance-mode.ts
index a61fe286d..94a5651a5 100644
--- a/web/src/lib/canvas/canvas-performance-mode.ts
+++ b/web/src/lib/canvas/canvas-performance-mode.ts
@@ -2,6 +2,12 @@ import { CanvasNodeType, type CanvasMediaPerformanceMode, type CanvasNodeData }
 
 const STORAGE_KEY = "canvas-media-performance-mode";
 
+// The DOM budget is deliberately below the connection budget. Image-heavy
+// canvases pay a texture/compositing cost per mounted card, even when the
+// cards themselves are already virtualized spatially.
+export const CANVAS_MAX_RENDERED_NODES = 720;
+export const CANVAS_MAX_RENDERED_CONNECTIONS = 5000;
+
 export function readCanvasMediaPerformanceMode(): CanvasMediaPerformanceMode {
     try {
         const stored = window.localStorage.getItem(STORAGE_KEY);
@@ -26,6 +32,17 @@ export function shouldReduceCanvasMediaEffects(mode: CanvasMediaPerformanceMode,
     return nodes.length >= 80 || mediaCount >= 32;
 }
 
+export function canvasNodeRenderPadding(reduceMediaEffects: boolean, previouslyRendered: boolean) {
+    if (previouslyRendered) return reduceMediaEffects ? 640 : 384;
+    return reduceMediaEffects ? 128 : 192;
+}
+
+export function canvasNodeRenderBudget(scale: number) {
+    if (scale < 0.14) return 280;
+    if (scale < 0.28) return 420;
+    return CANVAS_MAX_RENDERED_NODES;
+}
+
 export function resolveActiveCanvasMediaNodeId(selectedNodeIds: ReadonlySet<string>, nodeById: ReadonlyMap<string, CanvasNodeData>) {
     if (selectedNodeIds.size !== 1) return null;
     const nodeId = selectedNodeIds.values().next().value;
diff --git a/web/src/lib/canvas/canvas-project-generation.ts b/web/src/lib/canvas/canvas-project-generation.ts
index ebcb69149..55d6cfeca 100644
--- a/web/src/lib/canvas/canvas-project-generation.ts
+++ b/web/src/lib/canvas/canvas-project-generation.ts
@@ -550,7 +550,8 @@ export function supportsVideoReferenceAudio(config: AiConfig) {
 export function resetInterruptedGeneration(nodes: CanvasNodeData[]) {
     const configWidth = NODE_DEFAULT_SIZE[CanvasNodeType.Config].width;
     const configHeight = NODE_DEFAULT_SIZE[CanvasNodeType.Config].height;
-    return nodes.map((node) => {
+    let changed = false;
+    const reset = nodes.map((node) => {
         const mediaNode = ensureMediaNodeMinimumSize(node);
         const resizedNode =
             mediaNode.type === CanvasNodeType.Config && (mediaNode.width < configWidth || mediaNode.height < configHeight)
@@ -558,8 +559,11 @@ export function resetInterruptedGeneration(nodes: CanvasNodeData[]) {
                 : mediaNode.type === CanvasNodeType.Script && mediaNode.height < NODE_DEFAULT_SIZE[CanvasNodeType.Script].height
                   ? { ...mediaNode, height: NODE_DEFAULT_SIZE[CanvasNodeType.Script].height }
                   : mediaNode;
-        return resizedNode.metadata?.status === "loading" ? { ...resizedNode, metadata: { ...resizedNode.metadata, errorDetails: "正在从任务中心恢复生成状态..." } } : resizedNode;
+        const restoredNode = resizedNode.metadata?.status === "loading" ? { ...resizedNode, metadata: { ...resizedNode.metadata, errorDetails: "正在从任务中心恢复生成状态..." } } : resizedNode;
+        if (restoredNode !== node) changed = true;
+        return restoredNode;
     });
+    return changed ? reset : nodes;
 }
 
 export function isGenerationCanceled(error: unknown) {
diff --git a/web/src/lib/canvas/canvas-resource-references.ts b/web/src/lib/canvas/canvas-resource-references.ts
index 6c2455c47..b75782a8f 100644
--- a/web/src/lib/canvas/canvas-resource-references.ts
+++ b/web/src/lib/canvas/canvas-resource-references.ts
@@ -74,17 +74,56 @@ export function buildAssetMentionReferences(assets: Asset[]): CanvasResourceRefe
     });
 }
 
-export function buildCanvasResourceReferences(nodes: CanvasNodeData[], connections: CanvasConnection[], contextNodeId?: string | null) {
+export function buildCanvasResourceReferences(nodes: CanvasNodeData[], connections: CanvasConnection[], contextNodeId?: string | null, targetNodes?: CanvasNodeData[]) {
     const contextNodes = contextNodeId ? getMentionResourceNodes(contextNodeId, nodes, connections) : [];
-    const globalReferences = labelResourceNodes(nodes.filter(isResourceNode), false);
+    const sourceNodes = targetNodes ? uniqueCanvasNodes([...targetNodes, ...contextNodes]) : nodes;
+    const globalReferences = labelResourceNodes(sourceNodes.filter(isResourceNode), false);
     const activeByNodeId = new Map(labelResourceNodes(contextNodes, true).map((reference) => [reference.nodeId, reference]));
     return globalReferences.map((reference) => activeByNodeId.get(reference.nodeId) || reference);
 }
 
+function uniqueCanvasNodes(nodes: CanvasNodeData[]) {
+    const seen = new Set<string>();
+    return nodes.filter((node) => {
+        if (seen.has(node.id)) return false;
+        seen.add(node.id);
+        return true;
+    });
+}
+
 export function buildNodeMentionReferences(node: CanvasNodeData, nodes: CanvasNodeData[], connections: CanvasConnection[]) {
     return labelResourceNodes(getMentionResourceNodes(node.id, nodes, connections), true);
 }
 
+export function buildCanvasNodeMentionReferenceMap(nodes: CanvasNodeData[], connections: CanvasConnection[], targetNodes: CanvasNodeData[] = nodes) {
+    const nodeById = new Map(nodes.map((node) => [node.id, node]));
+    const resourceInputsByTargetId = new Map<string, CanvasNodeData[]>();
+    const configTargetBySourceId = new Map<string, string>();
+    for (const connection of connections) {
+        const source = nodeById.get(connection.fromNodeId);
+        const target = nodeById.get(connection.toNodeId);
+        if (!source || !target) continue;
+        if (isResourceNode(source)) {
+            const inputs = resourceInputsByTargetId.get(target.id) || [];
+            inputs.push(source);
+            resourceInputsByTargetId.set(target.id, inputs);
+        }
+        if (target.type === CanvasNodeType.Config && !configTargetBySourceId.has(source.id)) {
+            configTargetBySourceId.set(source.id, target.id);
+        }
+    }
+
+    const referencesByNodeId = new Map<string, CanvasResourceReference[]>();
+    for (const node of targetNodes) {
+        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] : [];
+        referencesByNodeId.set(node.id, labelResourceNodes(inputs, true));
+    }
+    return referencesByNodeId;
+}
+
 export function buildOrderedCanvasResourceReferences(nodes: CanvasNodeData[], active = true) {
     return labelResourceNodes(nodes.filter(isResourceNode), active);
 }
diff --git a/web/src/lib/canvas/canvas-spatial-index.ts b/web/src/lib/canvas/canvas-spatial-index.ts
new file mode 100644
index 000000000..6ec999970
--- /dev/null
+++ b/web/src/lib/canvas/canvas-spatial-index.ts
@@ -0,0 +1,123 @@
+export type CanvasSpatialBounds = {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+};
+
+export type CanvasSpatialIndexEntry<T> = {
+    id: string;
+    bounds: CanvasSpatialBounds;
+    value: T;
+};
+
+type Bucket = number[];
+
+export type CanvasSpatialIndex<T> = {
+    query: (bounds: CanvasSpatialBounds, limit?: number) => T[];
+};
+
+const DEFAULT_CELL_SIZE = 1024;
+const MAX_BUCKET_COVERAGE = 256;
+
+/**
+ * A uniform grid keeps viewport queries proportional to nearby content. The
+ * original entry order is restored after bucket de-duplication so stacking
+ * behavior remains deterministic.
+ */
+export function buildCanvasSpatialIndex<T>(entries: CanvasSpatialIndexEntry<T>[], cellSize = DEFAULT_CELL_SIZE): CanvasSpatialIndex<T> {
+    const normalizedCellSize = Number.isFinite(cellSize) && cellSize > 0 ? cellSize : DEFAULT_CELL_SIZE;
+    const buckets = new Map<string, Bucket>();
+    const largeEntryIndexes: number[] = [];
+    const validEntries: CanvasSpatialIndexEntry<T>[] = [];
+
+    entries.forEach((entry) => {
+        const bounds = normalizeBounds(entry.bounds);
+        if (!bounds || !entry.id) return;
+        const index = validEntries.push({ ...entry, bounds }) - 1;
+        const minColumn = Math.floor(bounds.left / normalizedCellSize);
+        const maxColumn = Math.floor((bounds.right - Number.EPSILON) / normalizedCellSize);
+        const minRow = Math.floor(bounds.top / normalizedCellSize);
+        const maxRow = Math.floor((bounds.bottom - Number.EPSILON) / normalizedCellSize);
+        if ((maxColumn - minColumn + 1) * (maxRow - minRow + 1) > MAX_BUCKET_COVERAGE) {
+            largeEntryIndexes.push(index);
+            return;
+        }
+        for (let row = minRow; row <= maxRow; row += 1) {
+            for (let column = minColumn; column <= maxColumn; column += 1) {
+                const key = `${column}:${row}`;
+                const bucket = buckets.get(key);
+                if (bucket) bucket.push(index);
+                else buckets.set(key, [index]);
+            }
+        }
+    });
+
+    return {
+        query(bounds, limit) {
+            const normalizedBounds = normalizeBounds(bounds);
+            if (!normalizedBounds || validEntries.length === 0) return [];
+            const resultLimit = Number.isFinite(limit) && (limit || 0) > 0 ? Math.floor(limit as number) : null;
+            const minColumn = Math.floor(normalizedBounds.left / normalizedCellSize);
+            const maxColumn = Math.floor((normalizedBounds.right - Number.EPSILON) / normalizedCellSize);
+            const minRow = Math.floor(normalizedBounds.top / normalizedCellSize);
+            const maxRow = Math.floor((normalizedBounds.bottom - Number.EPSILON) / normalizedCellSize);
+            if (resultLimit) {
+                const candidateIndexes = new Set<number>();
+                const resultIndexes: number[] = [];
+                const addBucket = (bucket: Bucket | undefined) => {
+                    if (!bucket) return false;
+                    for (const index of bucket) {
+                        if (candidateIndexes.has(index)) continue;
+                        candidateIndexes.add(index);
+                        const entry = validEntries[index];
+                        if (!intersects(entry.bounds, normalizedBounds)) continue;
+                        resultIndexes.push(index);
+                        if (resultIndexes.length >= resultLimit) return true;
+                    }
+                    return false;
+                };
+                for (let row = minRow; row <= maxRow; row += 1) {
+                    for (let column = minColumn; column <= maxColumn; column += 1) {
+                        if (addBucket(buckets.get(`${column}:${row}`))) return resultIndexes.sort((left, right) => left - right).map((index) => validEntries[index].value);
+                    }
+                }
+                for (const index of largeEntryIndexes) {
+                    if (candidateIndexes.has(index)) continue;
+                    const entry = validEntries[index];
+                    if (!intersects(entry.bounds, normalizedBounds)) continue;
+                    resultIndexes.push(index);
+                    if (resultIndexes.length >= resultLimit) break;
+                }
+                return resultIndexes.sort((left, right) => left - right).map((index) => validEntries[index].value);
+            }
+            const candidateIndexes = new Set<number>();
+            for (let row = minRow; row <= maxRow; row += 1) {
+                for (let column = minColumn; column <= maxColumn; column += 1) {
+                    buckets.get(`${column}:${row}`)?.forEach((index) => candidateIndexes.add(index));
+                }
+            }
+            largeEntryIndexes.forEach((index) => candidateIndexes.add(index));
+            return [...candidateIndexes]
+                .sort((left, right) => left - right)
+                .map((index) => validEntries[index])
+                .filter((entry) => intersects(entry.bounds, normalizedBounds))
+                .map((entry) => entry.value);
+        },
+    };
+}
+
+export function canvasNodeBounds(node: { position: { x: number; y: number }; width: number; height: number }): CanvasSpatialBounds {
+    return { left: node.position.x, top: node.position.y, right: node.position.x + node.width, bottom: node.position.y + node.height };
+}
+
+function normalizeBounds(bounds: CanvasSpatialBounds | undefined): CanvasSpatialBounds | null {
+    if (!bounds) return null;
+    const { left, top, right, bottom } = bounds;
+    if (![left, top, right, bottom].every(Number.isFinite) || right <= left || bottom <= top) return null;
+    return { left, top, right, bottom };
+}
+
+function intersects(left: CanvasSpatialBounds, right: CanvasSpatialBounds) {
+    return left.right > right.left && left.left < right.right && left.bottom > right.top && left.top < right.bottom;
+}
diff --git a/web/src/lib/workspace-route-modules.ts b/web/src/lib/workspace-route-modules.ts
index 0b09368e4..43c9df760 100644
--- a/web/src/lib/workspace-route-modules.ts
+++ b/web/src/lib/workspace-route-modules.ts
@@ -8,12 +8,14 @@ const workspaceRouteLoaders = {
 
 export const loadAssetsPage = workspaceRouteLoaders.assets;
 export const loadCanvasPage = workspaceRouteLoaders.canvas;
+export const loadCanvasProjectPage = () => import("@/pages/canvas/project");
 export const loadCreatePage = workspaceRouteLoaders.create;
 export const loadProjectsPage = workspaceRouteLoaders.projects;
 export const loadWalletPage = workspaceRouteLoaders.wallet;
 
 export function preloadWorkspaceRoute(pathnameOrSlug: string) {
-    const slug = pathnameOrSlug.replace(/^\//, "").split("/", 1)[0] as keyof typeof workspaceRouteLoaders;
-    const load = workspaceRouteLoaders[slug];
+    // 根路径就是创作页，预加载时仍映射到其内部模块名。
+    const slug = pathnameOrSlug.replace(/^\//, "").split("/", 1)[0] || "create";
+    const load = workspaceRouteLoaders[slug as keyof typeof workspaceRouteLoaders];
     if (load) void load();
 }
diff --git a/web/src/pages/canvas/canvas-image-generation-executor.ts b/web/src/pages/canvas/canvas-image-generation-executor.ts
index 2f133f95b..af4335338 100644
--- a/web/src/pages/canvas/canvas-image-generation-executor.ts
+++ b/web/src/pages/canvas/canvas-image-generation-executor.ts
@@ -50,9 +50,8 @@ export async function executeImageGeneration({
     const count = getGenerationCount(generationConfig.count);
     const isConfigNode = sourceNode?.type === CanvasNodeType.Config;
     const isImageNode = sourceNode?.type === CanvasNodeType.Image;
-    const isCopiedVariant = count === 1 && isImageNode && Boolean(sourceNode?.metadata?.copiedFromNodeId || sourceNode?.metadata?.versionOfNodeId || sourceNode?.title.endsWith(" Copy") || sourceNode?.title.includes(" · "));
-    const reuseSourceNode = canGenerateImageInPlace(sourceNode) || isCopiedVariant;
-    const directCopiedBatch = count > 1 && isImageNode && Boolean(sourceNode?.metadata?.content) && (Boolean(sourceNode?.metadata?.copiedFromNodeId) || sourceNode?.title.endsWith(" Copy"));
+    const reuseSourceNode = canGenerateImageInPlace(sourceNode);
+    const directCopiedBatch = count > 1 && isImageNode && Boolean(sourceNode?.metadata?.content) && reuseSourceNode;
     // 已有图片生成新结果并保留旧版本；参考图只来自入边，避免把旧结果误当成自身输入。
     const referenceImages = generationContext.referenceImages;
     const generationType = referenceImages.length ? ("edit" as const) : ("generation" as const);
@@ -289,4 +288,3 @@ export async function executeImageGeneration({
         return next;
     });
 }
-
diff --git a/web/src/pages/canvas/canvas-media-generation-executors.ts b/web/src/pages/canvas/canvas-media-generation-executors.ts
index 0d1cd9786..465879244 100644
--- a/web/src/pages/canvas/canvas-media-generation-executors.ts
+++ b/web/src/pages/canvas/canvas-media-generation-executors.ts
@@ -1,6 +1,7 @@
 import { nanoid } from "nanoid";
 
 import { NODE_DEFAULT_SIZE } from "@/constant/canvas";
+import { canGenerateMediaInPlace } from "@/lib/canvas/canvas-generation-layout";
 import { nodeSizeFromRatio } from "@/lib/canvas/canvas-node-size";
 import { nextCanvasVersionLabel } from "@/lib/canvas/canvas-layout";
 import { buildAudioGenerationMetadata, buildVideoGenerationMetadata, generationReferenceUrls, runCanvasGenerationTaskToConsumer } from "@/lib/canvas/canvas-project-generation";
@@ -33,9 +34,9 @@ export async function executeVideoGeneration({
     retryContext,
 }: CanvasGenerationExecution) {
     const spec = nodeSizeFromRatio(generationConfig.size, NODE_DEFAULT_SIZE[CanvasNodeType.Video].width, NODE_DEFAULT_SIZE[CanvasNodeType.Video].height) || NODE_DEFAULT_SIZE[CanvasNodeType.Video];
-    const isEmptyVideoNode = sourceNode?.type === CanvasNodeType.Video && !sourceNode.metadata?.content;
-    const isExistingVideoNode = sourceNode?.type === CanvasNodeType.Video && Boolean(sourceNode.metadata?.content);
-    const videoId = isEmptyVideoNode ? nodeId : nanoid();
+    const reuseSourceNode = canGenerateMediaInPlace(sourceNode, CanvasNodeType.Video);
+    const isExistingVideoNode = sourceNode?.type === CanvasNodeType.Video && Boolean(sourceNode.metadata?.content) && !reuseSourceNode;
+    const videoId = reuseSourceNode ? nodeId : nanoid();
     const versionRootId = isExistingVideoNode && sourceNode ? sourceNode.metadata?.versionOfNodeId || sourceNode.id : undefined;
     const parent = sourceNode?.position || { x: 0, y: 0 };
     const videoGenerationMetadata = buildVideoGenerationMetadata(sourceNode, generationContext, generationConfig);
@@ -43,11 +44,11 @@ export async function executeVideoGeneration({
         id: videoId,
         type: CanvasNodeType.Video,
         title: effectivePrompt.slice(0, 32) || "Generated Video",
-        position: isEmptyVideoNode ? sourceNode.position : { x: parent.x + (sourceNode?.width || spec.width) + 96, y: parent.y },
-        width: isEmptyVideoNode ? sourceNode.width : spec.width,
-        height: isEmptyVideoNode ? sourceNode.height : spec.height,
+        position: reuseSourceNode ? sourceNode!.position : { x: parent.x + (sourceNode?.width || spec.width) + 96, y: parent.y },
+        width: reuseSourceNode ? sourceNode!.width : spec.width,
+        height: reuseSourceNode ? sourceNode!.height : spec.height,
         metadata: {
-            ...(isEmptyVideoNode ? sourceNode.metadata || {} : {}),
+            ...(reuseSourceNode ? sourceNode?.metadata || {} : {}),
             prompt: effectivePrompt,
             status: NODE_STATUS_LOADING,
             errorDetails: undefined,
@@ -69,7 +70,7 @@ export async function executeVideoGeneration({
     registerPendingNodeIds([videoId]);
     // 待生成版本先加入版本族，但只有成功结果才能替换当前主版本。
     setNodes((current) => {
-        if (isEmptyVideoNode) return current.map((node) => (node.id === nodeId ? { ...node, ...videoNode } : node));
+        if (reuseSourceNode) return current.map((node) => (node.id === nodeId ? { ...node, ...videoNode } : node));
         if (!isExistingVideoNode || !sourceNode) return [...current.map((node) => (node.id === nodeId ? { ...node, metadata: { ...node.metadata, status: NODE_STATUS_SUCCESS } } : node)), videoNode];
         const rootId = versionRootId!;
         const nextLabel = nextCanvasVersionLabel(rootId, current);
@@ -83,7 +84,7 @@ export async function executeVideoGeneration({
         ];
     });
     // 重新生成已有视频时，新节点继承源视频的上游连接，与源视频保持并行关系，而不是作为其下游子节点。
-    if (!isEmptyVideoNode) {
+    if (!reuseSourceNode) {
         setConnections((current) => {
             if (!isExistingVideoNode) return [...current, { id: nanoid(), fromNodeId: nodeId, toNodeId: videoId }];
             return [...current, ...canvasConnections.filter((connection) => connection.toNodeId === nodeId).map((connection) => ({ ...connection, id: nanoid(), toNodeId: videoId }))];
diff --git a/web/src/pages/canvas/canvas-project-context-menu.tsx b/web/src/pages/canvas/canvas-project-context-menu.tsx
index 660c3c0d5..e50c88a07 100644
--- a/web/src/pages/canvas/canvas-project-context-menu.tsx
+++ b/web/src/pages/canvas/canvas-project-context-menu.tsx
@@ -24,6 +24,7 @@ type CanvasProjectContextMenuProps = {
     onRedo: () => void;
     onPaste: (position: Position) => void;
     onCopyNode: (nodeId: string) => void;
+    onCreateGenerationCopy: (nodeId: string) => void;
     onDuplicate: (nodeId: string) => void;
     onDeleteNode: (nodeId: string) => void;
     onDeleteConnection: (connectionId: string) => void;
@@ -69,6 +70,9 @@ export function CanvasProjectContextMenu({ menu, node, screenToCanvas, ...props
             onCopyNode={() => {
                 if (menu.type === "node") props.onCopyNode(menu.nodeId);
             }}
+            onCreateGenerationCopy={() => {
+                if (menu.type === "node") props.onCreateGenerationCopy(menu.nodeId);
+            }}
             onDuplicate={() => {
                 if (menu.type === "node") props.onDuplicate(menu.nodeId);
             }}
diff --git a/web/src/pages/canvas/canvas-project-world-layers.tsx b/web/src/pages/canvas/canvas-project-world-layers.tsx
index b9d15e78a..613889daa 100644
--- a/web/src/pages/canvas/canvas-project-world-layers.tsx
+++ b/web/src/pages/canvas/canvas-project-world-layers.tsx
@@ -1,4 +1,4 @@
-import { memo, type CSSProperties, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode, type RefObject } from "react";
+import { memo, useMemo, type CSSProperties, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode, type RefObject } from "react";
 import { Link2 } from "lucide-react";
 
 import { ConnectionPath } from "@/components/canvas/canvas-connections";
@@ -84,10 +84,10 @@ const EMPTY_CANVAS_NODES: CanvasNodeData[] = [];
 export const CanvasProjectWorldLayers = memo(function CanvasProjectWorldLayers(props: CanvasProjectWorldLayersProps) {
     const { viewportScale } = props;
     const activeMediaNodeId = resolveActiveCanvasMediaNodeId(props.selectedNodeIds, props.nodeById);
-    const orderedVisibleNodes = [
+    const orderedVisibleNodes = useMemo(() => [
         ...props.visibleNodes.filter(isFrameNode),
         ...sortCanvasNodesByStackOrder(props.visibleNodes.filter((node) => !isFrameNode(node)), props.nodeStackOrder),
-    ];
+    ], [props.nodeStackOrder, props.visibleNodes]);
     const framePreviewNodes = (node: CanvasNodeData) => {
         const assetFolderId = node.metadata?.folder?.assetFolderId;
         if (assetFolderId) return props.linkedFolderPreviewNodesById.get(assetFolderId) || EMPTY_CANVAS_NODES;
@@ -144,7 +144,7 @@ export const CanvasProjectWorldLayers = memo(function CanvasProjectWorldLayers(p
                         scale={viewportScale}
                         isSelected={props.selectedNodeIds.has(node.id)}
                         mediaActive={activeMediaNodeId === node.id}
-                        hydrateMediaPreview={activeMediaNodeId === null}
+                        hydrateMediaPreview={activeMediaNodeId === null && !props.reduceMediaEffects}
                         isRelated={props.relatedNodeIds.has(node.id)}
                         isFocusRelated={props.activeNodeId === node.id}
                         isConnectionTarget={props.connectionTargetNodeId === node.id || props.batchConnectionPreview?.targetNodeId === node.id}
diff --git a/web/src/pages/canvas/index.tsx b/web/src/pages/canvas/index.tsx
index b08a1ea1a..1d2d21ff8 100644
--- a/web/src/pages/canvas/index.tsx
+++ b/web/src/pages/canvas/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router";
 import { useQuery } from "@tanstack/react-query";
 import { App, Button, Dropdown, Modal, Select } from "antd";
@@ -19,6 +19,7 @@ import { exportCanvasProjects } from "@/lib/canvas/canvas-export";
 import { saveCanvasDrawing, type CanvasDrawingRenderDraft } from "@/lib/canvas/canvas-drawing-storage";
 import { createCanvasProjectWithRemoteSync, saveRemoteUserDataNow } from "@/services/user-data-sync";
 import { listProjects } from "@/services/api/projects";
+import { loadCanvasProjectPage } from "@/lib/workspace-route-modules";
 
 export default function CanvasPage() {
     const { message } = App.useApp();
@@ -31,6 +32,8 @@ export default function CanvasPage() {
     const [projectFilter, setProjectFilter] = useState("all");
     const loadMoreRef = useRef<HTMLDivElement>(null);
     const [loadedProjectCount, setLoadedProjectCount] = useState(50);
+    const [openingProjectId, setOpeningProjectId] = useState("");
+    const openingProjectIdRef = useRef("");
     const hydrated = useCanvasStore((state) => state.hydrated);
     const projects = useCanvasStore((state) => state.projects);
     const importProject = useCanvasStore((state) => state.importProject);
@@ -45,9 +48,16 @@ export default function CanvasPage() {
     const agentMode = mode === "new" || mode === "recent" || mode === "choose";
     const handoffMode = mode === "handoff";
     const forwardedQuery = agentMode || handoffMode ? `?${searchParams.toString()}` : "";
-    const enterProject = (id: string) => {
-        navigate(`/canvas/${id}${forwardedQuery}`);
-    };
+    const preloadProject = useCallback(() => {
+        void loadCanvasProjectPage();
+    }, []);
+    const enterProject = useCallback((id: string) => {
+        if (openingProjectIdRef.current) return;
+        openingProjectIdRef.current = id;
+        setOpeningProjectId(id);
+        preloadProject();
+        window.requestAnimationFrame(() => navigate(`/canvas/${id}${forwardedQuery}`));
+    }, [forwardedQuery, navigate, preloadProject]);
     const createAndEnter = () => {
         void createCanvasProjectWithRemoteSync(`自由画布 ${projects.length + 1}`).then(({ id, syncError }) => {
             if (syncError) message.warning(syncError instanceof Error ? `画布已在本地创建，云端同步失败：${syncError.message}` : "画布已在本地创建，云端同步失败");
@@ -342,6 +352,8 @@ export default function CanvasPage() {
                                 project={project}
                                 projectName={project.projectId ? projectNames.get(project.projectId) || "未同步项目" : undefined}
                                 onClick={() => enterProject(project.id)}
+                                onPrefetch={preloadProject}
+                                opening={openingProjectId === project.id}
                             />
                         ))}
                     </CollectionGrid>
diff --git a/web/src/pages/canvas/project.tsx b/web/src/pages/canvas/project.tsx
index 7bc573a7c..4e475ff48 100644
--- a/web/src/pages/canvas/project.tsx
+++ b/web/src/pages/canvas/project.tsx
@@ -76,7 +76,7 @@ import { CanvasFreeformEmptyState, CanvasLinkedProjectEmptyState, CanvasShortDra
 import { resolveCanvasEmptyStateKind } from "@/lib/canvas/canvas-starter";
 import { failedImageBatchChildren, markImageBatchRetrying, reconcileImageBatchRoot, restoreUnsubmittedImageBatchChild } from "@/lib/canvas/canvas-image-batch-retry";
 import { createCanvasNode, getInputSummary, isHiddenBatchChild, persistCanvasWorkspaceMode, readCanvasWorkspaceMode } from "@/lib/canvas/canvas-project-domain";
-import { stampCanvasNodeChanges } from "@/lib/canvas/canvas-node-timestamps";
+import { stampCanvasNodeChanges, updateCanvasNode, updateCanvasNodes } from "@/lib/canvas/canvas-node-timestamps";
 import { canvasAssetHandoffAttempt, finalizeCanvasAssetHandoff, uninsertedCanvasAssetHandoffPayloads } from "@/lib/canvas/canvas-asset-handoff";
 import { batchSourceRestriction } from "@/lib/canvas/canvas-batch-connection";
 import { deriveStoryboardPipelineProgress } from "@/lib/canvas/canvas-storyboard-progress";
@@ -92,7 +92,7 @@ import { CanvasProjectMediaDialogs } from "./canvas-project-media-dialogs";
 import { CanvasProjectSelectionToolbar } from "./canvas-project-selection-toolbar";
 import { CanvasProjectStatusDialogs } from "./canvas-project-status-dialogs";
 import { CanvasProjectWorldLayers } from "./canvas-project-world-layers";
-import { CanvasNodeActionContext } from "@/components/canvas/canvas-node-action-context";
+import { CanvasNodeActionContext, type CanvasNodeActionContextValue } from "@/components/canvas/canvas-node-action-context";
 import { bringCanvasNodeToFront, type CanvasNodeStackOrder } from "@/lib/canvas/canvas-node-stack-order";
 import { PortraitClearanceModal } from "@/components/canvas/portrait-clearance/portrait-clearance-modal";
 import { CanvasNodeGraphContext, type CanvasNodeGraphContextValue } from "@/components/canvas/canvas-node-graph-context";
@@ -131,6 +131,7 @@ import {
     type CanvasFolderStyle,
     type CanvasFolderTheme,
     type CanvasNodeData,
+    type CanvasNodeMetadata,
     type CanvasMediaPerformanceMode,
     type StoryboardColumn,
     type StoryboardShotCount,
@@ -1386,6 +1387,45 @@ function InfiniteCanvasPage() {
         setToolbarNodeId(null);
         setPortraitClearanceNodeId(node.id);
     }, []);
+    const duplicateNodeFromContent = useCallback((node: CanvasNodeData) => duplicateNode(node.id), [duplicateNode]);
+    const deleteNodeFromContent = useCallback((node: CanvasNodeData) => deleteNodes(new Set([node.id])), [deleteNodes]);
+    const updateNodeFromContent = useCallback((nodeId: string, update: (node: CanvasNodeData) => CanvasNodeData) => {
+        setNodesState((current) => {
+            const next = updateCanvasNode(current, nodeId, update);
+            nodesRef.current = next;
+            return next;
+        });
+    }, []);
+    const pendingMediaUpdatesRef = useRef(new Map<string, (node: CanvasNodeData) => CanvasNodeData>());
+    const mediaUpdateTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const updateMediaNodeFromContent = useCallback((nodeId: string, update: (node: CanvasNodeData) => CanvasNodeData) => {
+        const previous = pendingMediaUpdatesRef.current.get(nodeId);
+        pendingMediaUpdatesRef.current.set(nodeId, previous ? (node) => update(previous(node)) : update);
+        if (mediaUpdateTimerRef.current) return;
+        mediaUpdateTimerRef.current = setTimeout(() => {
+            const updates = pendingMediaUpdatesRef.current;
+            pendingMediaUpdatesRef.current = new Map();
+            mediaUpdateTimerRef.current = null;
+            if (!updates.size) return;
+            setNodesState((current) => {
+                const next = updateCanvasNodes(current, updates);
+                nodesRef.current = next;
+                return next;
+            });
+        }, 120);
+    }, []);
+    const updateNodeMetadataFromContent = useCallback((nodeId: string, patch: CanvasNodeMetadata) => {
+        updateNodeFromContent(nodeId, (node) => ({ ...node, metadata: { ...node.metadata, ...patch } }));
+    }, [updateNodeFromContent]);
+    const canvasNodeActions = useMemo<CanvasNodeActionContextValue>(() => ({
+        download: downloadNodeImage,
+        duplicate: duplicateNodeFromContent,
+        deleteNode: deleteNodeFromContent,
+        updateMetadata: updateNodeMetadataFromContent,
+        updateNode: updateNodeFromContent,
+        updateMediaNode: updateMediaNodeFromContent,
+        openPortraitClearance,
+    }), [deleteNodeFromContent, downloadNodeImage, duplicateNodeFromContent, openPortraitClearance, updateMediaNodeFromContent, updateNodeFromContent, updateNodeMetadataFromContent]);
     const { agentSnapshot, agentUndoCount, applyAgentOps, canUndoAgentOps, dismissLastAgentChange, lastAgentChange, undoAgentOps, viewLastAgentChange } = useCanvasAgentOperations({
         projectId,
         domainProjectId: currentProject?.projectId,
@@ -2202,7 +2242,7 @@ function InfiniteCanvasPage() {
                                 onFileDragLeave={handleFileDragLeave}
                                 onFileDragOver={handleFileDragOver}
                             >
-                                <CanvasNodeActionContext.Provider value={{ download: downloadNodeImage, duplicate: (node) => duplicateNode(node.id), deleteNode: (node) => deleteNodes(new Set([node.id])), updateMetadata: (nodeId, patch) => setNodes((current) => current.map((node) => (node.id === nodeId ? { ...node, metadata: { ...node.metadata, ...patch } } : node))), resizeNode: (nodeId, size) => setNodes((current) => current.map((node) => (node.id === nodeId ? { ...node, width: size.width, height: size.height } : node))), openPortraitClearance }}>
+                                <CanvasNodeActionContext.Provider value={canvasNodeActions}>
                                 <CanvasNodeGraphContext.Provider value={nodeGraphContext}>
                                 <CanvasProjectWorldLayers
                                     projectId={projectId}
@@ -2562,6 +2602,7 @@ function InfiniteCanvasPage() {
                         onRedo={redoCanvas}
                         onPaste={pasteAtPosition}
                         onCopyNode={(nodeId) => copyNodesToClipboard(new Set([nodeId]))}
+                        onCreateGenerationCopy={(nodeId) => duplicateNode(nodeId, "copy")}
                         onDuplicate={duplicateNode}
                         onDeleteNode={(nodeId) => deleteNodes(new Set([nodeId]))}
                         onDeleteConnection={deleteConnection}
diff --git a/web/src/pages/canvas/use-canvas-node-operations.ts b/web/src/pages/canvas/use-canvas-node-operations.ts
index be496f853..4c1e65ba6 100644
--- a/web/src/pages/canvas/use-canvas-node-operations.ts
+++ b/web/src/pages/canvas/use-canvas-node-operations.ts
@@ -340,13 +340,14 @@ export function useCanvasNodeOperations({
         setContextMenu((current) => current?.type === "connection" && current.connectionId === connectionId ? null : current);
     }, [commitConnections, connectionsRef, setContextMenu, setSelectedConnectionId]);
 
-    const duplicateNode = useCallback((nodeId: string) => {
+    const duplicateNode = useCallback((nodeId: string, duplicateMode: "variant" | "copy" = "variant") => {
         const source = nodesRef.current.find((node) => node.id === nodeId);
         if (!source) return;
         const sources = isFrameNode(source) ? [source, ...getFrameChildren(source.id, nodesRef.current)] : [source];
         const idMap = new Map(sources.map((node, index) => [node.id, `${node.type}-${Date.now()}-${index}-${Math.random().toString(36).slice(2, 7)}`]));
-        const versionRootId = isFrameNode(source) ? undefined : source.metadata?.versionOfNodeId || source.id;
+        const versionRootId = duplicateMode === "variant" && !isFrameNode(source) ? source.metadata?.versionOfNodeId || source.id : undefined;
         const versionLabel = versionRootId ? nextCanvasVersionLabel(versionRootId, nodesRef.current) : undefined;
+        const copyTitle = duplicateMode === "copy" ? nextCopiedNodeTitle(source.title, nodesRef.current.map((node) => node.title)) : undefined;
         const copiedNodes = sources.map((node) => {
             const metadata = isolateCopiedNodeMetadata(node, idMap);
             if (node.type === CanvasNodeType.Drawing) {
@@ -364,7 +365,7 @@ export function useCanvasNodeOperations({
             return {
                 ...node,
                 id: idMap.get(node.id)!,
-                title: node.id === source.id ? `${node.title.replace(/ · [A-Z]$/, "")} · ${versionLabel || "副本"}` : node.title,
+                title: node.id === source.id ? copyTitle || `${node.title.replace(/ · [A-Z]$/, "")} · ${versionLabel || "副本"}` : node.title,
                 position: { x: node.position.x + 36, y: node.position.y + 36 },
                 parentId: node.parentId ? idMap.get(node.parentId) || node.parentId : undefined,
                 metadata,
@@ -379,7 +380,7 @@ export function useCanvasNodeOperations({
         }
         const id = idMap.get(source.id)!;
         const nextNodes = [
-            ...nodesRef.current.map((node) => node.id === source.id && versionRootId && !node.metadata?.versionLabel ? { ...node, title: `${node.title} · A`, metadata: { ...node.metadata, versionOfNodeId: versionRootId, versionLabel: "A", versionPrimary: true } } : node),
+            ...nodesRef.current.map((node) => node.id === source.id && versionRootId && !node.metadata?.versionLabel ? { ...node, title: `${node.title} · A`, metadata: { ...node.metadata, versionOfNodeId: versionRootId, versionLabel: "A", versionPrimary: true, generationResultPlacement: "replace-node" as const } } : node),
             ...copiedNodes,
         ];
         commitNodes(nextNodes);
diff --git a/web/src/pages/canvas/use-canvas-project-lifecycle.ts b/web/src/pages/canvas/use-canvas-project-lifecycle.ts
index 046559e30..4908e802c 100644
--- a/web/src/pages/canvas/use-canvas-project-lifecycle.ts
+++ b/web/src/pages/canvas/use-canvas-project-lifecycle.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState, type Dispatch, type MutableRefObject, type SetStateAction } from "react";
+import { startTransition, useCallback, useEffect, useRef, useState, type Dispatch, type MutableRefObject, type SetStateAction } from "react";
 import { App } from "antd";
 import { useNavigate } from "react-router";
 
@@ -6,12 +6,12 @@ import { canvasAppearanceBaseTheme, canvasAppearanceForTheme, normalizeCanvasApp
 import type { CanvasBackgroundMode } from "@/lib/canvas-theme";
 import { removeCanvasDrawing } from "@/lib/canvas/canvas-drawing-storage";
 import { normalizeCanvasNodeTimestamps } from "@/lib/canvas/canvas-node-timestamps";
-import { hydrateAssistantImages, hydrateCanvasImages, resetInterruptedGeneration } from "@/lib/canvas/canvas-project-generation";
+import { hydrateAssistantImages, resetInterruptedGeneration } from "@/lib/canvas/canvas-project-generation";
 import { listAddedSkills, type Skill } from "@/services/api/skills";
 import { createCanvasProjectWithRemoteSync, deleteCanvasProjectsWithRemoteSync, saveRemoteUserDataNow } from "@/services/user-data-sync";
 import { flushCanvasStorePersistence, useCanvasStore } from "@/stores/canvas/use-canvas-store";
 import { useThemeStore } from "@/stores/use-theme-store";
-import type { CanvasAssistantSession, CanvasConnection, CanvasNodeData, CanvasNodeMetadata, ViewportTransform } from "@/types/canvas";
+import type { CanvasAssistantSession, CanvasConnection, CanvasNodeData, ViewportTransform } from "@/types/canvas";
 import type { CanvasHistorySnapshot } from "./use-canvas-history";
 
 type UseCanvasProjectLifecycleOptions = {
@@ -130,12 +130,15 @@ export function useCanvasProjectLifecycle({
             const initialSessions = project.chatSessions || [];
 
             // 先恢复可交互的节点和布局，媒体缓存/资源校验放到后台，避免首屏被远程资源拖住。
-            applyRestoredProject(initialNodes, initialSessions);
-            const [nodesResult, sessionsResult] = await Promise.allSettled([hydrateCanvasImages(initialNodes), hydrateAssistantImages(initialSessions)]);
-            if (cancelled) return;
-            if (nodesResult.status === "fulfilled") setNodes((current) => mergeHydratedNodeMedia(current, initialNodes, nodesResult.value));
-            if (sessionsResult.status === "fulfilled") setChatSessions((current) => mergeHydratedSessions(current, sessionsResult.value));
-            if (nodesResult.status === "rejected" || sessionsResult.status === "rejected") message.warning("部分本地媒体恢复失败，已使用项目记录继续打开");
+            startTransition(() => applyRestoredProject(initialNodes, initialSessions));
+            // 画布媒体由节点自己的视口观察器按需加载；打开时遍历并解析全部节点会让大画布形成 N+1 资源读取。
+            void hydrateAssistantImages(initialSessions)
+                .then((hydratedSessions) => {
+                    if (!cancelled) setChatSessions((current) => mergeHydratedSessions(current, hydratedSessions));
+                })
+                .catch(() => {
+                    if (!cancelled) message.warning("部分助手会话素材恢复失败，已使用项目记录继续打开");
+                });
         };
         void restore();
         return () => {
@@ -252,24 +255,6 @@ export function useCanvasProjectLifecycle({
     };
 }
 
-const hydratedMediaMetadataKeys = ["content", "storageKey", "naturalWidth", "naturalHeight", "bytes", "mimeType", "durationMs", "hasAudio", "videoPreview"] as const satisfies readonly (keyof CanvasNodeMetadata)[];
-
-function mergeHydratedNodeMedia(currentNodes: CanvasNodeData[], initialNodes: CanvasNodeData[], hydratedNodes: CanvasNodeData[]) {
-    const initialById = new Map(initialNodes.map((node) => [node.id, node]));
-    const hydratedById = new Map(hydratedNodes.map((node) => [node.id, node]));
-    return currentNodes.map((node) => {
-        const initial = initialById.get(node.id);
-        const hydrated = hydratedById.get(node.id);
-        if (!initial || !hydrated || node.metadata?.content !== initial.metadata?.content) return node;
-        const metadata = { ...node.metadata } as CanvasNodeMetadata;
-        hydratedMediaMetadataKeys.forEach((key) => {
-            const value = hydrated.metadata?.[key];
-            if (value !== undefined) (metadata as Record<string, unknown>)[key] = value;
-        });
-        return { ...node, metadata };
-    });
-}
-
 function mergeHydratedSessions(currentSessions: CanvasAssistantSession[], hydratedSessions: CanvasAssistantSession[]) {
     const hydratedById = new Map(hydratedSessions.map((session) => [session.id, session]));
     return currentSessions.map((session) => {
diff --git a/web/src/pages/canvas/use-canvas-render-model.ts b/web/src/pages/canvas/use-canvas-render-model.ts
index 1d8bcadd3..168303494 100644
--- a/web/src/pages/canvas/use-canvas-render-model.ts
+++ b/web/src/pages/canvas/use-canvas-render-model.ts
@@ -1,15 +1,16 @@
-import { useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 
 import { buildNodeGenerationInputs, type NodeGenerationInput } from "@/components/canvas/canvas-node-generation";
 import { isFrameNode } from "@/lib/canvas/canvas-frame";
 import { sameNodeSemanticData } from "@/lib/canvas/canvas-project-domain";
-import { shouldReduceCanvasMediaEffects } from "@/lib/canvas/canvas-performance-mode";
-import { buildCanvasResourceReferences, buildNodeMentionReferences } from "@/lib/canvas/canvas-resource-references";
+import { canvasNodeRenderBudget, canvasNodeRenderPadding, CANVAS_MAX_RENDERED_CONNECTIONS, shouldReduceCanvasMediaEffects } from "@/lib/canvas/canvas-performance-mode";
+import { buildCanvasNodeMentionReferenceMap, buildCanvasResourceReferences } from "@/lib/canvas/canvas-resource-references";
 import { buildSkillMentionReferences } from "@/lib/canvas/canvas-skill-mentions";
+import { buildCanvasSpatialIndex, canvasNodeBounds, type CanvasSpatialIndex, type CanvasSpatialIndexEntry } from "@/lib/canvas/canvas-spatial-index";
 import type { Skill } from "@/services/api/skills";
 import type { Asset, ImageAsset } from "@/stores/use-asset-store";
 import type { DirectorScene } from "@/types/director";
-import { CanvasNodeType, type CanvasConnection, type CanvasMediaPerformanceMode, type CanvasNodeData, type ContextMenuState, type ViewportTransform } from "@/types/canvas";
+import { CanvasNodeType, type CanvasConnection, type CanvasDisplayConnection, type CanvasMediaPerformanceMode, type CanvasNodeData, type ContextMenuState, type ViewportTransform } from "@/types/canvas";
 
 type DragPreview = { x: number; y: number; nodeIds: Set<string> } | null;
 
@@ -74,26 +75,65 @@ export function useCanvasRenderModel({
 }: UseCanvasRenderModelOptions) {
     const reduceMediaEffects = useMemo(() => shouldReduceCanvasMediaEffects(mediaPerformanceMode, nodes), [mediaPerformanceMode, nodes]);
     const nodeById = useMemo(() => new Map(nodes.map((node) => [node.id, node])), [nodes]);
-    const collapsedBatchChildIds = useMemo(() => {
-        const hidden = new Set<string>();
-        nodes.forEach((node) => {
+    // These maps are consumed by both virtualization and node chrome. Building
+    // them together keeps a metadata update from walking a 50k-node array six
+    // separate times before React can paint the next frame.
+    const nodeDerivedData = useMemo(() => {
+        const collapsedBatchChildIds = new Set<string>();
+        const renderHiddenNodeIds = new Set<string>();
+        const frameChildrenById = new Map<string, CanvasNodeData[]>();
+        const canvasImageNodes: CanvasNodeData[] = [];
+        const batchRoots: CanvasNodeData[] = [];
+        const batchMotionById = new Map<string, { x: number; y: number; index: number }>();
+        const batchChildIndexByRootId = new Map<string, Map<string, number>>();
+
+        for (const node of nodes) {
             const rootId = node.metadata?.batchRootId;
-            if (!rootId) return;
+            const root = rootId ? nodeById.get(rootId) : undefined;
+            if (root && !root.metadata?.imageBatchExpanded) {
+                collapsedBatchChildIds.add(node.id);
+                if (!collapsingBatchIds.has(root.id)) renderHiddenNodeIds.add(node.id);
+            }
+
+            if (rootId && collapsingBatchIds.has(rootId)) renderHiddenNodeIds.delete(node.id);
+            const parent = node.parentId ? nodeById.get(node.parentId) : undefined;
+            if (parent && isFrameNode(parent)) {
+                const children = frameChildrenById.get(parent.id);
+                if (children) children.push(node);
+                else frameChildrenById.set(parent.id, [node]);
+                if (parent.metadata?.frame?.collapsed) renderHiddenNodeIds.add(node.id);
+            }
+
+            if (node.metadata?.isBatchRoot) batchRoots.push(node);
+            if (node.type === CanvasNodeType.Image && node.metadata?.content && !collapsedBatchChildIds.has(node.id) && !(parent && isFrameNode(parent) && parent.metadata?.frame?.collapsed)) {
+                canvasImageNodes.push(node);
+            }
+        }
+
+        for (const root of batchRoots) {
+            const childIndex = new Map((root.metadata?.batchChildIds || []).map((childId, index) => [childId, index]));
+            batchChildIndexByRootId.set(root.id, childIndex);
+        }
+        for (const node of nodes) {
+            const rootId = node.metadata?.batchRootId;
+            if (!rootId) continue;
             const root = nodeById.get(rootId);
-            if (root && !root.metadata?.imageBatchExpanded) hidden.add(node.id);
-        });
-        return hidden;
-    }, [nodeById, nodes]);
-    const renderHiddenNodeIds = useMemo(() => {
-        const hidden = new Set(collapsedBatchChildIds);
-        nodes.forEach((node) => {
-            const rootId = node.metadata?.batchRootId;
-            if (rootId && collapsingBatchIds.has(rootId)) hidden.delete(node.id);
-            const parent = node.parentId ? nodeById.get(node.parentId) : null;
-            if (parent && isFrameNode(parent) && parent.metadata?.frame?.collapsed) hidden.add(node.id);
-        });
-        return hidden;
-    }, [collapsedBatchChildIds, collapsingBatchIds, nodeById, nodes]);
+            const index = batchChildIndexByRootId.get(rootId)?.get(node.id) ?? 0;
+            const stackX = root ? root.position.x + 34 + index * 14 : node.position.x;
+            const stackY = root ? root.position.y + 14 + index * 8 : node.position.y;
+            batchMotionById.set(node.id, { x: stackX - node.position.x, y: stackY - node.position.y, index: Math.max(index, 0) });
+        }
+
+        const batchChildCountById = new Map<string, number>();
+        for (const root of batchRoots) {
+            const childIndex = batchChildIndexByRootId.get(root.id);
+            const liveChildCount = [...(childIndex?.keys() || [])].filter((childId) => nodeById.get(childId)?.metadata?.batchRootId === root.id).length;
+            batchChildCountById.set(root.id, liveChildCount);
+        }
+
+        return { batchChildCountById, batchMotionById, canvasImageNodes, collapsedBatchChildIds, frameChildrenById, renderHiddenNodeIds };
+    }, [collapsingBatchIds, nodeById, nodes]);
+    const { batchChildCountById, batchMotionById, canvasImageNodes, collapsedBatchChildIds, frameChildrenById, renderHiddenNodeIds } = nodeDerivedData;
     const connectionLayerBounds = useMemo(() => {
         const padding = (reduceMediaEffects ? 96 : 144) / Math.max(viewport.k, 0.05);
         const left = -viewport.x / viewport.k - padding;
@@ -103,27 +143,70 @@ export function useCanvasRenderModel({
         return { left, top, width: Math.max(2, width), height: Math.max(2, height) };
     }, [reduceMediaEffects, viewport.k, viewport.x, viewport.y, viewportSize.height, viewportSize.width]);
     const renderBounds = useMemo(() => {
-        const padding = (reduceMediaEffects ? 128 : 192) / viewport.k;
-        const viewLeft = -viewport.x / viewport.k - padding;
-        const viewTop = -viewport.y / viewport.k - padding;
-        const viewRight = viewLeft + viewportSize.width / viewport.k + padding * 2;
-        const viewBottom = viewTop + viewportSize.height / viewport.k + padding * 2;
-        return { left: viewLeft, top: viewTop, right: viewRight, bottom: viewBottom };
+        const enterPadding = canvasNodeRenderPadding(reduceMediaEffects, false) / viewport.k;
+        const retainPadding = canvasNodeRenderPadding(reduceMediaEffects, true) / viewport.k;
+        const viewLeft = -viewport.x / viewport.k;
+        const viewTop = -viewport.y / viewport.k;
+        const viewWidth = viewportSize.width / viewport.k;
+        const viewHeight = viewportSize.height / viewport.k;
+        return {
+            enter: { left: viewLeft - enterPadding, top: viewTop - enterPadding, right: viewLeft + viewWidth + enterPadding, bottom: viewTop + viewHeight + enterPadding },
+            retain: { left: viewLeft - retainPadding, top: viewTop - retainPadding, right: viewLeft + viewWidth + retainPadding, bottom: viewTop + viewHeight + retainPadding },
+        };
     }, [reduceMediaEffects, viewport.k, viewport.x, viewport.y, viewportSize.height, viewportSize.width]);
+    const nodeSpatialIndexRef = useRef<{ source: CanvasNodeData[]; index: CanvasSpatialIndex<string> } | null>(null);
+    const nodeSpatialIndex = useMemo(() => {
+        const previous = nodeSpatialIndexRef.current;
+        const geometryUnchanged = previous
+            && previous.source.length === nodes.length
+            && nodes.every((node, index) => {
+                const old = previous.source[index];
+                return old.id === node.id
+                    && old.position.x === node.position.x
+                    && old.position.y === node.position.y
+                    && old.width === node.width
+                    && old.height === node.height;
+            });
+        if (geometryUnchanged) return previous.index;
+        const index = buildCanvasSpatialIndex(nodes.map((node) => ({ id: node.id, bounds: canvasNodeBounds(node), value: node.id })));
+        nodeSpatialIndexRef.current = { source: nodes, index };
+        return index;
+    }, [nodes]);
+    const renderedNodeIdsRef = useRef<Set<string>>(new Set());
     const visibleNodes = useMemo(() => {
         const frames: CanvasNodeData[] = [];
         const regular: CanvasNodeData[] = [];
-        nodes.forEach((node) => {
+        const renderedNodeIds = renderedNodeIdsRef.current;
+        const renderBudget = canvasNodeRenderBudget(viewport.k);
+        const forcedNodeIds = new Set([...selectedNodeIds, ...(dragPreview?.nodeIds || [])].slice(0, renderBudget));
+        const candidates = nodeSpatialIndex.query(renderBounds.retain, renderBudget + forcedNodeIds.size)
+            .map((nodeId) => nodeById.get(nodeId))
+            .filter((node): node is CanvasNodeData => Boolean(node));
+        const candidateIds = new Set(candidates.map((node) => node.id));
+        for (const nodeId of forcedNodeIds) {
+            if (candidateIds.has(nodeId)) continue;
+            const node = nodeById.get(nodeId);
+            if (node) candidates.push(node);
+        }
+        const prioritized = candidates.filter((node) => forcedNodeIds.has(node.id));
+        const remaining = candidates.filter((node) => !forcedNodeIds.has(node.id)).slice(0, Math.max(0, renderBudget - prioritized.length));
+        [...prioritized, ...remaining].forEach((node) => {
             if (renderHiddenNodeIds.has(node.id)) return;
-            const retained = selectedNodeIds.has(node.id) || Boolean(dragPreview?.nodeIds.has(node.id));
-            if (!retained && (node.position.x + node.width <= renderBounds.left || node.position.x >= renderBounds.right || node.position.y + node.height <= renderBounds.top || node.position.y >= renderBounds.bottom)) return;
+            const retained = forcedNodeIds.has(node.id) || renderedNodeIds.has(node.id);
+            const insideEnterBounds = node.position.x + node.width > renderBounds.enter.left
+                && node.position.x < renderBounds.enter.right
+                && node.position.y + node.height > renderBounds.enter.top
+                && node.position.y < renderBounds.enter.bottom;
+            if (!retained && !insideEnterBounds) return;
             (isFrameNode(node) ? frames : regular).push(node);
         });
         return [...frames, ...regular];
-    }, [dragPreview, nodes, renderBounds, renderHiddenNodeIds, selectedNodeIds]);
+    }, [dragPreview, nodeById, nodeSpatialIndex, renderBounds, renderHiddenNodeIds, selectedNodeIds]);
+    useEffect(() => {
+        renderedNodeIdsRef.current = new Set(visibleNodes.map((node) => node.id));
+    }, [visibleNodes]);
 
     const imageAssets = useMemo(() => assets.filter((asset): asset is ImageAsset => asset.kind === "image"), [assets]);
-    const canvasImageNodes = useMemo(() => nodes.filter((node) => node.type === CanvasNodeType.Image && Boolean(node.metadata?.content) && !collapsedBatchChildIds.has(node.id) && !(node.parentId && nodeById.get(node.parentId)?.metadata?.frame?.collapsed)), [collapsedBatchChildIds, nodeById, nodes]);
     const semanticNodesRef = useRef(nodes);
     const semanticNodes = useMemo(() => {
         const previous = semanticNodesRef.current;
@@ -156,53 +239,24 @@ export function useCanvasRenderModel({
 
     const selectedNodeBounds = useMemo(() => {
         if (selectedNodeIds.size < 2) return null;
-        const selectedNodes = nodes.filter((node) => selectedNodeIds.has(node.id) && !renderHiddenNodeIds.has(node.id));
+        const selectedNodes = [...selectedNodeIds]
+            .map((nodeId) => nodeById.get(nodeId))
+            .filter((node): node is CanvasNodeData => Boolean(node && !renderHiddenNodeIds.has(node.id)));
         if (selectedNodes.length < 2) return null;
         const left = Math.min(...selectedNodes.map((node) => node.position.x));
         const top = Math.min(...selectedNodes.map((node) => node.position.y));
         const right = Math.max(...selectedNodes.map((node) => node.position.x + node.width));
         const bottom = Math.max(...selectedNodes.map((node) => node.position.y + node.height));
         return { left, top, width: right - left, height: bottom - top, count: selectedNodes.length };
-    }, [nodes, renderHiddenNodeIds, selectedNodeIds]);
-    const selectedVideoNodes = useMemo(() => nodes
-        .filter((node) => selectedNodeIds.has(node.id) && node.type === CanvasNodeType.Video && Boolean(node.metadata?.content) && !renderHiddenNodeIds.has(node.id))
+    }, [nodeById, renderHiddenNodeIds, selectedNodeIds]);
+    const selectedVideoNodes = useMemo(() => [...selectedNodeIds]
+        .map((nodeId) => nodeById.get(nodeId))
+        .filter((node): node is CanvasNodeData => Boolean(node && node.type === CanvasNodeType.Video && node.metadata?.content && !renderHiddenNodeIds.has(node.id)))
         .sort((a, b) => {
             const shotA = a.metadata?.shotIndex ?? Number.MAX_SAFE_INTEGER;
             const shotB = b.metadata?.shotIndex ?? Number.MAX_SAFE_INTEGER;
             return shotA - shotB || a.position.y - b.position.y || a.position.x - b.position.x;
-        }), [nodes, renderHiddenNodeIds, selectedNodeIds]);
-    const batchChildCountById = useMemo(() => {
-        const map = new Map<string, number>();
-        nodes.forEach((node) => {
-            if (!node.metadata?.isBatchRoot) return;
-            const liveChildCount = (node.metadata.batchChildIds || []).filter((childId) => nodeById.get(childId)?.metadata?.batchRootId === node.id).length;
-            map.set(node.id, liveChildCount);
-        });
-        return map;
-    }, [nodeById, nodes]);
-    const frameChildrenById = useMemo(() => {
-        const map = new Map<string, CanvasNodeData[]>();
-        nodes.forEach((node) => {
-            if (!node.parentId) return;
-            const children = map.get(node.parentId) || [];
-            children.push(node);
-            map.set(node.parentId, children);
-        });
-        return map;
-    }, [nodes]);
-    const batchMotionById = useMemo(() => {
-        const map = new Map<string, { x: number; y: number; index: number }>();
-        nodes.forEach((node) => {
-            const rootId = node.metadata?.batchRootId;
-            if (!rootId) return;
-            const root = nodeById.get(rootId);
-            const index = root?.metadata?.batchChildIds?.indexOf(node.id) ?? 0;
-            const stackX = root ? root.position.x + 34 + index * 14 : node.position.x;
-            const stackY = root ? root.position.y + 14 + index * 8 : node.position.y;
-            map.set(node.id, { x: stackX - node.position.x, y: stackY - node.position.y, index: Math.max(index, 0) });
-        });
-        return map;
-    }, [nodeById, nodes]);
+        }), [nodeById, renderHiddenNodeIds, selectedNodeIds]);
     const relatedHighlight = useMemo(() => {
         const nodeIds = new Set<string>();
         const connectionIds = new Set<string>();
@@ -216,45 +270,89 @@ export function useCanvasRenderModel({
         });
         return { nodeIds, connectionIds };
     }, [activeNodeId, connections]);
-    const displayConnections = useMemo(() => connections.flatMap((connection) => {
-        if (collapsedBatchChildIds.has(connection.fromNodeId) || collapsedBatchChildIds.has(connection.toNodeId)) return [];
-        const fromNode = nodeById.get(connection.fromNodeId);
-        const toNode = nodeById.get(connection.toNodeId);
-        if (!fromNode || !toNode) return [];
-        const fromParent = fromNode.parentId ? nodeById.get(fromNode.parentId) : null;
-        const toParent = toNode.parentId ? nodeById.get(toNode.parentId) : null;
-        const displayFrom = fromParent && isFrameNode(fromParent) && fromParent.metadata?.frame?.collapsed ? fromParent : fromNode;
-        const displayTo = toParent && isFrameNode(toParent) && toParent.metadata?.frame?.collapsed ? toParent : toNode;
-        if (displayFrom.id === displayTo.id) return [];
-        const from = dragPreview?.nodeIds.has(displayFrom.id) ? { ...displayFrom, position: { x: displayFrom.position.x + dragPreview.x, y: displayFrom.position.y + dragPreview.y } } : displayFrom;
-        const to = dragPreview?.nodeIds.has(displayTo.id) ? { ...displayTo, position: { x: displayTo.position.x + dragPreview.x, y: displayTo.position.y + dragPreview.y } } : displayTo;
-        const connectionLeft = Math.min(from.position.x, to.position.x);
-        const connectionTop = Math.min(from.position.y, to.position.y);
-        const connectionRight = Math.max(from.position.x + from.width, to.position.x + to.width);
-        const connectionBottom = Math.max(from.position.y + from.height, to.position.y + to.height);
-        if (connectionRight <= renderBounds.left || connectionLeft >= renderBounds.right || connectionBottom <= renderBounds.top || connectionTop >= renderBounds.bottom) return [];
-        return [{ connection, from, to }];
-    }), [collapsedBatchChildIds, connections, dragPreview, nodeById, renderBounds]);
+    const connectionSpatialIndex = useMemo(() => {
+        const entries: CanvasSpatialIndexEntry<CanvasDisplayConnection>[] = [];
+        const connectionIdsByNodeId = new Map<string, Set<string>>();
+        connections.forEach((connection) => {
+            if (collapsedBatchChildIds.has(connection.fromNodeId) || collapsedBatchChildIds.has(connection.toNodeId)) return;
+            const fromNode = nodeById.get(connection.fromNodeId);
+            const toNode = nodeById.get(connection.toNodeId);
+            if (!fromNode || !toNode) return;
+            const fromParent = fromNode.parentId ? nodeById.get(fromNode.parentId) : null;
+            const toParent = toNode.parentId ? nodeById.get(toNode.parentId) : null;
+            const displayFrom = fromParent && isFrameNode(fromParent) && fromParent.metadata?.frame?.collapsed ? fromParent : fromNode;
+            const displayTo = toParent && isFrameNode(toParent) && toParent.metadata?.frame?.collapsed ? toParent : toNode;
+            if (displayFrom.id === displayTo.id) return;
+            const left = Math.min(displayFrom.position.x, displayTo.position.x);
+            const top = Math.min(displayFrom.position.y, displayTo.position.y);
+            const right = Math.max(displayFrom.position.x + displayFrom.width, displayTo.position.x + displayTo.width);
+            const bottom = Math.max(displayFrom.position.y + displayFrom.height, displayTo.position.y + displayTo.height);
+            const value = { connection, from: displayFrom, to: displayTo };
+            entries.push({ id: connection.id, bounds: { left, top, right, bottom }, value });
+            for (const nodeId of new Set([connection.fromNodeId, connection.toNodeId, displayFrom.id, displayTo.id])) {
+                const ids = connectionIdsByNodeId.get(nodeId) || new Set<string>();
+                ids.add(connection.id);
+                connectionIdsByNodeId.set(nodeId, ids);
+            }
+        });
+        return { index: buildCanvasSpatialIndex(entries), connectionIdsByNodeId, entriesById: new Map(entries.map((entry) => [entry.id, entry.value])) };
+    }, [collapsedBatchChildIds, connections, nodeById]);
+    const displayConnections = useMemo(() => {
+        const candidateById = new Map<string, CanvasDisplayConnection>();
+        connectionSpatialIndex.index.query(renderBounds.retain, CANVAS_MAX_RENDERED_CONNECTIONS).forEach((display) => candidateById.set(display.connection.id, display));
+        dragPreview?.nodeIds.forEach((nodeId) => {
+            connectionSpatialIndex.connectionIdsByNodeId.get(nodeId)?.forEach((connectionId) => {
+                const display = connectionSpatialIndex.entriesById.get(connectionId);
+                if (display) candidateById.set(connectionId, display);
+            });
+        });
+        return [...candidateById.values()].flatMap(({ connection, from: sourceFrom, to: sourceTo }) => {
+            const from = dragPreview?.nodeIds.has(sourceFrom.id) ? { ...sourceFrom, position: { x: sourceFrom.position.x + dragPreview.x, y: sourceFrom.position.y + dragPreview.y } } : sourceFrom;
+            const to = dragPreview?.nodeIds.has(sourceTo.id) ? { ...sourceTo, position: { x: sourceTo.position.x + dragPreview.x, y: sourceTo.position.y + dragPreview.y } } : sourceTo;
+            const connectionLeft = Math.min(from.position.x, to.position.x);
+            const connectionTop = Math.min(from.position.y, to.position.y);
+            const connectionRight = Math.max(from.position.x + from.width, to.position.x + to.width);
+            const connectionBottom = Math.max(from.position.y + from.height, to.position.y + to.height);
+            if (connectionRight <= renderBounds.retain.left || connectionLeft >= renderBounds.retain.right || connectionBottom <= renderBounds.retain.top || connectionTop >= renderBounds.retain.bottom) return [];
+            return [{ connection, from, to }];
+        });
+    }, [connectionSpatialIndex, dragPreview, renderBounds]);
 
     const configInputsById = useMemo(() => {
         const map = new Map<string, NodeGenerationInput[]>();
-        semanticNodes.forEach((node) => {
-            if (node.type === CanvasNodeType.Config) map.set(node.id, buildNodeGenerationInputs(node.id, semanticNodes, connections));
+        const configNodeIds = new Set<string>();
+        visibleNodes.forEach((node) => {
+            if (node.type === CanvasNodeType.Config) configNodeIds.add(node.id);
         });
+        selectedNodeIds.forEach((nodeId) => {
+            if (nodeById.get(nodeId)?.type === CanvasNodeType.Config) configNodeIds.add(nodeId);
+        });
+        if (dialogNodeId && nodeById.get(dialogNodeId)?.type === CanvasNodeType.Config) configNodeIds.add(dialogNodeId);
+        configNodeIds.forEach((nodeId) => map.set(nodeId, buildNodeGenerationInputs(nodeId, semanticNodes, connections)));
         return map;
-    }, [connections, semanticNodes]);
+    }, [connections, dialogNodeId, nodeById, selectedNodeIds, semanticNodes, visibleNodes]);
     const activeDirectorNode = useMemo(() => semanticNodes.find((node) => node.id === directorNodeId) || null, [directorNodeId, semanticNodes]);
     const activeStylePresetId = useMemo(() => semanticNodes.find((node) => node.metadata?.workflowKind === "styleboard")?.metadata?.stylePresetId, [semanticNodes]);
     const activeScriptNode = useMemo(() => semanticNodes.find((node) => node.id === scriptEditorNodeId && node.type === CanvasNodeType.Script) || null, [scriptEditorNodeId, semanticNodes]);
     const activeDirectorScene = useMemo(() => directorScenes?.find((scene) => scene.id === activeDirectorNode?.metadata?.directorSceneId) || null, [activeDirectorNode?.metadata?.directorSceneId, directorScenes]);
-    const canvasResourceReferences = useMemo(() => buildCanvasResourceReferences(semanticNodes, connections, dialogNodeId || activeNodeId), [activeNodeId, connections, dialogNodeId, semanticNodes]);
+    const resourceReferenceTargetNodes = useMemo(() => {
+        const targetNodes = [...visibleNodes];
+        const activeId = dialogNodeId || activeNodeId;
+        if (activeId) {
+            const activeNode = nodeById.get(activeId);
+            if (activeNode) targetNodes.push(activeNode);
+        }
+        return targetNodes;
+    }, [activeNodeId, dialogNodeId, nodeById, visibleNodes]);
+    const canvasResourceReferences = useMemo(() => buildCanvasResourceReferences(semanticNodes, connections, dialogNodeId || activeNodeId, resourceReferenceTargetNodes), [activeNodeId, connections, dialogNodeId, resourceReferenceTargetNodes, semanticNodes]);
     const resourceReferenceByNodeId = useMemo(() => new Map(canvasResourceReferences.map((reference) => [reference.nodeId, reference])), [canvasResourceReferences]);
     const skillMentionReferences = useMemo(() => buildSkillMentionReferences(addedSkills), [addedSkills]);
     const mentionReferencesByNodeId = useMemo(() => {
-        const map = new Map<string, ReturnType<typeof buildNodeMentionReferences>>();
-        semanticNodes.forEach((node) => map.set(node.id, [...buildNodeMentionReferences(node, semanticNodes, connections), ...skillMentionReferences]));
+        const map = buildCanvasNodeMentionReferenceMap(semanticNodes, connections, visibleNodes);
+        if (!skillMentionReferences.length) return map;
+        map.forEach((references, nodeId) => map.set(nodeId, [...references, ...skillMentionReferences]));
         return map;
-    }, [connections, semanticNodes, skillMentionReferences]);
+    }, [connections, semanticNodes, skillMentionReferences, visibleNodes]);
 
     return {
         activeDirectorNode,
diff --git a/web/src/pages/canvas/use-canvas-selection-controller.ts b/web/src/pages/canvas/use-canvas-selection-controller.ts
index c073d2d96..25a0d47fc 100644
--- a/web/src/pages/canvas/use-canvas-selection-controller.ts
+++ b/web/src/pages/canvas/use-canvas-selection-controller.ts
@@ -1,8 +1,9 @@
 import { useCallback, useEffect, useRef, useState, type Dispatch, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type RefObject, type SetStateAction } from "react";
 
-import { applyCanvasSelectionPreview } from "@/lib/canvas/canvas-live-viewport";
-import { calculateNodeAlignment, createNodeAlignmentContext, isHiddenBatchChild, sameStringSet, type NodeAlignmentContext } from "@/lib/canvas/canvas-project-domain";
-import { applyFrameDrop, findFrameDropTarget, getFrameChildIds, isFrameNode, isNodeHiddenByCollapsedFrame } from "@/lib/canvas/canvas-frame";
+import { applyCanvasNodeDragPreview, applyCanvasSelectionPreview } from "@/lib/canvas/canvas-live-viewport";
+import { calculateNodeAlignment, createNodeAlignmentContext, sameStringSet, type NodeAlignmentContext } from "@/lib/canvas/canvas-project-domain";
+import { applyFrameDrop, buildCanvasFrameDropIndex, findFrameDropTargetFromIndex, getFrameChildIds, isFrameNode } from "@/lib/canvas/canvas-frame";
+import { buildCanvasSpatialIndex, canvasNodeBounds, type CanvasSpatialIndex } from "@/lib/canvas/canvas-spatial-index";
 import type { CanvasNodeData, Position, SelectionBox, ViewportTransform } from "@/types/canvas";
 
 type UseCanvasSelectionControllerOptions = {
@@ -34,6 +35,8 @@ type DragState = {
     startX: number;
     startY: number;
     draggedNodeIds: string[];
+    draggedRenderNodeIds: string[];
+    draggedRenderNodeIdSet: Set<string>;
     initialSelectedNodes: Array<{ id: string; x: number; y: number }>;
 };
 
@@ -44,6 +47,8 @@ const EMPTY_DRAG_STATE: DragState = {
     startX: 0,
     startY: 0,
     draggedNodeIds: [],
+    draggedRenderNodeIds: [],
+    draggedRenderNodeIdSet: new Set(),
     initialSelectedNodes: [],
 };
 
@@ -75,12 +80,14 @@ export function useCanvasSelectionController({
     const lastFrameDropCheckRef = useRef(0);
     const selectionFrameRef = useRef<number | null>(null);
     const selectionBoundsElementRef = useRef<HTMLDivElement>(null);
-    const selectionCandidatesRef = useRef<Array<{ id: string; left: number; top: number; right: number; bottom: number }>>([]);
+    const selectionSpatialIndexRef = useRef<CanvasSpatialIndex<CanvasNodeData>>(buildCanvasSpatialIndex([]));
     const pendingSelectionPointRef = useRef<Position | null>(null);
     const selectionActivatedRef = useRef(false);
     const selectionBoxRef = useRef<SelectionBox | null>(null);
     const nodeDraggingRef = useRef(false);
     const dragRef = useRef<DragState>({ ...EMPTY_DRAG_STATE });
+    const frameDropIndexRef = useRef(buildCanvasFrameDropIndex([]));
+    const draggedNodesRef = useRef<CanvasNodeData[]>([]);
     const [selectionBox, setSelectionBox] = useState<SelectionBox | null>(null);
     const [frameDropTargetId, setFrameDropTargetId] = useState<string | null>(null);
     const [isNodeDragging, setIsNodeDragging] = useState(false);
@@ -89,7 +96,6 @@ export function useCanvasSelectionController({
 
     const cancelSelectionBox = useCallback(() => {
         selectionBoxRef.current = null;
-        selectionCandidatesRef.current = [];
         pendingSelectionPointRef.current = null;
         selectionActivatedRef.current = false;
         if (selectionFrameRef.current) cancelAnimationFrame(selectionFrameRef.current);
@@ -125,9 +131,16 @@ export function useCanvasSelectionController({
         };
         selectionBoxRef.current = nextSelectionBox;
         selectionActivatedRef.current = false;
-        selectionCandidatesRef.current = nodesRef.current
-            .filter((node) => !isHiddenBatchChild(node, nodesRef.current) && !isNodeHiddenByCollapsedFrame(node, nodesRef.current))
-            .map((node) => ({ id: node.id, left: node.position.x, top: node.position.y, right: node.position.x + node.width, bottom: node.position.y + node.height }));
+        const currentNodes = nodesRef.current;
+        const nodeById = new Map(currentNodes.map((node) => [node.id, node]));
+        const hiddenBatchChildIds = new Set(currentNodes.flatMap((node) => {
+            const rootId = node.metadata?.batchRootId;
+            const root = rootId ? nodeById.get(rootId) : undefined;
+            return root && !root.metadata?.imageBatchExpanded ? [node.id] : [];
+        }));
+        selectionSpatialIndexRef.current = buildCanvasSpatialIndex(currentNodes
+            .filter((node) => !hiddenBatchChildIds.has(node.id) && !(node.parentId && nodeById.get(node.parentId)?.metadata?.frame?.collapsed))
+            .map((node) => ({ id: node.id, bounds: canvasNodeBounds(node), value: node })));
         setSelectedConnectionId(null);
     }, [cancelPendingConnectionCreate, nodesRef, onCanvasSelectionStart, screenToCanvas, selectedNodeIdsRef, setSelectedConnectionId]);
 
@@ -181,7 +194,11 @@ export function useCanvasSelectionController({
         const initialSelectedNodes = currentNodes.filter((node) => dragIds.has(node.id) && !node.metadata?.locked).map((node) => ({ id: node.id, x: node.position.x, y: node.position.y }));
         if (!initialSelectedNodes.length) return;
 
-        dragRef.current = { isDraggingNode: true, hasMoved: false, openPanelOnClick: !isMultiSelectClick, startX: event.clientX, startY: event.clientY, draggedNodeIds, initialSelectedNodes };
+        frameDropIndexRef.current = buildCanvasFrameDropIndex(currentNodes);
+        draggedNodesRef.current = currentNodes.filter((node) => dragIds.has(node.id) && !node.metadata?.locked);
+        const draggedRenderNodeIds = initialSelectedNodes.map((item) => item.id);
+        const draggedRenderNodeIdSet = new Set(draggedRenderNodeIds);
+        dragRef.current = { isDraggingNode: true, hasMoved: false, openPanelOnClick: !isMultiSelectClick, startX: event.clientX, startY: event.clientY, draggedNodeIds, draggedRenderNodeIds, draggedRenderNodeIdSet, initialSelectedNodes };
         historyPausedRef.current = true;
         nodeDraggingRef.current = true;
         pendingNodeDragRef.current = { x: 0, y: 0 };
@@ -189,8 +206,9 @@ export function useCanvasSelectionController({
         lastFrameDropCheckRef.current = 0;
         setIsNodeDragging(true);
         setAlignmentGuides({});
-        setDragPreview({ x: 0, y: 0, nodeIds: new Set(initialSelectedNodes.map((item) => item.id)) });
-    }, [historyPausedRef, nodesRef, onBatchConnectionTarget, onNodeBringToFront, onNodeClick, onNodeInteractionStart, selectedNodeIdsRef, setSelectedConnectionId, setSelectedNodeIds]);
+        setDragPreview({ x: 0, y: 0, nodeIds: draggedRenderNodeIdSet });
+        applyCanvasNodeDragPreview(containerRef.current, { x: 0, y: 0, nodeIds: draggedRenderNodeIdSet });
+    }, [containerRef, historyPausedRef, nodesRef, onBatchConnectionTarget, onNodeBringToFront, onNodeClick, onNodeInteractionStart, selectedNodeIdsRef, setSelectedConnectionId, setSelectedNodeIds]);
 
     const finishNodeDrag = useCallback((clientX?: number, clientY?: number) => {
         if (dragFrameRef.current) {
@@ -209,6 +227,7 @@ export function useCanvasSelectionController({
 
         historyPausedRef.current = false;
         nodeDraggingRef.current = false;
+        applyCanvasNodeDragPreview(containerRef.current, null);
         setIsNodeDragging(false);
         setDragPreview(null);
         setAlignmentGuides({});
@@ -218,7 +237,7 @@ export function useCanvasSelectionController({
                 const initial = initialById.get(node.id);
                 return initial ? { ...node, position: { x: initial.x + dx, y: initial.y + dy } } : node;
             });
-            const targetId = findFrameDropTarget(positioned, draggedNodeIds);
+            const targetId = findFrameDropTargetFromIndex(frameDropIndexRef.current, draggedNodesRef.current, draggedNodeIds, { x: dx, y: dy });
             const target = targetId ? positioned.find((node) => node.id === targetId) : undefined;
             const linkedFolder = target?.metadata?.folder?.assetFolderId ? target : undefined;
             // 素材库文件夹只建立归档关系，不把画布节点变成其本地子节点。
@@ -228,6 +247,7 @@ export function useCanvasSelectionController({
         }
         setFrameDropTargetId(null);
         alignmentContextRef.current = null;
+        draggedNodesRef.current = [];
         dragRef.current = { ...EMPTY_DRAG_STATE };
         if (wasClick && clickedNodeId) {
             const clickedNode = nodesRef.current.find((node) => node.id === clickedNodeId);
@@ -245,23 +265,22 @@ export function useCanvasSelectionController({
             const aligned = calculateNodeAlignment(alignmentContextRef.current, pendingNodeDragRef.current, 7 / viewportRef.current.k);
             const latest = aligned.offset;
             pendingAlignmentGuidesRef.current = aligned.guides;
-            const initialById = new Map(dragRef.current.initialSelectedNodes.map((item) => [item.id, item]));
             const now = performance.now();
             if (now - lastFrameDropCheckRef.current >= 100) {
                 lastFrameDropCheckRef.current = now;
                 const draggedNodeIds = new Set(dragRef.current.draggedNodeIds);
-                const positioned = nodesRef.current.map((node) => {
-                    const initial = initialById.get(node.id);
-                    return initial ? { ...node, position: { x: initial.x + latest.x, y: initial.y + latest.y } } : node;
-                });
-                setFrameDropTargetId(findFrameDropTarget(positioned, draggedNodeIds));
+                setFrameDropTargetId(findFrameDropTargetFromIndex(frameDropIndexRef.current, draggedNodesRef.current, draggedNodeIds, latest));
             }
-            setDragPreview((current) => current ? { ...current, x: latest.x, y: latest.y } : current);
+            applyCanvasNodeDragPreview(containerRef.current, {
+                x: latest.x,
+                y: latest.y,
+                nodeIds: dragRef.current.draggedRenderNodeIdSet,
+            });
             const nextGuides = dragRef.current.hasMoved ? pendingAlignmentGuidesRef.current : {};
             setAlignmentGuides((current) => current.vertical === nextGuides.vertical && current.horizontal === nextGuides.horizontal ? current : nextGuides);
             dragFrameRef.current = null;
         });
-    }, [nodesRef, viewportRef]);
+    }, [containerRef, viewportRef]);
 
     const handlePointerMove = useCallback((event: PointerEvent) => {
         if (dragRef.current.isDraggingNode) {
@@ -302,8 +321,7 @@ export function useCanvasSelectionController({
             selectionBoxRef.current = selection;
             applyCanvasSelectionPreview(containerRef.current, selection);
             const nextSelected = new Set<string>(selection.additive || selection.subtractive ? selection.initialSelectedNodeIds : []);
-            selectionCandidatesRef.current.forEach((node) => {
-                if (rectX >= node.right || rectX + rectW <= node.left || rectY >= node.bottom || rectY + rectH <= node.top) return;
+            selectionSpatialIndexRef.current.query({ left: rectX, top: rectY, right: rectX + Math.max(rectW, 0.01), bottom: rectY + Math.max(rectH, 0.01) }).forEach((node) => {
                 if (selection.subtractive) nextSelected.delete(node.id);
                 else nextSelected.add(node.id);
             });
@@ -337,6 +355,7 @@ export function useCanvasSelectionController({
         return () => {
             if (dragFrameRef.current) cancelAnimationFrame(dragFrameRef.current);
             if (selectionFrameRef.current) cancelAnimationFrame(selectionFrameRef.current);
+            applyCanvasNodeDragPreview(containerRef.current, null);
             window.removeEventListener("mousemove", handleNodeDragMove);
             window.removeEventListener("mouseup", handleMouseUp);
             window.removeEventListener("pointermove", handlePointerMove);
diff --git a/web/src/router.tsx b/web/src/router.tsx
index c1d794720..4d0f4baa7 100644
--- a/web/src/router.tsx
+++ b/web/src/router.tsx
@@ -4,7 +4,7 @@ import { createBrowserRouter, Navigate, Outlet } from "react-router";
 import { RequireAuth } from "@/components/auth/require-auth";
 import { RequireFeature } from "@/components/auth/require-feature";
 import { FullScreenLoader, WorkspaceRouteLoader } from "@/components/ui/aceternity/full-screen-loader";
-import { loadAssetsPage, loadCanvasPage, loadCreatePage, loadProjectsPage, loadWalletPage } from "@/lib/workspace-route-modules";
+import { loadAssetsPage, loadCanvasPage, loadCanvasProjectPage, loadCreatePage, loadProjectsPage, loadWalletPage } from "@/lib/workspace-route-modules";
 import UserLayout from "@/layouts/user-layout";
 import { AuthScene } from "@/pages/auth/auth-scene";
 import RouteErrorPage from "@/pages/route-error";
@@ -36,10 +36,9 @@ const LoginPage = lazy(() => import("@/pages/auth/login"));
 const RegisterPage = lazy(() => import("@/pages/auth/register"));
 const ForgotPasswordPage = lazy(() => import("@/pages/auth/forgot-password"));
 const CanvasPage = lazy(loadCanvasPage);
-const CanvasProjectPage = lazy(() => import("@/pages/canvas/project"));
+const CanvasProjectPage = lazy(loadCanvasProjectPage);
 const SharedCanvasPage = lazy(() => import("@/pages/canvas/shared"));
 const CreatePage = lazy(loadCreatePage);
-const HomePage = lazy(() => import("@/pages/home"));
 const NotFound = lazy(() => import("@/pages/not-found"));
 const SkillsPage = lazy(() => import("@/pages/skills"));
 const PluginsPage = lazy(() => import("@/pages/plugins"));
@@ -96,9 +95,7 @@ export const router = createBrowserRouter([
         ),
         errorElement: <RouteErrorPage />,
         children: [
-            { path: "/", element: <Navigate to="/create" replace /> },
-            { path: "/create", element: <RequireAuth>{deferred(<CreatePage />)}</RequireAuth> },
-            { path: "/home", element: deferred(<HomePage />) },
+            { path: "/", element: <RequireAuth>{deferred(<CreatePage />)}</RequireAuth> },
             {
                 path: "/tasks",
                 element: (
diff --git a/web/src/services/user-data-sync.ts b/web/src/services/user-data-sync.ts
index 371783ed6..b26f63988 100644
--- a/web/src/services/user-data-sync.ts
+++ b/web/src/services/user-data-sync.ts
@@ -2,6 +2,7 @@ import { getMediaBlob } from "@/services/file-storage";
 import { getImageBlob } from "@/services/image-storage";
 import { deleteRemoteAsset, deleteRemoteCanvasProject, getRemoteUserDataSnapshot, upsertRemoteAsset, upsertRemoteCanvasProject } from "@/services/api/user-data";
 import { resourceFileUrl, resourceIdFromStorageKey, resourceStorageKey, uploadResourceFile } from "@/services/api/resources";
+import { assetForRemoteSync } from "@/lib/asset-remote-sync";
 import type { Asset } from "@/stores/use-asset-store";
 import { flushAssetStorePersistence, useAssetStore } from "@/stores/use-asset-store";
 import type { CanvasProject } from "@/stores/canvas/use-canvas-store";
@@ -184,7 +185,7 @@ async function saveRemoteUserDataBatch() {
         acknowledgedProjects.set(source.id, source);
     }
     for (const source of dirtyAssets) {
-        const remotePayload = await ensureRemoteResourceReferences(source, uploaded);
+        const remotePayload = await ensureRemoteResourceReferences(assetForRemoteSync(source), uploaded);
         await upsertRemoteAsset(remotePayload);
         acknowledgedAssets.set(source.id, source);
     }
diff --git a/web/src/stores/canvas/use-canvas-store.ts b/web/src/stores/canvas/use-canvas-store.ts
index 7b2279749..bc755c6ef 100644
--- a/web/src/stores/canvas/use-canvas-store.ts
+++ b/web/src/stores/canvas/use-canvas-store.ts
@@ -260,6 +260,7 @@ function pendingGenerationAttempt(scope: string, projectId: string, effectKeys?:
 }
 
 function ordinaryCanvasProjectSnapshot(scope: string, project: CanvasProject, durableProject: CanvasProject | undefined) {
+    if (!hasGenerationEffectKeys(project) && !hasGenerationEffectKeys(durableProject)) return project;
     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;
@@ -288,7 +289,7 @@ function ordinaryCanvasProjectSnapshot(scope: string, project: CanvasProject, du
             }
             continue;
         }
-        if (JSON.stringify(localKeys) === JSON.stringify(durableKeys)) {
+        if (sameGenerationEffectKeys(localKeys, durableKeys)) {
             nodes.push(node);
             continue;
         }
@@ -318,7 +319,7 @@ function ordinaryCanvasProjectSnapshot(scope: string, project: CanvasProject, du
             }
             continue;
         }
-        if (JSON.stringify(session.generationEffectKeys) === JSON.stringify(durableKeys)) {
+        if (sameGenerationEffectKeys(session.generationEffectKeys, durableKeys)) {
             chatSessions.push(session);
             continue;
         }
@@ -341,6 +342,19 @@ function ordinaryCanvasProjectSnapshot(scope: string, project: CanvasProject, du
     return changed ? { ...project, nodes, chatSessions } : project;
 }
 
+function hasGenerationEffectKeys(value: CanvasProject | undefined) {
+    if (!value) return false;
+    return value.nodes.some((node) => Boolean(node.metadata?.generationEffectKeys?.length))
+        || value.chatSessions.some((session) => Boolean(session.generationEffectKeys?.length));
+}
+
+function sameGenerationEffectKeys(left?: readonly string[], right?: readonly string[]) {
+    if (left === right) return true;
+    if (!left?.length && !right?.length) return true;
+    if (!left || !right || left.length !== right.length) return false;
+    return left.every((value, index) => value === right[index]);
+}
+
 function ordinaryCanvasPersistenceState(scope: string, state: PersistedCanvasState, durableProjects: CanvasProject[]) {
     const durableById = new Map(durableProjects.map((project) => [project.id, project]));
     return {
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index 16a9f8436..4a8f3669d 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -3860,6 +3860,8 @@
     .canvas-folder-preview .canvas-project-media img { filter: saturate(.94) contrast(1.02); transition: transform 420ms var(--motion-ease-out), filter 240ms ease-out; }
     .canvas-folder-card:hover .canvas-folder-preview .canvas-project-media img { filter: saturate(1) contrast(1.04); transform: scale(1.025); }
     .canvas-folder-preview .canvas-project-preview-canvas { background: var(--canvas-cover-surface); }
+    .canvas-folder-opening { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: var(--space-2); background: color-mix(in srgb, var(--background) 78%, transparent); color: var(--foreground); font-size: var(--fs-caption); font-weight: 600; backdrop-filter: blur(3px); }
+    .canvas-folder-card.is-opening { pointer-events: none; }
 
     .canvas-folder-body {
         display: flex;
@@ -9324,6 +9326,13 @@
         transition: none !important;
     }
 
+    /* 平移时优先保证世界层合成，暂时关闭每个媒体卡片的滤镜和阴影绘制。 */
+    [data-canvas-viewport-interacting="true"] :where(.canvas-node-shell, .canvas-frame-shell, .canvas-folder-preview, .canvas-folder-front, .aceternity-comet-card) {
+        box-shadow: none !important;
+        filter: none !important;
+        backdrop-filter: none !important;
+    }
+
     /* 静止期用最终倍率重新排版 DOM，避免 Windows Chromium 复用交互期的低分辨率合成纹理。 */
     .canvas-world-layer {
         transform: translate(var(--canvas-live-x), var(--canvas-live-y)) scale(var(--canvas-live-scale-ratio));
diff --git a/web/src/types/canvas.ts b/web/src/types/canvas.ts
index e753edf81..807ed0954 100644
--- a/web/src/types/canvas.ts
+++ b/web/src/types/canvas.ts
@@ -340,6 +340,7 @@ export type CanvasNodeMetadata = {
     versionLabel?: string;
     versionPrimary?: boolean;
     copiedFromNodeId?: string;
+    generationResultPlacement?: "replace-node" | "new-version";
     directorSceneId?: string;
     directorShotId?: string;
     directorPreviewNodeId?: string;
diff --git a/web/test/asset-remote-sync.test.ts b/web/test/asset-remote-sync.test.ts
new file mode 100644
index 000000000..ee25caad9
--- /dev/null
+++ b/web/test/asset-remote-sync.test.ts
@@ -0,0 +1,37 @@
+import { describe, expect, test } from "bun:test";
+
+import { assetForRemoteSync } from "@/lib/asset-remote-sync";
+import type { Asset } from "@/stores/use-asset-store";
+
+function imageAsset(primaryVersionId?: string): Asset {
+    return {
+        id: "asset-1",
+        kind: "image",
+        title: "测试素材",
+        coverUrl: "opaque://asset",
+        tags: [],
+        primaryVersionId,
+        createdAt: "2026-09-01T00:00:00.000Z",
+        updatedAt: "2026-09-01T00:00:00.000Z",
+        data: { dataUrl: "opaque://asset", width: 1, height: 1, bytes: 1, mimeType: "image/png" },
+    };
+}
+
+describe("asset remote sync", () => {
+    test("removes an invalid historical primary version id only from the remote payload", () => {
+        const source = imageAsset("generation-result:" + "x".repeat(40));
+
+        const remote = assetForRemoteSync(source);
+
+        expect(remote.primaryVersionId).toBeUndefined();
+        expect(source.primaryVersionId).toBe("generation-result:" + "x".repeat(40));
+        expect(remote).not.toBe(source);
+    });
+
+    test("preserves a valid backend version uuid", () => {
+        const source = imageAsset("123e4567-e89b-12d3-a456-426614174000");
+
+        expect(assetForRemoteSync(source)).toBe(source);
+        expect(source.primaryVersionId).toBe("123e4567-e89b-12d3-a456-426614174000");
+    });
+});
diff --git a/web/test/canvas-folder.test.ts b/web/test/canvas-folder.test.ts
index af84e38ad..9c25616c4 100644
--- a/web/test/canvas-folder.test.ts
+++ b/web/test/canvas-folder.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, test } from "bun:test";
 
-import { applyFrameDrop, canFolderContain, canLinkedFolderArchive, findFrameDropTarget, isCanvasFolderNode } from "@/lib/canvas/canvas-frame";
+import { applyFrameDrop, buildCanvasFrameDropIndex, canFolderContain, canLinkedFolderArchive, findFrameDropTarget, findFrameDropTargetFromIndex, isCanvasFolderNode } from "@/lib/canvas/canvas-frame";
 import { resolveCanvasFolderTheme, resolveCanvasFolderThemeCover } from "@/lib/canvas/canvas-folder-theme";
 import { CanvasNodeType, type CanvasNodeData } from "@/types/canvas";
 
@@ -66,6 +66,16 @@ describe("canvas folders", () => {
         expect(nextFolder.metadata?.frame?.expandedHeight).toBeGreaterThan(dragged.height);
     });
 
+    test("空间索引画框落点与常规落点一致", () => {
+        const target = folder("folder");
+        const dragged = image("image");
+        const nodes = [target, dragged];
+        const index = buildCanvasFrameDropIndex(nodes);
+
+        expect(findFrameDropTargetFromIndex(index, [dragged], new Set([dragged.id]), { x: 0, y: 0 })).toBe(findFrameDropTarget(nodes, new Set([dragged.id])));
+        expect(findFrameDropTargetFromIndex(index, [dragged], new Set([dragged.id]), { x: 400, y: 400 })).toBeNull();
+    });
+
     test("素材库链接文件夹只接收可归档的真实内容节点", () => {
         const target = folder("linked", true);
         const ready = image("ready");
diff --git a/web/test/canvas-generation-layout.test.ts b/web/test/canvas-generation-layout.test.ts
index 2672397f5..77c84ad61 100644
--- a/web/test/canvas-generation-layout.test.ts
+++ b/web/test/canvas-generation-layout.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, test } from "bun:test";
 
-import { canGenerateImageInPlace, findAvailableGenerationGroupPosition, imageGenerationGroupSize } from "../src/lib/canvas/canvas-generation-layout";
+import { canGenerateImageInPlace, canGenerateMediaInPlace, findAvailableGenerationGroupPosition, imageGenerationGroupSize } from "../src/lib/canvas/canvas-generation-layout";
 import { CanvasNodeType, type CanvasNodeData } from "../src/types/canvas";
 
 function node(id: string, x: number, y: number, width = 340, height = 240): CanvasNodeData {
@@ -28,9 +28,17 @@ describe("findAvailableGenerationGroupPosition", () => {
 });
 
 describe("canGenerateImageInPlace", () => {
-    test("只有空图片节点复用原节点", () => {
+    test("空图片和显式复制节点复用原节点", () => {
         expect(canGenerateImageInPlace(node("empty", 0, 0))).toBe(true);
         expect(canGenerateImageInPlace({ ...node("result", 0, 0), metadata: { content: "image-url" } })).toBe(false);
+        expect(canGenerateImageInPlace({ ...node("copy", 0, 0), metadata: { content: "image-url", generationResultPlacement: "replace-node" } })).toBe(true);
+        expect(canGenerateImageInPlace({ ...node("copy", 0, 0), metadata: { content: "image-url", generationResultPlacement: "new-version", copiedFromNodeId: "source" } })).toBe(false);
         expect(canGenerateImageInPlace({ ...node("text", 0, 0), type: CanvasNodeType.Text })).toBe(false);
     });
+
+    test("视频复制节点与图片使用相同的结果落点规则", () => {
+        const video = { ...node("video-copy", 0, 0), type: CanvasNodeType.Video, metadata: { content: "video-url", generationResultPlacement: "replace-node" as const } };
+        expect(canGenerateMediaInPlace(video, CanvasNodeType.Video)).toBe(true);
+        expect(canGenerateMediaInPlace({ ...video, metadata: { ...video.metadata, generationResultPlacement: "new-version" } }, CanvasNodeType.Video)).toBe(false);
+    });
 });
diff --git a/web/test/canvas-media-performance.test.ts b/web/test/canvas-media-performance.test.ts
index 4ce9aa3e0..35bd53a88 100644
--- a/web/test/canvas-media-performance.test.ts
+++ b/web/test/canvas-media-performance.test.ts
@@ -3,7 +3,7 @@ import { resolve } from "node:path";
 
 import { describe, expect, test } from "bun:test";
 
-import { resolveActiveCanvasMediaNodeId } from "../src/lib/canvas/canvas-performance-mode";
+import { canvasNodeRenderPadding, resolveActiveCanvasMediaNodeId } from "../src/lib/canvas/canvas-performance-mode";
 import { videoMetadata } from "../src/lib/canvas/canvas-generation-task-sync";
 import { canvasNodeVideoPreviewUrl, canvasVideoAssetPreviewUrl } from "../src/lib/canvas/canvas-media-preview";
 import { collectImageStorageKeys } from "../src/services/image-storage";
@@ -15,6 +15,8 @@ const canvasAudioPlayerSource = readFileSync(resolve(import.meta.dir, "../src/co
 const canvasMentionSource = readFileSync(resolve(import.meta.dir, "../src/components/canvas/canvas-resource-mention-textarea.tsx"), "utf8");
 const canvasNodeSource = readFileSync(resolve(import.meta.dir, "../src/components/canvas/canvas-node.tsx"), "utf8");
 const videoPlayerSource = readFileSync(resolve(import.meta.dir, "../src/components/video-player.tsx"), "utf8");
+const canvasProjectSource = readFileSync(resolve(import.meta.dir, "../src/pages/canvas/project.tsx"), "utf8");
+const globalStylesSource = readFileSync(resolve(import.meta.dir, "../src/styles/globals.css"), "utf8");
 
 function node(id: string, type: CanvasNodeType): CanvasNodeData {
     return { id, type, title: id, position: { x: 0, y: 0 }, width: 320, height: 180, metadata: {} };
@@ -44,6 +46,29 @@ describe("canvas dimension header rendering", () => {
     });
 });
 
+describe("large canvas media rendering", () => {
+    test("keeps rendered nodes mounted longer than newly entering nodes", () => {
+        expect(canvasNodeRenderPadding(true, false)).toBe(128);
+        expect(canvasNodeRenderPadding(true, true)).toBe(640);
+        expect(canvasNodeRenderPadding(false, true)).toBeGreaterThan(canvasNodeRenderPadding(false, false));
+    });
+
+    test("does not eagerly load or resize LibTV thumbnails", () => {
+        expect(canvasNodeContentSource).toContain('loading="lazy"');
+        expect(canvasNodeContentSource).not.toContain('importedFromLibTV ? "eager"');
+        expect(canvasNodeContentSource).toContain("if (importedFromLibTV) return;");
+    });
+
+    test("keeps canvas node action context stable across viewport renders", () => {
+        expect(canvasProjectSource).toContain("const canvasNodeActions = useMemo<CanvasNodeActionContextValue>");
+        expect(canvasProjectSource).toContain("<CanvasNodeActionContext.Provider value={canvasNodeActions}>");
+    });
+
+    test("keeps node shells visible while panning and zooming", () => {
+        expect(globalStylesSource).not.toMatch(/\[data-canvas-viewport-interacting="true"\]\s+\.canvas-node-shell\s*\{[^}]*content-visibility:\s*hidden/);
+    });
+});
+
 describe("audio canvas interaction", () => {
     test("uses a lightweight player without a native audio element or inactive mask", () => {
         expect(canvasNodeContentSource).toContain("<CanvasAudioPlayer node={node} theme={theme} />");
diff --git a/web/test/canvas-node-copy.test.ts b/web/test/canvas-node-copy.test.ts
index fa3c813c8..ba4b14ad3 100644
--- a/web/test/canvas-node-copy.test.ts
+++ b/web/test/canvas-node-copy.test.ts
@@ -1,6 +1,8 @@
 import { describe, expect, test } from "bun:test";
 
-import { nextCopiedNodeTitle } from "@/lib/canvas/canvas-node-copy";
+import { isolateCopiedNodeMetadata, nextCopiedNodeTitle } from "@/lib/canvas/canvas-node-copy";
+import { buildNodeGenerationContext } from "@/components/canvas/canvas-node-generation";
+import { CanvasNodeType, type CanvasNodeData } from "@/types/canvas";
 
 describe("canvas node copy title", () => {
     test("首次复制使用 copy1，后续按已有最大序号递增", () => {
@@ -25,3 +27,57 @@ describe("canvas node copy title", () => {
         expect([first, second]).toEqual(["节点_copy2", "节点_copy3"]);
     });
 });
+
+describe("canvas generation copy metadata", () => {
+    test("媒体副本保留提示词与参考字段，并明确原地回填生成结果", () => {
+        const source: CanvasNodeData = {
+            id: "source",
+            type: CanvasNodeType.Video,
+            title: "镜头",
+            position: { x: 0, y: 0 },
+            width: 340,
+            height: 240,
+            metadata: {
+                content: "video-url",
+                prompt: "相同提示词",
+                videoStartFrameNodeId: "reference-start",
+                videoEndFrameNodeId: "reference-end",
+                generationResultPlacement: "new-version",
+            },
+        };
+
+        const metadata = isolateCopiedNodeMetadata(source, new Map([[source.id, "copy"]]));
+
+        expect(metadata.prompt).toBe("相同提示词");
+        expect(metadata.videoStartFrameNodeId).toBe("reference-start");
+        expect(metadata.videoEndFrameNodeId).toBe("reference-end");
+        expect(metadata.copiedFromNodeId).toBe("source");
+        expect(metadata.generationResultPlacement).toBe("replace-node");
+    });
+
+    test("复制到副本的入边继续解析为同一张参考图", () => {
+        const reference: CanvasNodeData = {
+            id: "reference",
+            type: CanvasNodeType.Image,
+            title: "角色参考",
+            position: { x: 0, y: 0 },
+            width: 340,
+            height: 240,
+            metadata: { content: "reference-url", mimeType: "image/png" },
+        };
+        const copy: CanvasNodeData = {
+            id: "copy",
+            type: CanvasNodeType.Image,
+            title: "结果_copy1",
+            position: { x: 400, y: 0 },
+            width: 340,
+            height: 240,
+            metadata: { content: "old-result", prompt: "保持角色一致", copiedFromNodeId: "source", generationResultPlacement: "replace-node" },
+        };
+
+        const context = buildNodeGenerationContext(copy.id, [reference, copy], [{ id: "copy-reference", fromNodeId: reference.id, toNodeId: copy.id }], copy.metadata!.prompt!, []);
+
+        expect(context.prompt).toBe("保持角色一致");
+        expect(context.referenceImages.map((image) => image.id)).toEqual([reference.id]);
+    });
+});
diff --git a/web/test/canvas-node-search.test.ts b/web/test/canvas-node-search.test.ts
index 0e17219f7..64edc6136 100644
--- a/web/test/canvas-node-search.test.ts
+++ b/web/test/canvas-node-search.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, test } from "bun:test";
 
 import { canvasNodeMaterialSummary, canvasNodeSearchContext, canvasNodeSearchTimes, searchCanvasNodes } from "@/lib/canvas/canvas-node-search";
-import { normalizeCanvasNodeTimestamps, stampCanvasNodeChanges } from "@/lib/canvas/canvas-node-timestamps";
+import { normalizeCanvasNodeTimestamps, stampCanvasNodeChanges, updateCanvasNodes } from "@/lib/canvas/canvas-node-timestamps";
 import { CanvasNodeType, type CanvasNodeData } from "@/types/canvas";
 
 function node(id: string, patch: Partial<CanvasNodeData> = {}): CanvasNodeData {
@@ -48,6 +48,21 @@ describe("canvas node timestamps", () => {
         const updated = stampCanvasNodeChanges([previous], [hydrated], "2026-08-28T02:00:00.000Z");
         expect(updated[0]?.updatedAt).toBe("2026-08-28T01:00:00.000Z");
     });
+
+    test("batches media metadata updates while preserving untouched node references", () => {
+        const first = node("first");
+        const second = node("second");
+        const nodes = [first, second];
+        const next = updateCanvasNodes(nodes, new Map([
+            ["first", (current) => ({ ...current, metadata: { ...current.metadata, naturalWidth: 1920 } })],
+            ["second", (current) => ({ ...current, metadata: { ...current.metadata, naturalHeight: 1080 } })],
+        ]), "2026-08-28T03:00:00.000Z");
+        expect(next).not.toBe(nodes);
+        expect(next[0]).not.toBe(first);
+        expect(next[1]).not.toBe(second);
+        expect(next[0].metadata?.naturalWidth).toBe(1920);
+        expect(next[1].metadata?.naturalHeight).toBe(1080);
+    });
 });
 
 describe("canvas node search", () => {
diff --git a/web/test/canvas-resource-references.test.ts b/web/test/canvas-resource-references.test.ts
index fc4789329..c13d1195f 100644
--- a/web/test/canvas-resource-references.test.ts
+++ b/web/test/canvas-resource-references.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, test } from "bun:test";
 
-import { buildAssetMentionReferences, buildNodeMentionReferences, buildOrderedCanvasResourceReferences, canvasResourceMentionToken, collectUpstreamVideoNodes } from "../src/lib/canvas/canvas-resource-references";
+import { buildAssetMentionReferences, buildCanvasNodeMentionReferenceMap, buildNodeMentionReferences, buildOrderedCanvasResourceReferences, canvasResourceMentionToken, collectUpstreamVideoNodes } from "../src/lib/canvas/canvas-resource-references";
 import { canvasNodeToAsset } from "../src/lib/canvas/canvas-node-asset";
 import { buildNodeGenerationInputs } from "../src/components/canvas/canvas-node-generation";
 import { CanvasNodeType, type CanvasConnection, type CanvasNodeData } from "../src/types/canvas";
@@ -179,6 +179,20 @@ describe("canvas resource mention slots", () => {
         expect(buildNodeMentionReferences(target, nodes, connections).map((reference) => reference.label)).toEqual(["图片1", "音频1", "图片2", "文本1"]);
     });
 
+    test("批量索引保持直接引用和配置节点引用语义", () => {
+        const image = imageNode("image-a");
+        const audio = audioNode("audio-a");
+        const target = videoNode("target");
+        const config: CanvasNodeData = { id: "config", type: CanvasNodeType.Config, title: "config", position: { x: 0, y: 0 }, width: 100, height: 100, metadata: {} };
+        const nodes = [image, audio, target, config];
+        const connections = [connection(image.id, target.id), connection(target.id, config.id), connection(audio.id, config.id)];
+        const references = buildCanvasNodeMentionReferenceMap(nodes, connections);
+
+        expect(references.get(target.id)?.map((reference) => reference.nodeId)).toEqual([audio.id]);
+        expect(references.get(config.id)?.map((reference) => reference.nodeId)).toEqual([target.id, audio.id]);
+        expect(references.get(image.id)?.map((reference) => reference.nodeId)).toEqual([image.id]);
+    });
+
     test("素材库身份 token 保持稳定", () => {
         expect(canvasResourceMentionToken({
             id: "asset:asset-a",
diff --git a/web/test/canvas-spatial-index.test.ts b/web/test/canvas-spatial-index.test.ts
new file mode 100644
index 000000000..5d9c5423a
--- /dev/null
+++ b/web/test/canvas-spatial-index.test.ts
@@ -0,0 +1,79 @@
+import { describe, expect, test } from "bun:test";
+
+import { buildCanvasSpatialIndex, canvasNodeBounds } from "@/lib/canvas/canvas-spatial-index";
+import { CanvasNodeType, type CanvasNodeData } from "@/types/canvas";
+
+describe("canvas spatial index", () => {
+    test("queries intersecting entries across buckets in source order", () => {
+        const index = buildCanvasSpatialIndex([
+            { id: "far", bounds: { left: 2048, top: 0, right: 2200, bottom: 120 }, value: "far" },
+            { id: "near", bounds: { left: 900, top: 40, right: 1100, bottom: 160 }, value: "near" },
+            { id: "cross", bounds: { left: 1000, top: -40, right: 2100, bottom: 40 }, value: "cross" },
+        ], 1024);
+
+        expect(index.query({ left: 950, top: 0, right: 1150, bottom: 100 })).toEqual(["near", "cross"]);
+        expect(index.query({ left: 2100, top: 0, right: 2200, bottom: 100 })).toEqual(["far"]);
+    });
+
+    test("does not return edge-touching or invalid entries", () => {
+        const index = buildCanvasSpatialIndex([
+            { id: "touching", bounds: { left: 0, top: 0, right: 10, bottom: 10 }, value: "touching" },
+            { id: "invalid", bounds: { left: 0, top: 0, right: 0, bottom: 10 }, value: "invalid" },
+        ]);
+
+        expect(index.query({ left: 10, top: 0, right: 20, bottom: 10 })).toEqual([]);
+        expect(index.query({ left: 1, top: 1, right: 2, bottom: 2 })).toEqual(["touching"]);
+    });
+
+    test("builds bounds from canvas node geometry", () => {
+        expect(canvasNodeBounds({ position: { x: -20, y: 30 }, width: 120, height: 80 })).toEqual({ left: -20, top: 30, right: 100, bottom: 110 });
+    });
+
+    test("keeps very large entries out of the bucket build loop", () => {
+        const index = buildCanvasSpatialIndex([
+            { id: "large", bounds: { left: -100_000, top: -100_000, right: 100_000, bottom: 100_000 }, value: "large" },
+            { id: "small", bounds: { left: 20_000, top: 20_000, right: 20_100, bottom: 20_100 }, value: "small" },
+        ], 100);
+
+        expect(index.query({ left: 0, top: 0, right: 10, bottom: 10 })).toEqual(["large"]);
+        expect(index.query({ left: 20_000, top: 20_000, right: 20_050, bottom: 20_050 })).toEqual(["large", "small"]);
+    });
+
+    test("supports a bounded query for dense buckets", () => {
+        const index = buildCanvasSpatialIndex(Array.from({ length: 10 }, (_, index) => ({
+            id: `node-${index}`,
+            bounds: { left: index * 2, top: 0, right: index * 2 + 1, bottom: 1 },
+            value: index,
+        })));
+
+        expect(index.query({ left: 0, top: 0, right: 100, bottom: 100 }, 3)).toEqual([0, 1, 2]);
+    });
+
+    test("keeps the target 50k canvas mix query-bounded", () => {
+        const nodes = buildLargeCanvasFixture();
+        const counts = nodes.reduce<Record<string, number>>((result, node) => {
+            result[node.type] = (result[node.type] || 0) + 1;
+            return result;
+        }, {});
+        expect(counts[CanvasNodeType.Image]).toBe(35000);
+        expect(counts[CanvasNodeType.Video]).toBe(14000);
+        expect(counts[CanvasNodeType.Text]).toBe(1000);
+
+        const index = buildCanvasSpatialIndex(nodes.map((node) => ({ id: node.id, bounds: canvasNodeBounds(node), value: node.id })));
+        const visible = index.query({ left: 0, top: 0, right: 1600, bottom: 900 }, 720);
+        expect(visible.length).toBeLessThanOrEqual(720);
+        expect(visible.every((id) => id.startsWith("node"))).toBe(true);
+    });
+});
+
+function buildLargeCanvasFixture(): CanvasNodeData[] {
+    return Array.from({ length: 50000 }, (_, index) => ({
+        id: `node${index}`,
+        type: index < 35000 ? CanvasNodeType.Image : index < 49000 ? CanvasNodeType.Video : CanvasNodeType.Text,
+        title: `节点 ${index}`,
+        position: { x: (index % 250) * 360, y: Math.floor(index / 250) * 220 },
+        width: 320,
+        height: 180,
+        metadata: {},
+    }));
+}
diff --git a/web/test/workspace-route-loading.test.ts b/web/test/workspace-route-loading.test.ts
index 08526f545..b9ac44e12 100644
--- a/web/test/workspace-route-loading.test.ts
+++ b/web/test/workspace-route-loading.test.ts
@@ -29,6 +29,33 @@ describe("workspace route loading", () => {
         expect(navigation).toContain("onFocus={() => preloadWorkspaceRoute(linkTo)}");
     });
 
+    test("uses the creation page as the root entry without legacy home or create routes", () => {
+        const router = source("../src/router.tsx");
+        const navigation = source("../src/components/layout/workspace-sidebar-nav.tsx");
+
+        expect(router).toContain('{ path: "/", element: <RequireAuth>{deferred(<CreatePage />)}</RequireAuth> }');
+        expect(router).not.toContain('path: "/create"');
+        expect(router).not.toContain('path: "/home"');
+        expect(router).not.toContain("HomePage");
+        expect(navigation).toContain('{ id: "home", title: "首页", icon: Home, to: "/" }');
+        expect(navigation).not.toContain('to: "/create"');
+        expect(navigation).not.toContain('to: "/home"');
+    });
+
+    test("preloads canvas detail and paints opening feedback before navigation", () => {
+        const modules = source("../src/lib/workspace-route-modules.ts");
+        const router = source("../src/router.tsx");
+        const canvasLibrary = source("../src/pages/canvas/index.tsx");
+        const canvasCard = source("../src/components/canvas/canvas-folder-card.tsx");
+
+        expect(modules).toContain('loadCanvasProjectPage = () => import("@/pages/canvas/project")');
+        expect(router).toContain("lazy(loadCanvasProjectPage)");
+        expect(canvasLibrary).toContain("setOpeningProjectId(id)");
+        expect(canvasLibrary).toContain("window.requestAnimationFrame(() => navigate(");
+        expect(canvasCard).toContain("onPointerEnter={onPrefetch}");
+        expect(canvasCard).toContain("正在打开");
+    });
+
     test("uses a quiet workspace skeleton for initial hydration", () => {
         const loader = source("../src/components/ui/aceternity/full-screen-loader.tsx");
         const css = source("../src/styles/globals.css");