gis-view-webgl2 0.1.0 → 0.1.1

package/docs/demos/CopyMergeDemo.vue

@@ -1,24 +1,24 @@
-<script setup>
-/**
- * 批量复制与合并（可交互版）：同一张画布上把三条链路走完 ——
- * 框选 → 复制 / 合并；Alt 点击复制 → 从 pointCopy 载荷接管或回滚；
- * 拖点相撞 → 从 pointMerge 的 pending / confirm 载荷指定保留节点并改写最终节点。
- */
+<script setup>
+/**
+ * 批量复制与合并（可交互版）：同一张画布上把三条链路走完 ——
+ * 框选 → 复制 / 合并；Alt 点击复制 → 从 pointCopy 载荷接管或回滚；
+ * 拖点相撞 → 从 pointMerge 的 pending / confirm 载荷指定保留节点并改写最终节点。
+ */
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, triggerRef } from 'vue'
 import { createGisView } from '../../src/index.js'
 import { buildDemoData } from './shared/demoData.js'
 import { createFakeBackend, cloneFakeData, FAKE_BACKEND_MODES } from './shared/fakeBackend.js'
 import './shared/demoStyle.css'
-
-const emit = defineEmits(['notice'])
-const container = ref(null)
-const selectionText = ref('未选中')
-const actionText = ref('先框选一组节点，再试复制或合并')
-const copyText = ref('复制：—')
-const clipboardText = ref('剪贴板：—')
-const mergeText = ref('合并：—')
-const pendingText = ref('拖动一个节点撞到另一个节点上，这里会出现待确认载荷')
-const mergeDetailText = ref('合并影响详情：—')
+
+const emit = defineEmits(['notice'])
+const container = ref(null)
+const selectionText = ref('未选中')
+const actionText = ref('先框选一组节点，再试复制或合并')
+const copyText = ref('复制：—')
+const clipboardText = ref('剪贴板：—')
+const mergeText = ref('合并：—')
+const pendingText = ref('拖动一个节点撞到另一个节点上，这里会出现待确认载荷')
+const mergeDetailText = ref('合并影响详情：—')
 const copyEventText = ref('还没有 pointCopy 事件')
 const copySourcesText = ref('—')
 const copyItemsText = ref('—')
@@ -37,24 +37,24 @@ const copyBackendRetry = shallowRef(null)
 const mergeBackendRetry = shallowRef(null)
 const copyBackendLast = shallowRef(null)
 const mergeBackendLast = shallowRef(null)
-const mergedName = ref('合并后节点（demo 改写）')
-const mergedZone = ref('合并后（item 改写）')
-const mergedVoltage = ref('525')
-const mergedColor = ref('#ff5d8f')
-const mergedSize = ref('16')
-const mergedSymbol = ref('square')
-const mergedStrokeColor = ref('#ffffff')
-const mergeTargetId = ref('')
-const mergeKeep = ref('target')
-const rewriteOnConfirm = ref(true)
-const pointOptions = ref([])
-const selectedPoints = ref([])
-const selectionCounts = ref({ points: 0, lines: 0, channels: 0 })
-const selectionFilters = ref({ point: true, line: true, channel: true })
-const logLines = ref([])
-const copyToast = shallowRef(null)
-const lastBatch = shallowRef(null)
-const clipboardItem = shallowRef(null)
+const mergedName = ref('合并后节点（demo 改写）')
+const mergedZone = ref('合并后（item 改写）')
+const mergedVoltage = ref('525')
+const mergedColor = ref('#ff5d8f')
+const mergedSize = ref('16')
+const mergedSymbol = ref('square')
+const mergedStrokeColor = ref('#ffffff')
+const mergeTargetId = ref('')
+const mergeKeep = ref('target')
+const rewriteOnConfirm = ref(true)
+const pointOptions = ref([])
+const selectedPoints = ref([])
+const selectionCounts = ref({ points: 0, lines: 0, channels: 0 })
+const selectionFilters = ref({ point: true, line: true, channel: true })
+const logLines = ref([])
+const copyToast = shallowRef(null)
+const lastBatch = shallowRef(null)
+const clipboardItem = shallowRef(null)
 const pendingMerge = shallowRef(null)
 const copyEvent = shallowRef(null)
 const fakeBackend = createFakeBackend({ initialVersion: 12, latency: 420, prefix: 'copy-merge' })
@@ -67,7 +67,7 @@ let addPointRound = 0
 let mergeSyncTimer = null
 let mergeSyncQueue = []
 let disposed = false
-
+
 const pointLabel = item => String(item?.name ?? item?.label ?? item?.id ?? '节点')
 const pointKey = item => String(item?.id ?? item?.label ?? item?.name ?? '—')
 const itemId = item => (item?.id ?? item?.line_id ?? item?.channel_id ?? '无 id')
@@ -95,7 +95,7 @@ const describeMergeChangeSets = (sets) => {
 	return `后端事务：删节点 [${points('removedPoint')}] → 更新节点 [${points('point')}] · 更新线 [${ids('lines')}] / 删线 [${ids('removedLines')}] · 更新通道 [${ids('channels')}] / 删通道 [${ids('removedChannels')}]`
 }
 const describeMergeChanges = changes => describeMergeChangeSets(changes ? [changes] : [])
-/** 合并载荷里的影响预演：lineCount 是「改写 + 删除」的线路并集，后两项分别与落地结果同口径 */
+/** 合并载荷里的影响预演：lineCount 是「改写 + 删除」的线路并集，后两项分别与落地结果同口径 */
 const describeMergeImpact = impact => (impact
 	? `影响 ${impact.lineCount} 条线路（改线 ${impact.linesChanged} / 删线 ${impact.removedLines}）· 通道 改 ${impact.channelsChanged} / 删 ${impact.removedChannels} / 并 ${impact.mergedChannels}`
 	: '影响读数：当前数据对不上')
@@ -376,447 +376,447 @@ const resetBackendDemo = () => {
 }
 /** pending / confirm 阶段按 impact 里的 id 调现有 getLine / getChannel 查详情；确认落地前查，删掉的通道仍有数据 */
 const showMergeImpactDetails = () => {
-	const payload = pendingMerge.value
-	const impact = payload?.impact
-	if (!impact) {
-		mergeDetailText.value = '合并影响详情：当前没有可用的影响载荷'
-		return mergeDetailText.value
-	}
-	const lines = impact.lineIds.map(id => {
-		const line = view?.getLine(id)
-		if (!line) {
-			return `${id}（已不存在）`
-		}
-		return `${id}（${line.item?.name ?? '未命名'}：${line.item?.from ?? '—'}→${line.item?.to ?? '—'}）`
-	})
-	const channels = impact.channelIds.map(id => {
-		const channel = view?.getChannel(id)
-		if (!channel) {
-			return `${id}（已不存在）`
-		}
-		return `${id}（${channel.item?.name ?? '未命名'}：${channel.lineIndexes.length} 回）`
-	})
-	mergeDetailText.value = `影响线路 ${lines.join(' / ') || '无'} · 影响通道 ${channels.join(' / ') || '无'}`
-	return mergeDetailText.value
-}
-const selectionKinds = computed(() => ['point', 'line', 'channel'].filter(kind => selectionFilters.value[kind]))
-const selectionKindsText = computed(() => selectionKinds.value.length ? selectionKinds.value.join(' + ') : '全关')
-const mergeTargetOptions = computed(() => selectedPoints.value.map(item => ({
-	value: pointKey(item),
-	label: `${pointLabel(item)}（${pointKey(item)}）`
-})))
-const canMerge = computed(() => selectedPoints.value.length >= 2)
-const copyToastTitle = computed(() => {
-	const payload = copyToast.value
-	if (!payload) return ''
-	if (payload.ok === false) return '复制没有落地'
-	if (payload.phase === 'clipboard') return '剪贴板快照已就绪'
-	if (payload.phase === 'batch') return payload.via === 'paste' ? 'Ctrl+V 整组粘贴已落地' : '整组复制已落地'
-	if (payload.phase === 'end') return payload.via === 'paste' ? 'Ctrl+V 已粘贴' : 'Alt 复制已落地'
-	if (payload.phase === 'commit') return '复制正在提交'
-	return '复制预览中'
-})
-const copyToastText = computed(() => {
-	const payload = copyToast.value
-	if (!payload) return ''
-	const sources = payload.sources ?? (payload.source ? [payload.source] : [])
-	const items = payload.items ?? (payload.item ? [payload.item] : [])
-	const sourceText = sources.slice(0, 4).map(entry => pointLabel(entry.item)).join(' / ') || '—'
-	const itemText = items.slice(0, 4).map(pointLabel).join(' / ') || '—'
-	const supportCount = payload.supportSources?.length ?? sources.filter(entry => entry.support).length
-	return `来源 ${sourceText}${supportCount ? `（含 ${supportCount} 个补端点）` : ''} → 结果 ${itemText} · 线路 ${payload.lines?.length ?? 0} / 通道 ${payload.channels?.length ?? 0}`
-})
-
-const pushLog = (name, text) => {
-	logSeq += 1
-	logLines.value = [{ id: logSeq, name, text }, ...logLines.value].slice(0, 18)
-}
-
-const focusCanvas = () => nextTick(() => {
-	container.value?.querySelector('.gis-view')?.focus({ preventScroll: true })
-})
-
-const refreshState = () => {
-	if (!view) return
-	const data = view.getData()
-	pointOptions.value = data.points.map((item, index) => ({
-		value: pointKey(item) || String(index),
-		label: `${pointLabel(item)}（${pointKey(item)}）`
-	}))
-	const selection = view.getSelectionData()
-	selectedPoints.value = selection.points ?? []
-	selectionCounts.value = { points: selection.pointCount, lines: selection.lineCount, channels: selection.channelCount }
-	selectionText.value = selection.count
-		? `${selection.pointCount} 节点 / ${selection.lineCount} 线路 / ${selection.channelCount} 通道：${(selection.items ?? []).slice(0, 5).map(entry => pointLabel(entry.item)).join(' / ')}`
-		: '未选中'
-	if (!mergeTargetOptions.value.some(item => item.value === mergeTargetId.value)) {
-		mergeTargetId.value = mergeTargetOptions.value[0]?.value ?? ''
-	}
-}
-
-const describeBatchCopy = payload => {
-	const sourceNames = (payload?.sources ?? []).slice(0, 4).map(entry => pointLabel(entry.item)).join(' / ')
-	const supportCount = payload?.supportSources?.length ?? 0
-	return `phase=${payload?.phase ?? '—'} · via=${payload?.via ?? '—'} · count=${payload?.count ?? 0} · 来源 ${sourceNames || '—'} · 节点 ${payload?.items?.length ?? 0}${supportCount ? `（补端点 ${supportCount}）` : ''} / 线路 ${payload?.lines?.length ?? 0} / 通道 ${payload?.channels?.length ?? 0}`
-}
-
+	const payload = pendingMerge.value
+	const impact = payload?.impact
+	if (!impact) {
+		mergeDetailText.value = '合并影响详情：当前没有可用的影响载荷'
+		return mergeDetailText.value
+	}
+	const lines = impact.lineIds.map(id => {
+		const line = view?.getLine(id)
+		if (!line) {
+			return `${id}（已不存在）`
+		}
+		return `${id}（${line.item?.name ?? '未命名'}：${line.item?.from ?? '—'}→${line.item?.to ?? '—'}）`
+	})
+	const channels = impact.channelIds.map(id => {
+		const channel = view?.getChannel(id)
+		if (!channel) {
+			return `${id}（已不存在）`
+		}
+		return `${id}（${channel.item?.name ?? '未命名'}：${channel.lineIndexes.length} 回）`
+	})
+	mergeDetailText.value = `影响线路 ${lines.join(' / ') || '无'} · 影响通道 ${channels.join(' / ') || '无'}`
+	return mergeDetailText.value
+}
+const selectionKinds = computed(() => ['point', 'line', 'channel'].filter(kind => selectionFilters.value[kind]))
+const selectionKindsText = computed(() => selectionKinds.value.length ? selectionKinds.value.join(' + ') : '全关')
+const mergeTargetOptions = computed(() => selectedPoints.value.map(item => ({
+	value: pointKey(item),
+	label: `${pointLabel(item)}（${pointKey(item)}）`
+})))
+const canMerge = computed(() => selectedPoints.value.length >= 2)
+const copyToastTitle = computed(() => {
+	const payload = copyToast.value
+	if (!payload) return ''
+	if (payload.ok === false) return '复制没有落地'
+	if (payload.phase === 'clipboard') return '剪贴板快照已就绪'
+	if (payload.phase === 'batch') return payload.via === 'paste' ? 'Ctrl+V 整组粘贴已落地' : '整组复制已落地'
+	if (payload.phase === 'end') return payload.via === 'paste' ? 'Ctrl+V 已粘贴' : 'Alt 复制已落地'
+	if (payload.phase === 'commit') return '复制正在提交'
+	return '复制预览中'
+})
+const copyToastText = computed(() => {
+	const payload = copyToast.value
+	if (!payload) return ''
+	const sources = payload.sources ?? (payload.source ? [payload.source] : [])
+	const items = payload.items ?? (payload.item ? [payload.item] : [])
+	const sourceText = sources.slice(0, 4).map(entry => pointLabel(entry.item)).join(' / ') || '—'
+	const itemText = items.slice(0, 4).map(pointLabel).join(' / ') || '—'
+	const supportCount = payload.supportSources?.length ?? sources.filter(entry => entry.support).length
+	return `来源 ${sourceText}${supportCount ? `（含 ${supportCount} 个补端点）` : ''} → 结果 ${itemText} · 线路 ${payload.lines?.length ?? 0} / 通道 ${payload.channels?.length ?? 0}`
+})
+
+const pushLog = (name, text) => {
+	logSeq += 1
+	logLines.value = [{ id: logSeq, name, text }, ...logLines.value].slice(0, 18)
+}
+
+const focusCanvas = () => nextTick(() => {
+	container.value?.querySelector('.gis-view')?.focus({ preventScroll: true })
+})
+
+const refreshState = () => {
+	if (!view) return
+	const data = view.getData()
+	pointOptions.value = data.points.map((item, index) => ({
+		value: pointKey(item) || String(index),
+		label: `${pointLabel(item)}（${pointKey(item)}）`
+	}))
+	const selection = view.getSelectionData()
+	selectedPoints.value = selection.points ?? []
+	selectionCounts.value = { points: selection.pointCount, lines: selection.lineCount, channels: selection.channelCount }
+	selectionText.value = selection.count
+		? `${selection.pointCount} 节点 / ${selection.lineCount} 线路 / ${selection.channelCount} 通道：${(selection.items ?? []).slice(0, 5).map(entry => pointLabel(entry.item)).join(' / ')}`
+		: '未选中'
+	if (!mergeTargetOptions.value.some(item => item.value === mergeTargetId.value)) {
+		mergeTargetId.value = mergeTargetOptions.value[0]?.value ?? ''
+	}
+}
+
+const describeBatchCopy = payload => {
+	const sourceNames = (payload?.sources ?? []).slice(0, 4).map(entry => pointLabel(entry.item)).join(' / ')
+	const supportCount = payload?.supportSources?.length ?? 0
+	return `phase=${payload?.phase ?? '—'} · via=${payload?.via ?? '—'} · count=${payload?.count ?? 0} · 来源 ${sourceNames || '—'} · 节点 ${payload?.items?.length ?? 0}${supportCount ? `（补端点 ${supportCount}）` : ''} / 线路 ${payload?.lines?.length ?? 0} / 通道 ${payload?.channels?.length ?? 0}`
+}
+
 const rememberCopyPayload = payload => {
 	copyEvent.value = payload
 	copyLineChannelsText.value = describeLineChannels(payload)
 	const sources = payload.sources ?? (payload.source ? [payload.source] : [])
-	const items = payload.items ?? (payload.item ? [payload.item] : [])
-	copyEventText.value = `phase=${payload.phase ?? '—'} · via=${payload.via ?? '—'} · count=${payload.count ?? items.length}`
-	copySourcesText.value = sources.length
-		? sources.map(entry => `${pointLabel(entry.item)}（${pointKey(entry.item)}${entry.support ? ' · 补端点' : ''}）`).join(' / ')
-		: '—'
-	copyItemsText.value = items.length ? items.map(pointLabel).join(' / ') : '—'
-}
-
-const handlePointCopy = (payload) => {
-	rememberCopyPayload(payload)
-	if (payload.phase === 'batch') {
-		if (payload.ok === false) {
-			copyText.value = `批量复制失败：${payload.reason}`
-			actionText.value = copyText.value
-			copyToast.value = payload
-			pushLog('pointCopy/batch', copyText.value)
-			return
-		}
-		lastBatch.value = payload
-		copyText.value = `${payload.via === 'paste' ? 'pastePoints' : 'copySelectedPoints'}：${describeBatchCopy(payload)}`
-		actionText.value = copyText.value
+	const items = payload.items ?? (payload.item ? [payload.item] : [])
+	copyEventText.value = `phase=${payload.phase ?? '—'} · via=${payload.via ?? '—'} · count=${payload.count ?? items.length}`
+	copySourcesText.value = sources.length
+		? sources.map(entry => `${pointLabel(entry.item)}（${pointKey(entry.item)}${entry.support ? ' · 补端点' : ''}）`).join(' / ')
+		: '—'
+	copyItemsText.value = items.length ? items.map(pointLabel).join(' / ') : '—'
+}
+
+const handlePointCopy = (payload) => {
+	rememberCopyPayload(payload)
+	if (payload.phase === 'batch') {
+		if (payload.ok === false) {
+			copyText.value = `批量复制失败：${payload.reason}`
+			actionText.value = copyText.value
+			copyToast.value = payload
+			pushLog('pointCopy/batch', copyText.value)
+			return
+		}
+		lastBatch.value = payload
+		copyText.value = `${payload.via === 'paste' ? 'pastePoints' : 'copySelectedPoints'}：${describeBatchCopy(payload)}`
+		actionText.value = copyText.value
 		copyToast.value = payload
 		pushLog('pointCopy/batch', copyText.value)
 		refreshState()
 		startCopyBackend(payload)
 		return
-	}
-	if (payload.phase === 'clipboard') {
-		clipboardItem.value = view?.getPointClipboard() ?? null
-		clipboardText.value = `剪贴板：count=${payload.count ?? 0} · 节点 ${payload.items?.length ?? 0} / 线路 ${payload.lines?.length ?? 0} / 通道 ${payload.channels?.length ?? 0} · sources=${(payload.sources ?? []).map(entry => pointLabel(entry.item)).join(' / ')}`
-		actionText.value = clipboardText.value
-		copyToast.value = payload
-		pushLog('pointCopy/clipboard', clipboardText.value)
-		return
-	}
-	if (payload.phase === 'start' || payload.phase === 'commit') {
-		copyText.value = `复制预览 · 来源 ${pointLabel(payload.source?.item)} → ${pointLabel(payload.item)}`
-		copyToast.value = payload
-		pushLog(`pointCopy/${payload.phase}`, copyText.value)
-		return
-	}
-	if (payload.phase === 'end') {
-		copyText.value = `复制落地 · ${payload.via} · 来源 ${pointLabel(payload.source?.item)} → ${pointLabel(payload.item)}（${pointKey(payload.item)}）`
-		actionText.value = copyText.value
+	}
+	if (payload.phase === 'clipboard') {
+		clipboardItem.value = view?.getPointClipboard() ?? null
+		clipboardText.value = `剪贴板：count=${payload.count ?? 0} · 节点 ${payload.items?.length ?? 0} / 线路 ${payload.lines?.length ?? 0} / 通道 ${payload.channels?.length ?? 0} · sources=${(payload.sources ?? []).map(entry => pointLabel(entry.item)).join(' / ')}`
+		actionText.value = clipboardText.value
+		copyToast.value = payload
+		pushLog('pointCopy/clipboard', clipboardText.value)
+		return
+	}
+	if (payload.phase === 'start' || payload.phase === 'commit') {
+		copyText.value = `复制预览 · 来源 ${pointLabel(payload.source?.item)} → ${pointLabel(payload.item)}`
+		copyToast.value = payload
+		pushLog(`pointCopy/${payload.phase}`, copyText.value)
+		return
+	}
+	if (payload.phase === 'end') {
+		copyText.value = `复制落地 · ${payload.via} · 来源 ${pointLabel(payload.source?.item)} → ${pointLabel(payload.item)}（${pointKey(payload.item)}）`
+		actionText.value = copyText.value
 		copyToast.value = payload
 		pushLog('pointCopy/end', copyText.value)
 		refreshState()
 		startCopyBackend(payload)
 		return
-	}
-	if (payload.phase === 'cancel') {
-		copyText.value = payload.invalidated ? '复制作废：数据已换过' : '复制已取消，预览没有落地'
-		actionText.value = copyText.value
-		copyToast.value = null
-		pushLog('pointCopy/cancel', copyText.value)
-	}
-}
-
-const sourceIds = () => {
-	const points = view?.getData().points ?? []
-	const indexes = [0, 7, 12, 5]
-	const picked = indexes.map(index => points[index % points.length]?.id).filter(id => id !== undefined && id !== null)
-	return [...new Set(picked)]
-}
-
-const selectBatchSources = () => {
-	const ids = sourceIds()
-	view.select(ids)
-	refreshState()
-	actionText.value = `已选中 ${ids.length} 个来源：${ids.join(' / ')}（画布上也已高亮）`
-	pushLog('select', actionText.value)
-	return actionText.value
-}
-
-const clearSelection = () => {
-	view.select(null)
-	refreshState()
-	actionText.value = '已清空选中；现在可拖动单个节点撞向另一个节点'
-	return actionText.value
-}
-
-const applySelectionKinds = () => {
-	view?.updateOptions({ selectionKinds: selectionKinds.value })
-	actionText.value = `框选 / Ctrl 多选类型：${selectionKindsText.value}`
-	pushLog('selectionKinds', actionText.value)
-	return actionText.value
-}
-
-const selectSampleLine = () => {
-	view.selectFeatures({ type: 'line', index: 0 })
-	refreshState()
-	actionText.value = '已选中示例独立线路（不含两端节点）；复制会自动补两个端点节点并带上线路'
-	pushLog('select/line', actionText.value)
-	return actionText.value
-}
-
-const selectSampleChannel = () => {
-	view.selectFeatures({ type: 'channel', channelId: 'channel-a' })
-	refreshState()
-	actionText.value = '已选中甲通道整条（全部回线）；复制会同时补端点、线路与通道'
-	pushLog('select/channel', actionText.value)
-	return actionText.value
-}
-
-const ensureBatchSelection = () => {
-	const current = view?.getSelectionData().points ?? []
-	if (current.length) return current
-	view.select(sourceIds())
-	refreshState()
-	return selectedPoints.value
-}
-
-const copySelectedByApi = () => {
-	if (!view.getSelectionData().count) ensureBatchSelection()
-	copyRound += 1
-	const result = view.copySelectedPoints({
-		offset: [64 + copyRound * 12, 46 + copyRound * 8],
-		select: true,
-		label: `demo 框选复制 ${copyRound}`
-	})
-	if (result.ok) {
-		lastBatch.value = result
-		copyText.value = `copySelectedPoints：${describeBatchCopy(result)}`
-		actionText.value = copyText.value
-	}
-	else {
-		copyText.value = `copySelectedPoints 失败：${result.reason}`
-		actionText.value = copyText.value
-	}
-	refreshState()
-	return copyText.value
-}
-
-const copyPointsByApi = () => {
-	copyRound += 1
-	const result = view.copyPoints(sourceIds(), {
-		offset: [74 + copyRound * 12, 58 + copyRound * 8],
-		select: true,
-		label: `demo copyPoints ${copyRound}`
-	})
-	if (result.ok) {
-		lastBatch.value = result
-		copyText.value = `copyPoints：${describeBatchCopy(result)}`
-		actionText.value = copyText.value
-	}
-	else {
-		copyText.value = `copyPoints 失败：${result.reason}`
-		actionText.value = copyText.value
-	}
-	refreshState()
-	return copyText.value
-}
-
-const copyClipboardByApi = () => {
-	if (!view.getSelectionData().count) ensureBatchSelection()
-	const item = view.copyPointsToClipboard(undefined, { via: 'demo-copy-clipboard' })
-	clipboardItem.value = item
-	clipboardText.value = item
-		? `剪贴板：count=${item.count} · 节点 ${item.items.length}${item.supportSources?.length ? `（补端点 ${item.supportSources.length}）` : ''} / 线路 ${item.lines.length} / 通道 ${item.channels.length} · sources=${item.sources.map(entry => `${pointLabel(entry.item)}${entry.support ? '·补端点' : ''}`).join(' / ')}`
-		: '剪贴板为空'
-	actionText.value = item ? `${clipboardText.value}；焦点已交给画布，按 Ctrl+V 或点 pastePoints` : '剪贴板为空'
-	focusCanvas()
-	refreshState()
-	return clipboardText.value
-}
-
-const pasteFromClipboard = () => {
-	clipboardItem.value = view.getPointClipboard() ?? clipboardItem.value
-	if (!clipboardItem.value) return 'pastePoints：先复制到剪贴板'
-	pasteRound += 1
-	const anchor = clipboardItem.value.anchor ?? [0, 0]
-	const result = view.pastePoints({
-		coordinate: [anchor[0] + 1.05 + pasteRound * 0.18, anchor[1] - 0.72 - pasteRound * 0.12],
-		select: true,
-		label: `demo 粘贴 ${pasteRound}`
-	})
-	if (result?.ok) {
-		lastBatch.value = result
-		copyText.value = `pastePoints：${describeBatchCopy(result)}`
-		actionText.value = copyText.value
-	}
-	else {
-		copyText.value = `pastePoints 失败：${result?.reason ?? '剪贴板为空或复制已关闭'}`
-		actionText.value = copyText.value
-	}
-	refreshState()
-	return copyText.value
-}
-
-const revertLastCopy = () => {
-	const payload = copyToast.value ?? copyEvent.value
-	if (!payload) return '没有可取消 / 回滚的复制'
-	let message = '复制已经不在数据里'
-	if (payload.phase === 'clipboard') {
-		payload.cancel?.()
-		clipboardItem.value = null
-		message = '已清空剪贴板'
-	}
-	else if (typeof payload.revert === 'function') {
-		const outcome = payload.revert()
-		message = outcome?.ok
-			? `${payload.phase === 'batch' ? '已撤销整组复制' : '已回滚本次复制'} · 收回 ${outcome.items?.length ?? outcome.count ?? 0} 个节点`
-			: '复制已经不在数据里'
-	}
-	else if (typeof payload.cancel === 'function') {
-		payload.cancel()
-		message = '已取消这次复制预览，数据没有落地'
-	}
-	copyToast.value = null
-	if (lastBatch.value === payload) lastBatch.value = null
-	actionText.value = message
-	pushLog('copy/revert', message)
-	refreshState()
-	return message
-}
-
-const manualAddPointCopy = () => {
-	const previous = lastBatch.value ?? (copyToast.value?.phase === 'batch' || copyToast.value?.phase === 'end' ? copyToast.value : null)
-	let reverted = 0
-	if (previous && typeof previous.revert === 'function') {
-		const outcome = previous.revert()
-		reverted = outcome?.items?.length ?? outcome?.count ?? 0
-		if (lastBatch.value === previous) lastBatch.value = null
-		if (copyToast.value === previous) copyToast.value = null
-	}
-	if (!view.getSelectionData().pointCount) ensureBatchSelection()
-	if (!view.getSelectionData().pointCount) return '手动 addPoint 只接管节点复制：先选中至少一个节点'
-	addPointRound += 1
-	// 先让内置复制算出一份真实落点（同时不带上选中线路 / 通道），拿到 items 后立刻整批撤销，
-	// 再按这些落点逐个 addPoint：最终数据里只有手动副本，不会残留自动副本。
-	const probe = view.copySelectedPoints({
-		offset: [84 + addPointRound * 10, 54 + addPointRound * 8],
-		withLines: false,
-		withChannels: false,
-		select: false,
-		via: 'manual-addpoint-probe',
-		label: 'demo 手动复制落点'
-	})
-	if (!probe?.ok) {
-		manualText.value = `手动 addPoint 准备失败：${probe?.reason ?? '复制没有落地'}`
-		actionText.value = manualText.value
-		return manualText.value
-	}
-	const placements = probe.items.map(item => ({ ...item }))
-	const probeSources = probe.sources.filter(entry => !entry.support)
-	probe.revert()
-	lastBatch.value = null
-	copyToast.value = null
-	const created = []
-	for (let index = 0; index < placements.length; index += 1) {
-		const placement = placements[index]
-		const source = probeSources[index]
-		const { id: _oldId, ...rest } = placement
-		const result = view.addPoint({
-			...rest,
-			id: `addpoint-copy-${addPointRound}-${index + 1}`,
-			name: `${pointLabel(source?.item ?? placement)} · addPoint 副本`,
-			zone_name: 'addPoint 手动复制',
-			demo_copy: true,
-			demo_copy_via: 'addPoint'
-		})
-		if (result.ok && result.item) created.push(result.item)
-	}
-	view.select(created.map(item => item.id))
-	manualText.value = `addPoint ×${created.length}：${created.map(item => `${pointLabel(item)}（${pointKey(item)}）`).join(' / ') || '没有落地'}${reverted ? ` · 已删自动副本 ${reverted} 个` : ''} · 最终只多一份`
-	actionText.value = manualText.value
-	pushLog('addPoint', manualText.value)
-	refreshState()
-	return manualText.value
-}
-
-const prepareMerge = () => {
-	if (!selectedPoints.value.length) selectBatchSources()
-	if (!mergeTargetOptions.value.some(item => item.value === mergeTargetId.value)) {
-		mergeTargetId.value = mergeTargetOptions.value[0]?.value ?? ''
-	}
-	refreshState()
-	actionText.value = `已准备 ${selectedPoints.value.length} 个选中节点；保留目标 ${mergeTargetId.value || '—'}，可在画布继续 Ctrl 点选`
-	pushLog('merge/prepare', actionText.value)
-	return actionText.value
-}
-
-const mergePatch = () => {
-	const patch = {
-		name: mergedName.value.trim() || '合并后节点',
-		zone_name: mergedZone.value.trim() || '合并后（item 改写）',
-		demo_merged: true
-	}
-	const voltage = Number(mergedVoltage.value)
-	if (Number.isFinite(voltage)) patch.vn_kv = voltage
-	const size = Number(mergedSize.value)
-	if (Number.isFinite(size) && size > 0) patch.size = size
-	if (mergedColor.value.trim()) patch.color = mergedColor.value.trim()
-	if (mergedSymbol.value.trim()) patch.symbol = mergedSymbol.value.trim()
-	if (mergedStrokeColor.value.trim()) patch.strokeColor = mergedStrokeColor.value.trim()
-	return patch
-}
-
-const mergeSelectedByApi = () => {
-	const points = selectedPoints.value
-	if (points.length < 2) return 'mergeSelectedPoints：至少选中两个节点'
-	const targetId = mergeTargetOptions.value.some(item => item.value === mergeTargetId.value)
-		? mergeTargetId.value
-		: mergeTargetOptions.value[0].value
-	const target = points.find(item => pointKey(item) === targetId)
-	const sources = points.filter(item => pointKey(item) !== targetId).map(item => item.id)
-	const result = view.mergeSelectedPoints({
-		target: { id: target?.id ?? targetId },
-		sources,
-		item: mergePatch(),
-		label: 'demo 合并选中节点'
-	})
-	if (result.ok) {
-		view.select(target?.id ?? targetId)
-		mergeText.value = `mergeSelectedPoints · 保留 ${pointLabel(result.target?.item)} · 并掉 ${result.sourcesMerged} 个 · 改线 ${result.linesChanged} / 删线 ${result.removedLines} / 并通道 ${result.mergedChannels ?? 0} · 最终 ${pointLabel(result.target?.item)}`
-		pendingText.value = '这次走 API 直接合并，没有 pending 阶段'
-	}
-	else {
-		mergeText.value = `mergeSelectedPoints 失败：${result.reason}`
-	}
-	actionText.value = mergeText.value
-	pushLog('mergeSelectedPoints', mergeText.value)
-	refreshState()
-	return mergeText.value
-}
-
-const handlePointMerge = (payload) => {
+	}
+	if (payload.phase === 'cancel') {
+		copyText.value = payload.invalidated ? '复制作废：数据已换过' : '复制已取消，预览没有落地'
+		actionText.value = copyText.value
+		copyToast.value = null
+		pushLog('pointCopy/cancel', copyText.value)
+	}
+}
+
+const sourceIds = () => {
+	const points = view?.getData().points ?? []
+	const indexes = [0, 7, 12, 5]
+	const picked = indexes.map(index => points[index % points.length]?.id).filter(id => id !== undefined && id !== null)
+	return [...new Set(picked)]
+}
+
+const selectBatchSources = () => {
+	const ids = sourceIds()
+	view.selectFeatures(ids)
+	refreshState()
+	actionText.value = `已选中 ${ids.length} 个来源：${ids.join(' / ')}（画布上也已高亮）`
+	pushLog('select', actionText.value)
+	return actionText.value
+}
+
+const clearSelection = () => {
+	view.selectFeatures(null)
+	refreshState()
+	actionText.value = '已清空选中；现在可拖动单个节点撞向另一个节点'
+	return actionText.value
+}
+
+const applySelectionKinds = () => {
+	view?.updateOptions({ selectionKinds: selectionKinds.value })
+	actionText.value = `框选 / Ctrl 多选类型：${selectionKindsText.value}`
+	pushLog('selectionKinds', actionText.value)
+	return actionText.value
+}
+
+const selectSampleLine = () => {
+	view.selectFeatures({ type: 'line', index: 0 })
+	refreshState()
+	actionText.value = '已选中示例独立线路（不含两端节点）；复制会自动补两个端点节点并带上线路'
+	pushLog('select/line', actionText.value)
+	return actionText.value
+}
+
+const selectSampleChannel = () => {
+	view.selectFeatures({ type: 'channel', channelId: 'channel-a' })
+	refreshState()
+	actionText.value = '已选中甲通道整条（全部回线）；复制会同时补端点、线路与通道'
+	pushLog('select/channel', actionText.value)
+	return actionText.value
+}
+
+const ensureBatchSelection = () => {
+	const current = view?.getSelectionData().points ?? []
+	if (current.length) return current
+	view.selectFeatures(sourceIds())
+	refreshState()
+	return selectedPoints.value
+}
+
+const copySelectedByApi = () => {
+	if (!view.getSelectionData().count) ensureBatchSelection()
+	copyRound += 1
+	const result = view.copySelectedPoints({
+		offset: [64 + copyRound * 12, 46 + copyRound * 8],
+		select: true,
+		label: `demo 框选复制 ${copyRound}`
+	})
+	if (result.ok) {
+		lastBatch.value = result
+		copyText.value = `copySelectedPoints：${describeBatchCopy(result)}`
+		actionText.value = copyText.value
+	}
+	else {
+		copyText.value = `copySelectedPoints 失败：${result.reason}`
+		actionText.value = copyText.value
+	}
+	refreshState()
+	return copyText.value
+}
+
+const copyPointsByApi = () => {
+	copyRound += 1
+	const result = view.copyPoints(sourceIds(), {
+		offset: [74 + copyRound * 12, 58 + copyRound * 8],
+		select: true,
+		label: `demo copyPoints ${copyRound}`
+	})
+	if (result.ok) {
+		lastBatch.value = result
+		copyText.value = `copyPoints：${describeBatchCopy(result)}`
+		actionText.value = copyText.value
+	}
+	else {
+		copyText.value = `copyPoints 失败：${result.reason}`
+		actionText.value = copyText.value
+	}
+	refreshState()
+	return copyText.value
+}
+
+const copyClipboardByApi = () => {
+	if (!view.getSelectionData().count) ensureBatchSelection()
+	const item = view.copyPointsToClipboard(undefined, { via: 'demo-copy-clipboard' })
+	clipboardItem.value = item
+	clipboardText.value = item
+		? `剪贴板：count=${item.count} · 节点 ${item.items.length}${item.supportSources?.length ? `（补端点 ${item.supportSources.length}）` : ''} / 线路 ${item.lines.length} / 通道 ${item.channels.length} · sources=${item.sources.map(entry => `${pointLabel(entry.item)}${entry.support ? '·补端点' : ''}`).join(' / ')}`
+		: '剪贴板为空'
+	actionText.value = item ? `${clipboardText.value}；焦点已交给画布，按 Ctrl+V 或点 pastePoints` : '剪贴板为空'
+	focusCanvas()
+	refreshState()
+	return clipboardText.value
+}
+
+const pasteFromClipboard = () => {
+	clipboardItem.value = view.getPointClipboard() ?? clipboardItem.value
+	if (!clipboardItem.value) return 'pastePoints：先复制到剪贴板'
+	pasteRound += 1
+	const anchor = clipboardItem.value.anchor ?? [0, 0]
+	const result = view.pastePoints({
+		coordinate: [anchor[0] + 1.05 + pasteRound * 0.18, anchor[1] - 0.72 - pasteRound * 0.12],
+		select: true,
+		label: `demo 粘贴 ${pasteRound}`
+	})
+	if (result?.ok) {
+		lastBatch.value = result
+		copyText.value = `pastePoints：${describeBatchCopy(result)}`
+		actionText.value = copyText.value
+	}
+	else {
+		copyText.value = `pastePoints 失败：${result?.reason ?? '剪贴板为空或复制已关闭'}`
+		actionText.value = copyText.value
+	}
+	refreshState()
+	return copyText.value
+}
+
+const revertLastCopy = () => {
+	const payload = copyToast.value ?? copyEvent.value
+	if (!payload) return '没有可取消 / 回滚的复制'
+	let message = '复制已经不在数据里'
+	if (payload.phase === 'clipboard') {
+		payload.cancel?.()
+		clipboardItem.value = null
+		message = '已清空剪贴板'
+	}
+	else if (typeof payload.revert === 'function') {
+		const outcome = payload.revert()
+		message = outcome?.ok
+			? `${payload.phase === 'batch' ? '已撤销整组复制' : '已回滚本次复制'} · 收回 ${outcome.items?.length ?? outcome.count ?? 0} 个节点`
+			: '复制已经不在数据里'
+	}
+	else if (typeof payload.cancel === 'function') {
+		payload.cancel()
+		message = '已取消这次复制预览，数据没有落地'
+	}
+	copyToast.value = null
+	if (lastBatch.value === payload) lastBatch.value = null
+	actionText.value = message
+	pushLog('copy/revert', message)
+	refreshState()
+	return message
+}
+
+const manualAddPointCopy = () => {
+	const previous = lastBatch.value ?? (copyToast.value?.phase === 'batch' || copyToast.value?.phase === 'end' ? copyToast.value : null)
+	let reverted = 0
+	if (previous && typeof previous.revert === 'function') {
+		const outcome = previous.revert()
+		reverted = outcome?.items?.length ?? outcome?.count ?? 0
+		if (lastBatch.value === previous) lastBatch.value = null
+		if (copyToast.value === previous) copyToast.value = null
+	}
+	if (!view.getSelectionData().pointCount) ensureBatchSelection()
+	if (!view.getSelectionData().pointCount) return '手动 addPoint 只接管节点复制：先选中至少一个节点'
+	addPointRound += 1
+	// 先让内置复制算出一份真实落点（同时不带上选中线路 / 通道），拿到 items 后立刻整批撤销，
+	// 再按这些落点逐个 addPoint：最终数据里只有手动副本，不会残留自动副本。
+	const probe = view.copySelectedPoints({
+		offset: [84 + addPointRound * 10, 54 + addPointRound * 8],
+		withLines: false,
+		withChannels: false,
+		select: false,
+		via: 'manual-addpoint-probe',
+		label: 'demo 手动复制落点'
+	})
+	if (!probe?.ok) {
+		manualText.value = `手动 addPoint 准备失败：${probe?.reason ?? '复制没有落地'}`
+		actionText.value = manualText.value
+		return manualText.value
+	}
+	const placements = probe.items.map(item => ({ ...item }))
+	const probeSources = probe.sources.filter(entry => !entry.support)
+	probe.revert()
+	lastBatch.value = null
+	copyToast.value = null
+	const created = []
+	for (let index = 0; index < placements.length; index += 1) {
+		const placement = placements[index]
+		const source = probeSources[index]
+		const { id: _oldId, ...rest } = placement
+		const result = view.addPoint({
+			...rest,
+			id: `addpoint-copy-${addPointRound}-${index + 1}`,
+			name: `${pointLabel(source?.item ?? placement)} · addPoint 副本`,
+			zone_name: 'addPoint 手动复制',
+			demo_copy: true,
+			demo_copy_via: 'addPoint'
+		})
+		if (result.ok && result.item) created.push(result.item)
+	}
+	view.selectFeatures(created.map(item => item.id))
+	manualText.value = `addPoint ×${created.length}：${created.map(item => `${pointLabel(item)}（${pointKey(item)}）`).join(' / ') || '没有落地'}${reverted ? ` · 已删自动副本 ${reverted} 个` : ''} · 最终只多一份`
+	actionText.value = manualText.value
+	pushLog('addPoint', manualText.value)
+	refreshState()
+	return manualText.value
+}
+
+const prepareMerge = () => {
+	if (!selectedPoints.value.length) selectBatchSources()
+	if (!mergeTargetOptions.value.some(item => item.value === mergeTargetId.value)) {
+		mergeTargetId.value = mergeTargetOptions.value[0]?.value ?? ''
+	}
+	refreshState()
+	actionText.value = `已准备 ${selectedPoints.value.length} 个选中节点；保留目标 ${mergeTargetId.value || '—'}，可在画布继续 Ctrl 点选`
+	pushLog('merge/prepare', actionText.value)
+	return actionText.value
+}
+
+const mergePatch = () => {
+	const patch = {
+		name: mergedName.value.trim() || '合并后节点',
+		zone_name: mergedZone.value.trim() || '合并后（item 改写）',
+		demo_merged: true
+	}
+	const voltage = Number(mergedVoltage.value)
+	if (Number.isFinite(voltage)) patch.vn_kv = voltage
+	const size = Number(mergedSize.value)
+	if (Number.isFinite(size) && size > 0) patch.size = size
+	if (mergedColor.value.trim()) patch.color = mergedColor.value.trim()
+	if (mergedSymbol.value.trim()) patch.symbol = mergedSymbol.value.trim()
+	if (mergedStrokeColor.value.trim()) patch.strokeColor = mergedStrokeColor.value.trim()
+	return patch
+}
+
+const mergeSelectedByApi = () => {
+	const points = selectedPoints.value
+	if (points.length < 2) return 'mergeSelectedPoints：至少选中两个节点'
+	const targetId = mergeTargetOptions.value.some(item => item.value === mergeTargetId.value)
+		? mergeTargetId.value
+		: mergeTargetOptions.value[0].value
+	const target = points.find(item => pointKey(item) === targetId)
+	const sources = points.filter(item => pointKey(item) !== targetId).map(item => item.id)
+	const result = view.mergeSelectedPoints({
+		target: { id: target?.id ?? targetId },
+		sources,
+		item: mergePatch(),
+		label: 'demo 合并选中节点'
+	})
+	if (result.ok) {
+		view.selectFeatures(target?.id ?? targetId)
+		mergeText.value = `mergeSelectedPoints · 保留 ${pointLabel(result.target?.item)} · 并掉 ${result.sourcesMerged} 个 · 改线 ${result.linesChanged} / 删线 ${result.removedLines} / 并通道 ${result.mergedChannels ?? 0} · 最终 ${pointLabel(result.target?.item)}`
+		pendingText.value = '这次走 API 直接合并，没有 pending 阶段'
+	}
+	else {
+		mergeText.value = `mergeSelectedPoints 失败：${result.reason}`
+	}
+	actionText.value = mergeText.value
+	pushLog('mergeSelectedPoints', mergeText.value)
+	refreshState()
+	return mergeText.value
+}
+
+const handlePointMerge = (payload) => {
 	if (payload.phase === 'pending') {
 		pendingMerge.value = payload
 		mergeBackendText.value = '合并变更 → 后端事务：数据还没动；确认落地后 changes 会给出完整事务入参'
-		mergeDetailText.value = '合并影响详情：点「查看影响详情」按 id 调 getLine / getChannel'
-		pendingText.value = `待确认：拖动来源 ${pointLabel(payload.source.item)} → 碰撞目标 ${pointLabel(payload.target.item)} · ${describeMergeImpact(payload.impact)} · 数据还没动`
-		mergeText.value = pendingText.value
-		actionText.value = mergeText.value
-		pushLog('pointMerge/pending', pendingText.value)
-		return
-	}
-	if (payload.phase === 'confirm') {
-		if (rewriteOnConfirm.value && payload.item) {
-			payload.item = { ...payload.item, ...mergePatch() }
-		}
-		pendingMerge.value = payload
-		mergeText.value = `confirm · 保留 ${payload.keep === 'source' ? '拖动来源' : '碰撞目标'} · ${describeMergeImpact(payload.impact)} · 来源 ${pointLabel(payload.source.item)} / 目标 ${pointLabel(payload.target.item)} · 最终节点 ${pointLabel(payload.item)} · 色 ${payload.item?.color ?? '—'} / 尺寸 ${payload.item?.size ?? '—'} / 图标 ${String(payload.item?.symbol ?? '—')}`
-		actionText.value = mergeText.value
-		pushLog('pointMerge/confirm', mergeText.value)
-		return
-	}
+		mergeDetailText.value = '合并影响详情：点「查看影响详情」按 id 调 getLine / getChannel'
+		pendingText.value = `待确认：拖动来源 ${pointLabel(payload.source.item)} → 碰撞目标 ${pointLabel(payload.target.item)} · ${describeMergeImpact(payload.impact)} · 数据还没动`
+		mergeText.value = pendingText.value
+		actionText.value = mergeText.value
+		pushLog('pointMerge/pending', pendingText.value)
+		return
+	}
+	if (payload.phase === 'confirm') {
+		if (rewriteOnConfirm.value && payload.item) {
+			payload.item = { ...payload.item, ...mergePatch() }
+		}
+		pendingMerge.value = payload
+		mergeText.value = `confirm · 保留 ${payload.keep === 'source' ? '拖动来源' : '碰撞目标'} · ${describeMergeImpact(payload.impact)} · 来源 ${pointLabel(payload.source.item)} / 目标 ${pointLabel(payload.target.item)} · 最终节点 ${pointLabel(payload.item)} · 色 ${payload.item?.color ?? '—'} / 尺寸 ${payload.item?.size ?? '—'} / 图标 ${String(payload.item?.symbol ?? '—')}`
+		actionText.value = mergeText.value
+		pushLog('pointMerge/confirm', mergeText.value)
+		return
+	}
 	if (payload.phase === 'mergeSelected') {
 		const mergedNames = (payload.merged ?? []).map(result => pointLabel(result.source.item)).join(' / ') || '—'
 		mergeBackendText.value = describeMergeChangeSets((payload.merged ?? []).map(result => result.changes))
 		mergeText.value = payload.ok
-			? `mergeSelected · 保留 ${pointLabel(payload.target?.item)} · 并掉 ${mergedNames} · 最终 ${pointLabel(payload.target?.item)} · 改线 ${payload.linesChanged} / 删线 ${payload.removedLines} / 通道 ${payload.channelsChanged}`
-			: `mergeSelected 失败：${payload.reason}`
+			? `mergeSelected · 保留 ${pointLabel(payload.target?.item)} · 并掉 ${mergedNames} · 最终 ${pointLabel(payload.target?.item)} · 改线 ${payload.linesChanged} / 删线 ${payload.removedLines} / 通道 ${payload.channelsChanged}`
+			: `mergeSelected 失败：${payload.reason}`
 		actionText.value = mergeText.value
 		pushLog('pointMerge/mergeSelected', mergeText.value)
 		cancelScheduledMergeBackend()
@@ -826,333 +826,333 @@ const handlePointMerge = (payload) => {
 	if (payload.phase === 'merge') {
 		mergeBackendText.value = payload.ok ? describeMergeChanges(payload.changes) : '合并变更 → 后端事务：合并失败，没有变更集'
 		mergeText.value = payload.ok
-			? `merge · 被并 ${pointLabel(payload.source?.item)} → 保留 ${pointLabel(payload.target?.item)} · 最终 ${pointLabel(payload.item)} · 色 ${payload.item?.color ?? '—'} / 尺寸 ${payload.item?.size ?? '—'} / 图标 ${String(payload.item?.symbol ?? '—')} · 改线 ${payload.linesChanged} / 删线 ${payload.removedLines}`
-			: `merge 失败：${payload.reason}`
-		pendingMerge.value = null
-		pendingText.value = payload.ok ? '合并已落地，拖动来源节点已经收进保留目标' : `合并失败：${payload.reason}`
+			? `merge · 被并 ${pointLabel(payload.source?.item)} → 保留 ${pointLabel(payload.target?.item)} · 最终 ${pointLabel(payload.item)} · 色 ${payload.item?.color ?? '—'} / 尺寸 ${payload.item?.size ?? '—'} / 图标 ${String(payload.item?.symbol ?? '—')} · 改线 ${payload.linesChanged} / 删线 ${payload.removedLines}`
+			: `merge 失败：${payload.reason}`
+		pendingMerge.value = null
+		pendingText.value = payload.ok ? '合并已落地，拖动来源节点已经收进保留目标' : `合并失败：${payload.reason}`
 		actionText.value = mergeText.value
 		pushLog('pointMerge/merge', mergeText.value)
 		refreshState()
 		if (payload.ok) scheduleMergeBackend(payload)
 		return
-	}
+	}
 	if (payload.phase === 'cancel') {
 		pendingMerge.value = null
 		mergeBackendText.value = '合并变更 → 后端事务：合并已取消，没有变更集'
-		pendingText.value = '已取消：拖动的节点回到原位，数据没动'
-		mergeText.value = pendingText.value
-		actionText.value = mergeText.value
-		pushLog('pointMerge/cancel', pendingText.value)
-	}
-}
-
-const confirmPendingMerge = () => {
-	const options = { keep: mergeKeep.value }
-	if (rewriteOnConfirm.value) options.item = mergePatch()
-	const result = view.confirmPointMerge(options)
-	if (!result) return '当前没有待确认的合并'
-	mergeText.value = `confirmPointMerge({ keep: '${mergeKeep.value}', item }) · ${rewriteOnConfirm.value ? '名称 / 分区 / 电压 / 样式已随 item 写回' : '使用引擎缺省合并结果'}`
-	actionText.value = mergeText.value
-	pushLog('confirmPointMerge', mergeText.value)
-	return mergeText.value
-}
-
-const cancelPendingMerge = () => {
-	const result = view.cancelPointMerge()
-	pendingMerge.value = null
-	return result ? '已取消：拖动的节点回到原位，数据没动' : '当前没有待确认的合并'
-}
-
-const resetScene = () => {
-	const fresh = buildDemoData({ count: 14, channels: 2 })
-	view.updateData({ points: fresh.points, lines: fresh.lines, channels: fresh.channels })
-	view.select(null)
-	view.clearHistory()
-	view.fitView(50)
-	lastBatch.value = null
-	clipboardItem.value = null
-	pendingMerge.value = null
-	copyEvent.value = null
-	copyToast.value = null
-	pendingText.value = '拖动一个节点撞到另一个节点上，这里会出现待确认载荷'
+		pendingText.value = '已取消：拖动的节点回到原位，数据没动'
+		mergeText.value = pendingText.value
+		actionText.value = mergeText.value
+		pushLog('pointMerge/cancel', pendingText.value)
+	}
+}
+
+const confirmPendingMerge = () => {
+	const options = { keep: mergeKeep.value }
+	if (rewriteOnConfirm.value) options.item = mergePatch()
+	const result = view.resolvePointMerge(true, options)
+	if (!result) return '当前没有待确认的合并'
+	mergeText.value = `resolvePointMerge(true, { keep: '${mergeKeep.value}', item }) · ${rewriteOnConfirm.value ? '名称 / 分区 / 电压 / 样式已随 item 写回' : '使用引擎缺省合并结果'}`
+	actionText.value = mergeText.value
+	pushLog('resolvePointMerge(true)', mergeText.value)
+	return mergeText.value
+}
+
+const cancelPendingMerge = () => {
+	const result = view.resolvePointMerge(false)
+	pendingMerge.value = null
+	return result ? '已取消：拖动的节点回到原位，数据没动' : '当前没有待确认的合并'
+}
+
+const resetScene = () => {
+	const fresh = buildDemoData({ count: 14, channels: 2 })
+	view.updateData({ points: fresh.points, lines: fresh.lines, channels: fresh.channels })
+	view.selectFeatures(null)
+	view.clearHistory()
+	view.fitView(50)
+	lastBatch.value = null
+	clipboardItem.value = null
+	pendingMerge.value = null
+	copyEvent.value = null
+	copyToast.value = null
+	pendingText.value = '拖动一个节点撞到另一个节点上，这里会出现待确认载荷'
 	mergeText.value = '合并：—'
 	copyText.value = '复制：—'
 	copyLineChannelsText.value = '—'
 	mergeBackendText.value = '合并变更 → 后端事务：—'
-	clipboardText.value = '剪贴板：—'
-	copyEventText.value = '还没有 pointCopy 事件'
-	copySourcesText.value = '—'
-	copyItemsText.value = '—'
+	clipboardText.value = '剪贴板：—'
+	copyEventText.value = '还没有 pointCopy 事件'
+	copySourcesText.value = '—'
+	copyItemsText.value = '—'
 	manualText.value = '—'
 	mergeKeep.value = 'target'
 	resetBackendDemo()
 	copyRound = 0
-	pasteRound = 0
-	addPointRound = 0
-	refreshState()
-	actionText.value = `已恢复 ${fresh.points.length} 节点 / ${fresh.lines.length} 线路 / ${fresh.channels.length} 通道`
-	return actionText.value
-}
-
-onMounted(() => {
-	const dataset = buildDemoData({ count: 14, channels: 2 })
-	view = createGisView(container.value, {
-		points: dataset.points,
-		lines: dataset.lines,
-		channels: dataset.channels,
-		channelWidth: 2.2,
-		channelInset: 1.3,
-		pointStyle: { size: 9, color: '#ffffff', strokeColor: '#4c8dff', strokeWidth: 1.6 },
-		lineStyle: { width: 1.5, color: 'rgba(120, 168, 226, 0.66)' },
-		pointSelectStyle: { sizeScale: 1.5, color: '#ffd166', strokeColor: '#a33c00', strokeWidth: 3 },
-		pointMultiSelectStyle: { sizeScale: 1.45, color: '#ffb703', strokeColor: '#7a2d00', strokeWidth: 2.5 },
-		pointBoxSelectStyle: { sizeScale: 1.55, color: '#ff9f1c', strokeColor: '#7a2d00', strokeWidth: 3 },
-		lineSelectStyle: { width: 3.2, color: '#ffb703' },
-		lineMultiSelectStyle: { width: 2.6, color: '#ff9f1c' },
-		selectionBoxStyle: { fill: '#3678bf', fillOpacity: 0.18, stroke: '#1d4ed8', strokeWidth: 2 },
-		selectionOnTop: true,
-		label: {
-			content: '{name}',
-			position: 'top',
-			gap: 7,
-			maxCount: 26,
-			avoidOverlap: true,
-			style: { color: '#27405f', fontSize: '11px' }
-		},
-		showGrid: true,
-		fitPadding: 52,
-		history: { limit: 60 },
-		interactive: true,
-		clickable: true,
-		draggable: true,
-		boxSelect: true,
-		multiSelect: true,
-		selectionKinds: ['point', 'line', 'channel'],
-		channelSelectMode: 'channel',
-		features: {
-			pan: true,
-			zoom: true,
-			hover: true,
-			select: true,
-			boxSelect: true,
-			drag: true,
-			copy: true,
-			merge: true,
-			keyboard: true,
-			waypoint: false,
-			remove: false,
-			channelDraft: false,
-			channelMenu: false,
-			contextMenu: false
-		},
+	pasteRound = 0
+	addPointRound = 0
+	refreshState()
+	actionText.value = `已恢复 ${fresh.points.length} 节点 / ${fresh.lines.length} 线路 / ${fresh.channels.length} 通道`
+	return actionText.value
+}
+
+onMounted(() => {
+	const dataset = buildDemoData({ count: 14, channels: 2 })
+	view = createGisView(container.value, {
+		points: dataset.points,
+		lines: dataset.lines,
+		channels: dataset.channels,
+		channelWidth: 2.2,
+		channelInset: 1.3,
+		pointStyle: { size: 9, color: '#ffffff', strokeColor: '#4c8dff', strokeWidth: 1.6 },
+		lineStyle: { width: 1.5, color: 'rgba(120, 168, 226, 0.66)' },
+		pointSelectStyle: { sizeScale: 1.5, color: '#ffd166', strokeColor: '#a33c00', strokeWidth: 3 },
+		pointMultiSelectStyle: { sizeScale: 1.45, color: '#ffb703', strokeColor: '#7a2d00', strokeWidth: 2.5 },
+		pointBoxSelectStyle: { sizeScale: 1.55, color: '#ff9f1c', strokeColor: '#7a2d00', strokeWidth: 3 },
+		lineSelectStyle: { width: 3.2, color: '#ffb703' },
+		lineMultiSelectStyle: { width: 2.6, color: '#ff9f1c' },
+		selectionBoxStyle: { fill: '#3678bf', fillOpacity: 0.18, stroke: '#1d4ed8', strokeWidth: 2 },
+		selectionOnTop: true,
+		label: {
+			content: '{name}',
+			position: 'top',
+			gap: 7,
+			maxCount: 26,
+			avoidOverlap: true,
+			style: { color: '#27405f', fontSize: '11px' }
+		},
+		showGrid: true,
+		fitPadding: 52,
+		history: { limit: 60 },
+		interactive: true,
+		clickable: true,
+		draggable: true,
+		boxSelect: true,
+		multiSelect: true,
+		selectionKinds: ['point', 'line', 'channel'],
+		channelSelectMode: 'channel',
+		features: {
+			pan: true,
+			zoom: true,
+			hover: true,
+			select: true,
+			boxSelect: true,
+			drag: true,
+			copy: true,
+			merge: true,
+			keyboard: true,
+			waypoint: false,
+			remove: false,
+			channelDraft: false,
+			channelMenu: false,
+			contextMenu: false
+		},
 		copy: {
-			enabled: true,
-			offset: [64, 46],
-			createItem: (item, context) => ({
-				...item,
-				name: `${pointLabel(context?.sourceItem ?? item)} · 副本`,
-				zone_name: '内置复制副本',
-				demo_copy: true
-			})
+			enabled: true,
+			offset: [64, 46],
+			createItem: (item, context) => ({
+				...item,
+				name: `${pointLabel(context?.sourceItem ?? item)} · 副本`,
+				zone_name: '内置复制副本',
+				demo_copy: true
+			})
 		},
 		// Ctrl+C / Ctrl+V 监听的三件套：copy 打开 + keyboard 打开 + 快捷键映射（不写也是这两个缺省值）
 		shortcuts: { copy: 'ctrl+c', paste: 'ctrl+v' },
 		merge: { enabled: true, distance: 12, channelGroups: 'keep' },
-		onReady: () => {
-			nextTick(() => {
-				view?.fitView(50)
-				refreshState()
-			})
+		onReady: () => {
+			nextTick(() => {
+				view?.fitView(50)
+				refreshState()
+			})
 			emit('notice', '批量复制与合并：先点一下画布取得焦点，再框选 / Ctrl+C / Ctrl+V；也可拖动节点相撞合并')
-		},
-		onPointCopy: handlePointCopy,
-		onPointMerge: handlePointMerge,
-		onSelectChange: () => refreshState(),
-		onDataChange: payload => {
-			pushLog(payload.type, `${payload.counts?.points ?? 0} 点 / ${payload.counts?.lines ?? 0} 线 / ${payload.counts?.channels ?? 0} 通道`)
-			refreshState()
-		}
-	})
-	offEvents = view.on('*', (name, payload) => {
-		if (name === 'dataChange' && payload?.type === 'batch') {
-			pushLog('batch', `一次批量收口 · ${payload.changes?.length ?? 0} 笔`)
-		}
-	})
-})
-
+		},
+		onPointCopy: handlePointCopy,
+		onPointMerge: handlePointMerge,
+		onSelectChange: () => refreshState(),
+		onDataChange: payload => {
+			pushLog(payload.type, `${payload.counts?.points ?? 0} 点 / ${payload.counts?.lines ?? 0} 线 / ${payload.counts?.channels ?? 0} 通道`)
+			refreshState()
+		}
+	})
+	offEvents = view.on('*', (name, payload) => {
+		if (name === 'dataChange' && payload?.type === 'batch') {
+			pushLog('batch', `一次批量收口 · ${payload.changes?.length ?? 0} 笔`)
+		}
+	})
+})
+
 onBeforeUnmount(() => {
 	disposed = true
 	cancelScheduledMergeBackend()
 	offEvents?.()
-	offEvents = null
-	view?.destroy()
-	view = null
-})
-</script>
-
-<template>
-	<section class="dv-demo cm-demo">
-		<div class="dv-stage">
-			<div ref="container" class="dv-canvas"></div>
-			<div class="dv-toolbar">
-				<button type="button" class="dv-button" @click="view?.fitView(50)">适应全部</button>
-				<button type="button" class="dv-button" @click="resetScene">恢复初始数据</button>
-			</div>
-			<div class="cm-guide">
+	offEvents = null
+	view?.destroy()
+	view = null
+})
+</script>
+
+<template>
+	<section class="dv-demo cm-demo">
+		<div class="dv-stage">
+			<div ref="container" class="dv-canvas"></div>
+			<div class="dv-toolbar">
+				<button type="button" class="dv-button" @click="view?.fitView(50)">适应全部</button>
+				<button type="button" class="dv-button" @click="resetScene">恢复初始数据</button>
+			</div>
+			<div class="cm-guide">
 				<span><b>1</b><kbd>Shift</kbd> + 拖动框选节点 / 线路 / 通道（按右侧类型过滤）</span>
-				<span><b>2</b><kbd>Alt</kbd> + 点击节点复制；<kbd>Ctrl</kbd> + <kbd>V</kbd> 粘贴</span>
-				<span><b>3</b>拖动一个节点撞向另一个节点：可保留来源 / 目标并改写信息与样式</span>
-			</div>
-			<div v-if="copyToast" class="cm-toast cm-toast--copy">
-				<div class="cm-toast__head">
-					<strong>{{ copyToastTitle }}</strong>
-					<span class="cm-tag">{{ copyToast.phase }} · {{ copyToast.via }}</span>
-				</div>
-				<p>{{ copyToastText }}</p>
-				<div class="cm-toast__actions">
-					<button v-if="copyToast.phase === 'clipboard'" type="button" @click="pasteFromClipboard">粘贴整组</button>
-					<button type="button" @click="manualAddPointCopy">手动 addPoint</button>
-					<button type="button" @click="revertLastCopy">取消 / 回滚</button>
-				</div>
-			</div>
-			<div v-if="pendingMerge" class="cm-toast cm-toast--merge">
-				<div class="cm-toast__head">
-					<strong>合并待确认</strong>
-					<span class="cm-tag">{{ pendingMerge.phase }}</span>
-				</div>
-				<p>拖动来源 {{ pointLabel(pendingMerge.source.item) }} → 碰撞目标 {{ pointLabel(pendingMerge.target.item) }} · 数据还没动</p>
-				<p class="cm-toast__hint">保留 {{ mergeKeep === 'source' ? '拖动来源' : '碰撞目标' }}；确认时把名称 / 分区 / 电压 / 颜色 / 尺寸 / 图标写进 payload.item</p>
-				<div class="cm-toast__actions">
-					<button v-if="pendingMerge.phase === 'pending'" type="button" class="is-primary" @click="confirmPendingMerge">确认并改写</button>
-					<button type="button" @click="showMergeImpactDetails">查看影响详情</button>
-					<button type="button" @click="cancelPendingMerge">取消并复位</button>
-				</div>
-			</div>
-			<div class="cm-dock">
-				<span>选中 <b>{{ selectionCounts.points }}</b> 节点 / <b>{{ selectionCounts.lines }}</b> 线路 / <b>{{ selectionCounts.channels }}</b> 通道</span>
-				<button type="button" @click="selectBatchSources">选中示例组</button>
-				<button type="button" @click="copySelectedByApi">复制选中</button>
-				<button type="button" @click="prepareMerge">准备合并</button>
-				<button type="button" @click="clearSelection">清空选中</button>
-			</div>
-		</div>
-		<aside class="dv-panel">
-			<div class="dv-group">
-				<h3>1 · 框选来源</h3>
-				<p class="dv-readout" data-demo="copy-merge-selection">{{ selectionText }}</p>
+				<span><b>2</b><kbd>Alt</kbd> + 点击节点复制；<kbd>Ctrl</kbd> + <kbd>V</kbd> 粘贴</span>
+				<span><b>3</b>拖动一个节点撞向另一个节点：可保留来源 / 目标并改写信息与样式</span>
+			</div>
+			<div v-if="copyToast" class="cm-toast cm-toast--copy">
+				<div class="cm-toast__head">
+					<strong>{{ copyToastTitle }}</strong>
+					<span class="cm-tag">{{ copyToast.phase }} · {{ copyToast.via }}</span>
+				</div>
+				<p>{{ copyToastText }}</p>
+				<div class="cm-toast__actions">
+					<button v-if="copyToast.phase === 'clipboard'" type="button" @click="pasteFromClipboard">粘贴整组</button>
+					<button type="button" @click="manualAddPointCopy">手动 addPoint</button>
+					<button type="button" @click="revertLastCopy">取消 / 回滚</button>
+				</div>
+			</div>
+			<div v-if="pendingMerge" class="cm-toast cm-toast--merge">
+				<div class="cm-toast__head">
+					<strong>合并待确认</strong>
+					<span class="cm-tag">{{ pendingMerge.phase }}</span>
+				</div>
+				<p>拖动来源 {{ pointLabel(pendingMerge.source.item) }} → 碰撞目标 {{ pointLabel(pendingMerge.target.item) }} · 数据还没动</p>
+				<p class="cm-toast__hint">保留 {{ mergeKeep === 'source' ? '拖动来源' : '碰撞目标' }}；确认时把名称 / 分区 / 电压 / 颜色 / 尺寸 / 图标写进 payload.item</p>
+				<div class="cm-toast__actions">
+					<button v-if="pendingMerge.phase === 'pending'" type="button" class="is-primary" @click="confirmPendingMerge">确认并改写</button>
+					<button type="button" @click="showMergeImpactDetails">查看影响详情</button>
+					<button type="button" @click="cancelPendingMerge">取消并复位</button>
+				</div>
+			</div>
+			<div class="cm-dock">
+				<span>选中 <b>{{ selectionCounts.points }}</b> 节点 / <b>{{ selectionCounts.lines }}</b> 线路 / <b>{{ selectionCounts.channels }}</b> 通道</span>
+				<button type="button" @click="selectBatchSources">选中示例组</button>
+				<button type="button" @click="copySelectedByApi">复制选中</button>
+				<button type="button" @click="prepareMerge">准备合并</button>
+				<button type="button" @click="clearSelection">清空选中</button>
+			</div>
+		</div>
+		<aside class="dv-panel">
+			<div class="dv-group">
+				<h3>1 · 框选来源</h3>
+				<p class="dv-readout" data-demo="copy-merge-selection">{{ selectionText }}</p>
 				<p class="dv-readout" data-demo="selection-kinds-readout">框选（Shift）/ Ctrl 多选：{{ selectionKindsText }}</p>
-				<div class="dv-row cm-checks">
-					<label><input v-model="selectionFilters.point" data-demo="selection-point" type="checkbox" @change="applySelectionKinds" /> 节点</label>
-					<label><input v-model="selectionFilters.line" data-demo="selection-line" type="checkbox" @change="applySelectionKinds" /> 线路</label>
-					<label><input v-model="selectionFilters.channel" data-demo="selection-channel" type="checkbox" @change="applySelectionKinds" /> 通道</label>
-				</div>
-				<div class="dv-row">
-					<button type="button" class="dv-button dv-button--primary" data-demo="copy-select-sources" @click="selectBatchSources">选中示例组</button>
-					<button type="button" class="dv-button" data-demo="merge-select-sources" @click="prepareMerge">选中并准备合并</button>
-					<button type="button" class="dv-button" @click="clearSelection">清空</button>
-				</div>
-				<div class="dv-row">
-					<button type="button" class="dv-button" data-demo="select-sample-line" @click="selectSampleLine">选中示例线路</button>
-					<button type="button" class="dv-button" data-demo="select-sample-channel" @click="selectSampleChannel">选中示例通道</button>
-				</div>
+				<div class="dv-row cm-checks">
+					<label><input v-model="selectionFilters.point" data-demo="selection-point" type="checkbox" @change="applySelectionKinds" /> 节点</label>
+					<label><input v-model="selectionFilters.line" data-demo="selection-line" type="checkbox" @change="applySelectionKinds" /> 线路</label>
+					<label><input v-model="selectionFilters.channel" data-demo="selection-channel" type="checkbox" @change="applySelectionKinds" /> 通道</label>
+				</div>
+				<div class="dv-row">
+					<button type="button" class="dv-button dv-button--primary" data-demo="copy-select-sources" @click="selectBatchSources">选中示例组</button>
+					<button type="button" class="dv-button" data-demo="merge-select-sources" @click="prepareMerge">选中并准备合并</button>
+					<button type="button" class="dv-button" @click="clearSelection">清空</button>
+				</div>
+				<div class="dv-row">
+					<button type="button" class="dv-button" data-demo="select-sample-line" @click="selectSampleLine">选中示例线路</button>
+					<button type="button" class="dv-button" data-demo="select-sample-channel" @click="selectSampleChannel">选中示例通道</button>
+				</div>
 				<p class="dv-hint">画布上按住 Shift 从空白处拖动框选；按住 Ctrl 点击仍是累加多选。复选框决定两种选中方式能收哪些类型。只选节点时复制只新增节点，选中线路 / 通道时复制会同时补端点、线路与通道。</p>
-			</div>
-			<div class="dv-group">
-				<h3>2 · 复制事件</h3>
+			</div>
+			<div class="dv-group">
+				<h3>2 · 复制事件</h3>
 				<p class="dv-readout" data-demo="copy-event-readout">{{ copyEventText }}</p>
 				<p class="dv-readout" data-demo="copy-sources-readout">来源：{{ copySourcesText }}</p>
 				<p class="dv-readout" data-demo="copy-items-readout">结果：{{ copyItemsText }}</p>
 				<p class="dv-readout" data-demo="copy-line-channels-readout">线路 → 通道：{{ copyLineChannelsText }}</p>
-				<div class="dv-row">
-					<button type="button" class="dv-button dv-button--primary" data-demo="copy-selected" @click="copySelectedByApi">copySelectedPoints</button>
-					<button type="button" class="dv-button" data-demo="copy-points" @click="copyPointsByApi">copyPoints(sources)</button>
-					<button type="button" class="dv-button" data-demo="copy-clipboard" @click="copyClipboardByApi">copyPointsToClipboard</button>
-					<button type="button" class="dv-button" data-demo="paste-points" :disabled="!clipboardItem" @click="pasteFromClipboard">pastePoints</button>
-				</div>
-				<div class="dv-row">
-					<button type="button" class="dv-button" data-demo="manual-add-point" @click="manualAddPointCopy">手动 addPoint 复制</button>
-					<button type="button" class="dv-button dv-button--danger" data-demo="copy-revert" @click="revertLastCopy">取消 / 回滚本次复制</button>
-				</div>
-				<p class="dv-readout" data-demo="copy-readout">{{ copyText }}</p>
-				<p class="dv-readout" data-demo="clipboard-readout">{{ clipboardText }}</p>
-				<p class="dv-readout" data-demo="copy-action">{{ actionText }}</p>
-				<p class="dv-readout" data-demo="manual-add-point-readout">{{ manualText }}</p>
+				<div class="dv-row">
+					<button type="button" class="dv-button dv-button--primary" data-demo="copy-selected" @click="copySelectedByApi">copySelectedPoints</button>
+					<button type="button" class="dv-button" data-demo="copy-points" @click="copyPointsByApi">copyPoints(sources)</button>
+					<button type="button" class="dv-button" data-demo="copy-clipboard" @click="copyClipboardByApi">copyPointsToClipboard</button>
+					<button type="button" class="dv-button" data-demo="paste-points" :disabled="!clipboardItem" @click="pasteFromClipboard">pastePoints</button>
+				</div>
+				<div class="dv-row">
+					<button type="button" class="dv-button" data-demo="manual-add-point" @click="manualAddPointCopy">手动 addPoint 复制</button>
+					<button type="button" class="dv-button dv-button--danger" data-demo="copy-revert" @click="revertLastCopy">取消 / 回滚本次复制</button>
+				</div>
+				<p class="dv-readout" data-demo="copy-readout">{{ copyText }}</p>
+				<p class="dv-readout" data-demo="clipboard-readout">{{ clipboardText }}</p>
+				<p class="dv-readout" data-demo="copy-action">{{ actionText }}</p>
+				<p class="dv-readout" data-demo="manual-add-point-readout">{{ manualText }}</p>
 				<p class="dv-hint">「手动 addPoint」先拿到内置复制的真实落点，立刻撤销自动副本，再在同一坐标逐个 addPoint；最终只多一份手动副本。Ctrl+C / Ctrl+V 需要 copy 打开、features.keyboard: true，并保持画布焦点。复制事件里的 lineChannels 与 lines 一一对应；support 项是线路为了独立成立而补的端点。</p>
-			</div>
-			<div class="dv-group">
-				<h3>3 · 合并事件</h3>
-				<div class="dv-row cm-form">
-					<label>
-						保留节点
-						<select v-model="mergeTargetId" data-demo="merge-target" :disabled="!mergeTargetOptions.length">
-							<option v-for="item in mergeTargetOptions" :key="item.value" :value="item.value">{{ item.label }}</option>
-						</select>
-					</label>
-					<label>
-						最终名称
-						<input v-model="mergedName" data-demo="merge-name" type="text" />
-					</label>
-				</div>
-				<div class="dv-row cm-form">
-					<label>
-						最终分区
-						<input v-model="mergedZone" data-demo="merge-zone" type="text" />
-					</label>
-					<label>
-						最终电压
-						<input v-model="mergedVoltage" type="number" step="0.1" />
-					</label>
-				</div>
-				<div class="dv-row cm-form">
-					<label>
-						最终颜色
-						<input v-model="mergedColor" data-demo="merge-color" type="text" />
-					</label>
-					<label>
-						最终尺寸
-						<input v-model="mergedSize" data-demo="merge-size" type="number" min="1" step="1" />
-					</label>
-				</div>
-				<div class="dv-row cm-form">
-					<label>
-						最终图标
-						<input v-model="mergedSymbol" data-demo="merge-symbol" type="text" />
-					</label>
-					<label>
-						描边颜色
-						<input v-model="mergedStrokeColor" data-demo="merge-stroke-color" type="text" />
-					</label>
-				</div>
-				<div class="dv-row">
-					<label><input v-model="rewriteOnConfirm" type="checkbox" /> 手动拖拽合并确认时改写 payload.item</label>
-				</div>
-				<div class="dv-row">
-					<button type="button" class="dv-button dv-button--primary" data-demo="merge-selected" :disabled="!canMerge" @click="mergeSelectedByApi">合并选中（指定保留节点）</button>
-				</div>
+			</div>
+			<div class="dv-group">
+				<h3>3 · 合并事件</h3>
+				<div class="dv-row cm-form">
+					<label>
+						保留节点
+						<select v-model="mergeTargetId" data-demo="merge-target" :disabled="!mergeTargetOptions.length">
+							<option v-for="item in mergeTargetOptions" :key="item.value" :value="item.value">{{ item.label }}</option>
+						</select>
+					</label>
+					<label>
+						最终名称
+						<input v-model="mergedName" data-demo="merge-name" type="text" />
+					</label>
+				</div>
+				<div class="dv-row cm-form">
+					<label>
+						最终分区
+						<input v-model="mergedZone" data-demo="merge-zone" type="text" />
+					</label>
+					<label>
+						最终电压
+						<input v-model="mergedVoltage" type="number" step="0.1" />
+					</label>
+				</div>
+				<div class="dv-row cm-form">
+					<label>
+						最终颜色
+						<input v-model="mergedColor" data-demo="merge-color" type="text" />
+					</label>
+					<label>
+						最终尺寸
+						<input v-model="mergedSize" data-demo="merge-size" type="number" min="1" step="1" />
+					</label>
+				</div>
+				<div class="dv-row cm-form">
+					<label>
+						最终图标
+						<input v-model="mergedSymbol" data-demo="merge-symbol" type="text" />
+					</label>
+					<label>
+						描边颜色
+						<input v-model="mergedStrokeColor" data-demo="merge-stroke-color" type="text" />
+					</label>
+				</div>
+				<div class="dv-row">
+					<label><input v-model="rewriteOnConfirm" type="checkbox" /> 手动拖拽合并确认时改写 payload.item</label>
+				</div>
+				<div class="dv-row">
+					<button type="button" class="dv-button dv-button--primary" data-demo="merge-selected" :disabled="!canMerge" @click="mergeSelectedByApi">合并选中（指定保留节点）</button>
+				</div>
 				<p class="dv-readout" data-demo="merge-readout">{{ mergeText }}</p>
 				<p class="dv-readout" data-demo="merge-backend-readout">{{ mergeBackendText }}</p>
 				<p class="dv-hint">mergeSelectedPoints 只并选中集；target 可以指定保留谁，item 只改最终节点的字段。拖点相撞走 pending / confirm 两站，确认前也能改写。合并落地后的 changes 可直接作为后端事务：删除来源节点、更新保留节点、更新 / 删除线路与通道。</p>
-			</div>
+			</div>
 			<div class="dv-group">
 				<h3>4 · 待确认合并</h3>
-				<p class="dv-readout" data-demo="merge-pending-readout">{{ pendingText }}</p>
-				<div class="dv-row cm-form">
-					<label>
-						拖拽合并保留
-						<select v-model="mergeKeep" data-demo="merge-keep">
-							<option value="target">保留碰撞目标（缺省）</option>
-							<option value="source">保留拖动来源</option>
-						</select>
-					</label>
-				</div>
-				<div class="dv-row">
-					<button type="button" class="dv-button dv-button--primary" data-demo="merge-confirm" :disabled="!pendingMerge" @click="confirmPendingMerge">confirmPointMerge({ keep, item })</button>
-					<button type="button" class="dv-button" data-demo="merge-cancel" :disabled="!pendingMerge" @click="cancelPendingMerge">cancelPointMerge()</button>
-				</div>
-				<div class="dv-row">
-					<button type="button" class="dv-button" data-demo="merge-impact-details" :disabled="!pendingMerge?.impact" @click="showMergeImpactDetails">按 id 查线路 / 通道详情</button>
-				</div>
-				<p class="dv-readout" data-demo="merge-impact-detail-readout">{{ mergeDetailText }}</p>
+				<p class="dv-readout" data-demo="merge-pending-readout">{{ pendingText }}</p>
+				<div class="dv-row cm-form">
+					<label>
+						拖拽合并保留
+						<select v-model="mergeKeep" data-demo="merge-keep">
+							<option value="target">保留碰撞目标（缺省）</option>
+							<option value="source">保留拖动来源</option>
+						</select>
+					</label>
+				</div>
+				<div class="dv-row">
+					<button type="button" class="dv-button dv-button--primary" data-demo="merge-confirm" :disabled="!pendingMerge" @click="confirmPendingMerge">resolvePointMerge(true, { keep, item })</button>
+					<button type="button" class="dv-button" data-demo="merge-cancel" :disabled="!pendingMerge" @click="cancelPendingMerge">resolvePointMerge(false)</button>
+				</div>
+				<div class="dv-row">
+					<button type="button" class="dv-button" data-demo="merge-impact-details" :disabled="!pendingMerge?.impact" @click="showMergeImpactDetails">按 id 查线路 / 通道详情</button>
+				</div>
+				<p class="dv-readout" data-demo="merge-impact-detail-readout">{{ mergeDetailText }}</p>
 				<p class="dv-hint">清空选中后，把画布上的一个节点拖到另一个节点上松手；选保留拖动来源 / 碰撞目标，再点确认。pending 载荷的 impact 已按「保留碰撞目标」预演影响线路数，confirm 时按最终 keep 重算；名称、分区、电压和样式都随 item 写回最终节点。</p>
 			</div>
 			<div class="dv-group">
@@ -1186,188 +1186,188 @@ onBeforeUnmount(() => {
 				<pre class="cm-request" data-demo="copy-merge-backend-request">{{ backendPreview }}</pre>
 			</div>
 			<div class="dv-group">
-				<h3>事件日志</h3>
-				<ul class="dv-log" data-demo="copy-merge-log">
-					<li v-for="line in logLines" :key="line.id"><strong>{{ line.name }}</strong> · {{ line.text }}</li>
-					<li v-if="!logLines.length">还没有事件</li>
-				</ul>
-			</div>
-		</aside>
-	</section>
-</template>
-
-<style scoped>
-.cm-demo .dv-stage {
-	isolation: isolate;
-}
-
-.cm-guide {
-	position: absolute;
-	top: 10px;
-	left: 10px;
-	z-index: 4;
-	display: flex;
-	flex-direction: column;
-	gap: 5px;
-	padding: 8px 10px;
-	border: 1px solid rgba(74, 121, 177, 0.18);
-	border-radius: 8px;
-	background: rgba(255, 255, 255, 0.88);
-	box-shadow: 0 5px 18px rgba(31, 62, 105, 0.1);
-	backdrop-filter: blur(6px);
-	pointer-events: none;
-	color: #526b8d;
-	font-size: 11px;
-	line-height: 1.5;
-}
-
-.cm-guide span {
-	display: flex;
-	align-items: center;
-	gap: 5px;
-}
-
-.cm-guide b {
-	display: inline-grid;
-	place-items: center;
-	width: 16px;
-	height: 16px;
-	border-radius: 50%;
-	background: #3678bf;
-	color: #fff;
-	font-size: 10px;
-}
-
-.cm-guide kbd {
-	padding: 0 4px;
-	border: 1px solid #cfdcec;
-	border-bottom-width: 2px;
-	border-radius: 4px;
-	background: #f7faff;
-	color: #2f5e94;
-	font: inherit;
-}
-
-.cm-toast {
-	position: absolute;
-	left: 10px;
-	z-index: 5;
-	width: min(440px, calc(100% - 150px));
-	padding: 10px 12px;
-	border: 1px solid #b9d2ee;
-	border-radius: 9px;
-	background: rgba(249, 252, 255, 0.96);
-	box-shadow: 0 8px 24px rgba(31, 62, 105, 0.16);
-	backdrop-filter: blur(8px);
-}
-
-.cm-toast--copy {
-	top: 104px;
-}
-
-.cm-toast--merge {
-	bottom: 62px;
-	border-color: #efc98f;
-	background: rgba(255, 251, 244, 0.97);
-}
-
-.cm-toast__head {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-}
-
-.cm-toast__head strong {
-	color: #173a63;
-	font-size: 12px;
-}
-
-.cm-toast p {
-	margin: 6px 0 0;
-	color: #526b8d;
-	font-size: 11px;
-	line-height: 1.55;
-}
-
-.cm-toast .cm-toast__hint {
-	color: #8b6a35;
-}
-
-.cm-tag {
-	padding: 1px 6px;
-	border-radius: 999px;
-	background: #eaf2fc;
-	color: #2f5e94;
-	font-size: 10px;
-	white-space: nowrap;
-}
-
-.cm-toast__actions {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 6px;
-	margin-top: 8px;
-}
-
-.cm-toast__actions button,
-.cm-dock button {
-	padding: 4px 8px;
-	border: 1px solid #cfdcec;
-	border-radius: 5px;
-	background: #fff;
-	color: #2f5e94;
-	font-size: 11px;
-	cursor: pointer;
-}
-
-.cm-toast__actions button:hover,
-.cm-dock button:hover {
-	background: #e9f1fb;
-}
-
-.cm-toast__actions .is-primary {
-	border-color: #3678bf;
-	background: #3678bf;
-	color: #fff;
-}
-
-.cm-dock {
-	position: absolute;
-	left: 10px;
-	bottom: 10px;
-	z-index: 5;
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: 6px;
-	padding: 5px 7px;
-	border: 1px solid rgba(74, 121, 177, 0.16);
-	border-radius: 7px;
-	background: rgba(255, 255, 255, 0.9);
-	box-shadow: 0 4px 16px rgba(31, 62, 105, 0.12);
-	color: #526b8d;
-	font-size: 11px;
-}
-
-.cm-dock b {
-	color: #173a63;
-}
-
-.cm-form {
-	align-items: flex-end;
-}
-
-.cm-form input[type='text'],
-.cm-form input[type='number'] {
-	width: 132px;
-	padding: 4px 6px;
-	border: 1px solid #d6e0ec;
-	border-radius: 6px;
-	color: #1f2a44;
-	font-size: 12px;
-}
-
+				<h3>事件日志</h3>
+				<ul class="dv-log" data-demo="copy-merge-log">
+					<li v-for="line in logLines" :key="line.id"><strong>{{ line.name }}</strong> · {{ line.text }}</li>
+					<li v-if="!logLines.length">还没有事件</li>
+				</ul>
+			</div>
+		</aside>
+	</section>
+</template>
+
+<style scoped>
+.cm-demo .dv-stage {
+	isolation: isolate;
+}
+
+.cm-guide {
+	position: absolute;
+	top: 10px;
+	left: 10px;
+	z-index: 4;
+	display: flex;
+	flex-direction: column;
+	gap: 5px;
+	padding: 8px 10px;
+	border: 1px solid rgba(74, 121, 177, 0.18);
+	border-radius: 8px;
+	background: rgba(255, 255, 255, 0.88);
+	box-shadow: 0 5px 18px rgba(31, 62, 105, 0.1);
+	backdrop-filter: blur(6px);
+	pointer-events: none;
+	color: #526b8d;
+	font-size: 11px;
+	line-height: 1.5;
+}
+
+.cm-guide span {
+	display: flex;
+	align-items: center;
+	gap: 5px;
+}
+
+.cm-guide b {
+	display: inline-grid;
+	place-items: center;
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	background: #3678bf;
+	color: #fff;
+	font-size: 10px;
+}
+
+.cm-guide kbd {
+	padding: 0 4px;
+	border: 1px solid #cfdcec;
+	border-bottom-width: 2px;
+	border-radius: 4px;
+	background: #f7faff;
+	color: #2f5e94;
+	font: inherit;
+}
+
+.cm-toast {
+	position: absolute;
+	left: 10px;
+	z-index: 5;
+	width: min(440px, calc(100% - 150px));
+	padding: 10px 12px;
+	border: 1px solid #b9d2ee;
+	border-radius: 9px;
+	background: rgba(249, 252, 255, 0.96);
+	box-shadow: 0 8px 24px rgba(31, 62, 105, 0.16);
+	backdrop-filter: blur(8px);
+}
+
+.cm-toast--copy {
+	top: 104px;
+}
+
+.cm-toast--merge {
+	bottom: 62px;
+	border-color: #efc98f;
+	background: rgba(255, 251, 244, 0.97);
+}
+
+.cm-toast__head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+}
+
+.cm-toast__head strong {
+	color: #173a63;
+	font-size: 12px;
+}
+
+.cm-toast p {
+	margin: 6px 0 0;
+	color: #526b8d;
+	font-size: 11px;
+	line-height: 1.55;
+}
+
+.cm-toast .cm-toast__hint {
+	color: #8b6a35;
+}
+
+.cm-tag {
+	padding: 1px 6px;
+	border-radius: 999px;
+	background: #eaf2fc;
+	color: #2f5e94;
+	font-size: 10px;
+	white-space: nowrap;
+}
+
+.cm-toast__actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+	margin-top: 8px;
+}
+
+.cm-toast__actions button,
+.cm-dock button {
+	padding: 4px 8px;
+	border: 1px solid #cfdcec;
+	border-radius: 5px;
+	background: #fff;
+	color: #2f5e94;
+	font-size: 11px;
+	cursor: pointer;
+}
+
+.cm-toast__actions button:hover,
+.cm-dock button:hover {
+	background: #e9f1fb;
+}
+
+.cm-toast__actions .is-primary {
+	border-color: #3678bf;
+	background: #3678bf;
+	color: #fff;
+}
+
+.cm-dock {
+	position: absolute;
+	left: 10px;
+	bottom: 10px;
+	z-index: 5;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 6px;
+	padding: 5px 7px;
+	border: 1px solid rgba(74, 121, 177, 0.16);
+	border-radius: 7px;
+	background: rgba(255, 255, 255, 0.9);
+	box-shadow: 0 4px 16px rgba(31, 62, 105, 0.12);
+	color: #526b8d;
+	font-size: 11px;
+}
+
+.cm-dock b {
+	color: #173a63;
+}
+
+.cm-form {
+	align-items: flex-end;
+}
+
+.cm-form input[type='text'],
+.cm-form input[type='number'] {
+	width: 132px;
+	padding: 4px 6px;
+	border: 1px solid #d6e0ec;
+	border-radius: 6px;
+	color: #1f2a44;
+	font-size: 12px;
+}
+
 .cm-form input[type='number'] {
 	width: 76px;
 }
@@ -1387,13 +1387,13 @@ onBeforeUnmount(() => {
 }
 
 @media (max-width: 720px) {
-	.cm-toast,
-	.cm-dock {
-		width: calc(100% - 20px);
-	}
-
-	.cm-toast--copy {
-		top: 132px;
-	}
-}
-</style>
+	.cm-toast,
+	.cm-dock {
+		width: calc(100% - 20px);
+	}
+
+	.cm-toast--copy {
+		top: 132px;
+	}
+}
+</style>