gis-view-webgl2 0.1.0 → 0.1.2

package/docs/demos/DecorationDraftDemo.vue

@@ -0,0 +1,1300 @@
+<script setup>
+/**
+ * 动态装饰器草稿演示：线路与节点分开开关，也可以同时开启。
+ * 节点把「吸附方式」和「位置来源」拆成两个正交选项：吸附方式只决定落地后跟随节点还是钉在世界坐标，
+ * 位置来源两档都支持相对偏移 / 固定坐标 / 鼠标位置，因此两种吸附方式能添加的位置完全一样。
+ *
+ * 交互分三段，与拖拽落点 demo 一样，真正写数据留到使用方确认：
+ *   1) beginDecorationDraft：进入草稿模式，图标 / 尺寸 / 颜色 / 方向 / 作用域都从右侧面板取；
+ *   2) pointermove：引擎按 target 查线路 / 节点，命中就画预览；两类同时开启时取屏幕距离更近的那一个，
+ *      离开目标立即发 leave 并清掉假装饰；pointerup 仍命中才发 ready；
+ *   3) ready 之后面板给「添加真实装饰 / 取消」：commitDecorationDraft 把同一份 decoration 追加到全部目标
+ *      线路（一个 batch、一条 dataChange、一步历史），cancelDecorationDraft 让数据一个字节都不动。
+ *
+ * 线路方向：parallel 打开时每个图标按所在线路的切向转；关掉就保持水平。作用域：line 只挂命中的一条，
+ * group 挂它所在分组的全部回线，channel 挂整条通道的所有回线（不在通道里的线路两种范围都退回单条）。
+ * 节点：placement 只负责位置来源（offset / fixed / pointer），anchor 再决定落成屏幕偏移（follow）还是世界坐标（fixed）。
+ */
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { createGisView } from '../../src/index.js'
+import { buildDemoData } from './shared/demoData.js'
+import './shared/demoStyle.css'
+
+const STAR_PATH = 'M12 2.6l2.9 6.1 6.7.9-4.9 4.6 1.2 6.6L12 17.6 6.1 20.8l1.2-6.6-4.9-4.6 6.7-.9z'
+const ARROW_PATH = 'M2 5h20V1l8 7-8 7v-4H2z'
+const PIN_PATH = 'M16 1a8 8 0 0 0-8 8c0 6 8 14 8 14s8-8 8-14a8 8 0 0 0-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'
+
+/** 图标选择：自定义 SVG 与内置形状走同一套 symbol 解析，缺省颜色由 panels 的 color 决定 */
+const SYMBOLS = [
+	{
+		id: 'arrow',
+		label: '方向箭头',
+		glyph: '➜',
+		hint: '横向箭头：打开「与线路平行」时最容易看出角度',
+		symbol: { type: 'svg', path: ARROW_PATH, viewBox: [0, 0, 32, 16], fill: 'currentColor', stroke: 'currentStrokeColor', strokeWidth: 0.8 }
+	},
+	{
+		id: 'star',
+		label: '星标',
+		glyph: '★',
+		hint: '自定义 SVG 星标：图标样式与真实 lines[].decorations 完全同一套',
+		symbol: { type: 'svg', path: STAR_PATH, viewBox: [0, 0, 24, 24], fill: 'currentColor', stroke: 'currentStrokeColor', strokeWidth: 0.8 }
+	},
+	{
+		id: 'pin',
+		label: '定位针',
+		glyph: '◆',
+		hint: '带方向的定位针：不平行时保持屏幕水平',
+		symbol: { type: 'svg', path: PIN_PATH, viewBox: [0, 0, 32, 32], fill: 'currentColor', stroke: 'currentStrokeColor', strokeWidth: 0.8 }
+	},
+	{ id: 'circle', label: '圆点', glyph: '●', hint: '内置圆点：方向不平行时画出来是正圆', symbol: 'circle' },
+	{ id: 'square', label: '方块', glyph: '■', hint: '内置方块：打开平行时跟着线路方向转', symbol: 'square' }
+]
+
+const PHASE_LABELS = {
+	start: '已开启，等待移到目标上',
+	hover: '跟随指针',
+	leave: '已离开目标',
+	ready: '松手完成，等待确认',
+	update: '配置已更新',
+	commit: '已写入数据',
+	cancel: '已取消'
+}
+
+const emit = defineEmits(['notice'])
+const container = ref(null)
+const dataset = buildDemoData({ count: 24 })
+const lineEnabled = ref(false)
+const pointEnabled = ref(false)
+const symbolId = ref('arrow')
+const size = ref(26)
+const color = ref('#ffd166')
+const strokeColor = ref('#ffffff')
+const opacity = ref(0.95)
+const parallel = ref(true)
+const scope = ref('channel')
+const triggerDistance = ref(14)
+const maxPerLine = ref(0)
+const allowedLinesText = ref('')
+const allowedChannelsText = ref('')
+const allowedGroupsText = ref('')
+const pointSnapMode = ref('follow')
+const pointSnapPosition = ref('offset')
+const pointDistance = ref(36)
+const pointDirection = ref(0)
+const pointAtX = ref(dataset.points[0]?.x ?? 0)
+const pointAtY = ref(dataset.points[0]?.y ?? 0)
+const maxPerPoint = ref(0)
+const allowedPointsText = ref('')
+const connectorEnabled = ref(true)
+const connectorColor = ref('#7fa9dc')
+const connectorWidth = ref(1.2)
+const connectorDashed = ref(false)
+const allowDuplicate = ref(true)
+const duplicateStrategy = ref('offset')
+const duplicateDistance = ref(8)
+const draft = ref(null)
+const lastCommit = ref(null)
+const logLines = ref([])
+const logSeq = ref(0)
+const dragOver = ref(false)
+const dragSymbolId = ref('')
+const pendingDrop = ref(null)
+const dropReadout = ref('从左侧拖拽一个图标到线路上；松手后还要点「添加落点装饰」才写数据')
+let view = null
+let offEvents = []
+let restartTimer = 0
+let lastHoverKey = ''
+let hoverCandidate = null
+let previewPointer = null
+let previewFrame = 0
+let previewTimer = 0
+let previewQueued = false
+let dragGhost = null
+let lastPointerWorld = null
+
+/** 白名单输入：中英文逗号 / 空格都能分隔，留空 = 不限制这一类 */
+const parseIdList = (text) => String(text ?? '')
+	.split(/[\s,，]+/)
+	.map(entry => entry.trim())
+	.filter(Boolean)
+const currentSymbol = computed(() => SYMBOLS.find(item => item.id === symbolId.value)?.symbol ?? 'circle')
+const currentSymbolLabel = computed(() => SYMBOLS.find(item => item.id === symbolId.value)?.label ?? '圆点')
+const anyTargetEnabled = computed(() => lineEnabled.value || pointEnabled.value)
+const targetMode = computed(() => lineEnabled.value && pointEnabled.value ? 'both' : pointEnabled.value ? 'point' : 'line')
+const targetModeText = computed(() => targetMode.value === 'both' ? '线路 + 节点' : targetMode.value === 'point' ? '节点' : '线路')
+const anchorLabels = { follow: '跟随', fixed: '固定' }
+const placementLabels = { offset: '相对节点', fixed: '固定位置', pointer: '鼠标位置' }
+const pointModeText = (placement, anchor) => `${anchorLabels[anchor] ?? anchor} · ${placementLabels[placement] ?? placement}`
+const pointSnapText = computed(() => pointModeText(pointSnapPosition.value, pointSnapMode.value))
+const draftHintText = computed(() => {
+	if (draft.value?.phase === 'ready') {
+		return '已松手：在下方确认或取消'
+	}
+	if (targetMode.value === 'both') {
+		return '把指针移到线路或节点附近：临时图标按更近的目标出现'
+	}
+	return targetMode.value === 'point'
+		? '把指针移到节点附近：临时图标会按当前吸附方式与位置来源出现'
+		: '把指针移到线路 / 通道回线上：临时图标会跟着线路出现'
+})
+const decoratorOptions = computed(() => ({
+	target: targetMode.value,
+	symbol: currentSymbol.value,
+	size: size.value,
+	color: color.value,
+	strokeColor: strokeColor.value,
+	strokeWidth: 1.2,
+	opacity: opacity.value,
+	parallel: parallel.value,
+	scope: scope.value,
+	maxDistance: triggerDistance.value,
+	maxPerLine: Math.max(0, Math.floor(Number(maxPerLine.value) || 0)),
+	maxPerPoint: Math.max(0, Math.floor(Number(maxPerPoint.value) || 0)),
+	allowedLines: parseIdList(allowedLinesText.value),
+	allowedChannels: parseIdList(allowedChannelsText.value),
+	allowedGroups: parseIdList(allowedGroupsText.value),
+	allowedPoints: parseIdList(allowedPointsText.value),
+	placement: pointSnapPosition.value,
+	anchor: pointSnapMode.value,
+	distance: pointDistance.value,
+	direction: pointDirection.value,
+	at: pointSnapPosition.value === 'fixed'
+		? [Number(pointAtX.value) || 0, Number(pointAtY.value) || 0]
+		: undefined,
+	angle: 0,
+	connector: connectorEnabled.value
+		? { color: connectorColor.value, width: connectorWidth.value, opacity: 0.9, dashed: connectorDashed.value }
+		: undefined,
+	allowDuplicate: allowDuplicate.value,
+	duplicateStrategy: duplicateStrategy.value,
+	duplicateDistance: duplicateDistance.value
+}))
+const ruleText = computed(() => {
+	const parts = [
+		`触发距离 ${triggerDistance.value}px`,
+		`目标：${targetMode.value === 'both' ? '线路 + 节点' : targetMode.value === 'point' ? '节点' : '线路'}`,
+		maxPerLine.value > 0 ? `每条线最多 ${maxPerLine.value} 个` : '每条线不限量',
+		maxPerPoint.value > 0 ? `每个节点最多 ${maxPerPoint.value} 个` : '每个节点不限量'
+	]
+	const allow = [
+		parseIdList(allowedLinesText.value).length ? `线路 ${parseIdList(allowedLinesText.value).join('、')}` : '',
+		parseIdList(allowedChannelsText.value).length ? `通道 ${parseIdList(allowedChannelsText.value).join('、')}` : '',
+		parseIdList(allowedGroupsText.value).length ? `分组 ${parseIdList(allowedGroupsText.value).join('、')}` : '',
+		parseIdList(allowedPointsText.value).length ? `节点 ${parseIdList(allowedPointsText.value).join('、')}` : ''
+	].filter(Boolean)
+	parts.push(allow.length ? `允许：${allow.join(' / ')}` : '允许：全部线路 / 节点')
+	parts.push(allowDuplicate.value ? '同位置：允许重复' : duplicateStrategy.value === 'reject' ? '同位置：重复时拒绝' : '同位置：自动避让')
+	return parts.join(' · ')
+})
+const phaseText = computed(() => PHASE_LABELS[draft.value?.phase] ?? '未开启')
+const hitText = computed(() => {
+	const current = draft.value
+	if (!current) {
+		return '—'
+	}
+	if (current.hitKind === 'point') {
+		return `节点 ${current.pointId} · ${pointModeText(current.placement, current.anchor)}`
+	}
+	if (!current.lineId) {
+		return '—'
+	}
+	if (current.channelId !== null && current.channelId !== undefined) {
+		return `${current.lineId} · 通道 ${current.channelId}${current.groupId ? ` · 分组 ${current.groupId}` : ''}`
+	}
+	return String(current.lineId)
+})
+const targetText = computed(() => {
+	const current = draft.value
+	if (current?.hitKind === 'point') {
+		return current.pointTargets?.length ? `节点 ${current.pointTargets.map(target => target.pointId).join('、')}` : '—'
+	}
+	const targets = draft.value?.targets ?? []
+	if (!targets.length) {
+		return '—'
+	}
+	const ids = targets.slice(0, 8).map(target => String(target.lineId))
+	return `${targets.length} 条${ids.length ? `：${ids.join('、')}${targets.length > ids.length ? '…' : ''}` : ''}`
+})
+const positionText = computed(() => {
+	const current = draft.value
+	if (current?.hitKind === 'point') {
+		if (current.placement === 'offset') {
+			return `${pointDirection.value}° / ${pointDistance.value}px`
+		}
+		if (current.placement === 'fixed') {
+			return current.world ? `世界 ${current.world.map(value => Number(value).toFixed(1)).join(', ')}` : '固定位置'
+		}
+		return current.decorationScreen ? `屏幕 ${current.decorationScreen.map(value => value.toFixed(1)).join(', ')}` : '鼠标位置'
+	}
+	return current?.position === null || current?.position === undefined ? '—' : `${(current.position * 100).toFixed(1)}%`
+})
+const angleText = computed(() => `${((draft.value?.angle ?? 0) * 180 / Math.PI).toFixed(1)}°`)
+const worldText = computed(() => draft.value?.world ? draft.value.world.map(value => Number(value).toFixed(3)).join(', ') : '—')
+const decorationScreenText = computed(() => draft.value?.decorationScreen ? draft.value.decorationScreen.map(value => Number(value).toFixed(1)).join(', ') : '—')
+const blockedText = computed(() => {
+	const reason = draft.value?.blockedReason
+	if (!reason) {
+		return ''
+	}
+	return {
+		'not-allowed': '目标不在白名单里',
+		limit: '目标已达到装饰上限',
+		duplicate: '该位置已有装饰，当前策略不允许重复',
+		'targets-missing': '目标已经不在数据里'
+	}[reason] ?? String(reason)
+})
+const confirmHint = computed(() => {
+	if (!draft.value || draft.value.phase !== 'ready') {
+		return ''
+	}
+	if (draft.value.hitKind === 'point') {
+		return `${currentSymbolLabel.value} ${draft.value.size}px · 将添加到节点 ${draft.value.pointId}（${pointModeText(draft.value.placement, draft.value.anchor)}${connectorEnabled.value ? ' + 连接线' : ''}）`
+	}
+	return `${currentSymbolLabel.value} ${draft.value.size}px · 将添加到 ${draft.value.targetCount} 条线路（${draft.value.scope}）`
+})
+const lastCommitText = computed(() => {
+	const current = lastCommit.value
+	if (!current) {
+		return '确认一次之后这里给出真实写入的读数'
+	}
+	const target = current.pointIds?.length ? `节点 ${current.pointIds.join('、')}` : current.lineIds?.join('、') || '—'
+	const detail = current.placement
+		? pointModeText(current.placement, current.anchor)
+		: `${current.parallel ? '平行' : '水平'}${current.scope === 'drag' ? ' · 拖拽落点' : ` · 沿线 ${((current.position ?? 0) * 100).toFixed(1)}%`}`
+	return `${current.symbol} · ${current.size}px · ${detail} · ${target}`
+})
+
+const pushLog = (name, text) => {
+	logSeq.value += 1
+	logLines.value = [{ id: logSeq.value, name, text }, ...logLines.value].slice(0, 16)
+}
+
+/* ---- 左侧看板：拖到线路上 → 落点预览 → 点「添加落点装饰」才写数据 ---- */
+
+const reasonText = (reason) => ({
+	miss: '没有拖到线路附近',
+	'not-allowed': '这条线路不在允许范围内',
+	limit: '这条线路已经达到装饰上限',
+	'targets-missing': '线路已经不在数据里'
+}[reason] ?? `没有添加：${reason}`)
+const symbolItemOf = id => SYMBOLS.find(item => item.id === id) ?? SYMBOLS[0]
+const canvasPointOf = event => view?.clientToScreen(event.clientX, event.clientY) ?? [0, 0]
+const decorationFor = (paletteId, position) => {
+	const item = symbolItemOf(paletteId)
+	return {
+		position,
+		anchor: 'follow',
+		parallel: parallel.value,
+		symbol: item.symbol,
+		size: size.value,
+		color: color.value,
+		strokeColor: strokeColor.value,
+		strokeWidth: 1.2,
+		opacity: opacity.value
+	}
+}
+/** 拖拽落线前按当前白名单 / 上限做一次判断：不允许的目标不画预览、不进入待添加 */
+const linePermissionAt = (hit) => {
+	if (!view || !hit) {
+		return { ok: false, reason: 'miss' }
+	}
+	const options = decoratorOptions.value
+	const lineId = hit.item?.id ?? hit.index
+	const membership = view.getLineChannel(hit.index)
+	const channelId = membership?.channelId ?? hit.channelId ?? null
+	const groupId = membership?.groupId ?? null
+	const hasWhitelist = options.allowedLines.length || options.allowedChannels.length || options.allowedGroups.length
+	const matches = list => list.some(id => String(id) === String(lineId))
+	const allowed = !hasWhitelist
+		|| matches(options.allowedLines)
+		|| (channelId !== null && options.allowedChannels.some(id => String(id) === String(channelId)))
+		|| (groupId !== null && options.allowedGroups.some(id => String(id) === String(groupId)))
+	if (!allowed) {
+		return { ok: false, reason: 'not-allowed', lineId, channelId, groupId }
+	}
+	const existingCount = view.getLineDecorations(lineId).length
+	if (options.maxPerLine > 0 && existingCount >= options.maxPerLine) {
+		return { ok: false, reason: 'limit', lineId, channelId, groupId, existingCount }
+	}
+	return { ok: true, lineId, channelId, groupId, existingCount }
+}
+const resolveDropCandidate = (paletteId, screen) => {
+	if (!view) {
+		return { ok: false, reason: 'miss' }
+	}
+	const hit = view.nearestLineAt(screen[0], screen[1], { maxDistance: triggerDistance.value, withScreen: true })
+	if (!hit) {
+		return { ok: false, reason: 'miss' }
+	}
+	const permission = linePermissionAt(hit)
+	if (!permission.ok) {
+		return { ...permission, hit }
+	}
+	const world = hit.screen ? view.unproject(hit.screen[0], hit.screen[1]) : view.unproject(screen[0], screen[1])
+	return {
+		ok: true,
+		paletteId,
+		screen: [screen[0], screen[1]],
+		world,
+		hit,
+		lineId: permission.lineId,
+		channelId: permission.channelId,
+		groupId: permission.groupId,
+		existingCount: permission.existingCount,
+		decoration: decorationFor(paletteId, hit.position)
+	}
+}
+const showDropCandidate = (candidate) => {
+	if (!view || !candidate?.ok) {
+		return null
+	}
+	return view.setDropPreview({
+		kind: 'decoration',
+		screen: candidate.screen,
+		world: candidate.world,
+		item: candidate.decoration
+	})
+}
+const describeDropCandidate = (candidate) => {
+	const item = symbolItemOf(candidate.paletteId)
+	return `${item.label} → ${candidate.lineId} · 沿线 ${(candidate.decoration.position * 100).toFixed(1)}%${candidate.channelId !== null ? ` · 通道 ${candidate.channelId}` : ''}${candidate.groupId !== null ? ` · 分组 ${candidate.groupId}` : ''}`
+}
+const clearDropPreview = () => {
+	if (previewFrame) {
+		cancelAnimationFrame(previewFrame)
+		previewFrame = 0
+	}
+	if (previewTimer) {
+		clearTimeout(previewTimer)
+		previewTimer = 0
+	}
+	previewQueued = false
+	previewPointer = null
+	hoverCandidate = null
+	view?.setDropPreview(null)
+}
+const ensureDragGhost = () => {
+	if (!dragGhost) {
+		dragGhost = document.createElement('div')
+		dragGhost.className = 'dv-drag-ghost'
+		dragGhost.setAttribute('aria-hidden', 'true')
+		dragGhost.style.cssText = 'position:fixed;left:-10px;top:-10px;width:1px;height:1px;opacity:0;pointer-events:none'
+		document.body.appendChild(dragGhost)
+	}
+	return dragGhost
+}
+const flushDropPreview = () => {
+	if (!previewQueued) {
+		return
+	}
+	previewQueued = false
+	if (previewFrame) {
+		cancelAnimationFrame(previewFrame)
+		previewFrame = 0
+	}
+	if (previewTimer) {
+		clearTimeout(previewTimer)
+		previewTimer = 0
+	}
+	if (!dragSymbolId.value || !view) {
+		return
+	}
+	const candidate = resolveDropCandidate(dragSymbolId.value, previewPointer ?? [0, 0])
+	hoverCandidate = candidate.ok ? candidate : null
+	if (!candidate.ok) {
+		view.setDropPreview(null)
+		dropReadout.value = reasonText(candidate.reason)
+		return
+	}
+	showDropCandidate(candidate)
+	dropReadout.value = describeDropCandidate(candidate)
+}
+const scheduleDropPreview = () => {
+	if (previewQueued) {
+		return
+	}
+	previewQueued = true
+	previewFrame = requestAnimationFrame(flushDropPreview)
+	previewTimer = setTimeout(flushDropPreview, 32)
+}
+const selectPalette = (item) => {
+	symbolId.value = item.id
+	pushLog('pick', `已选中「${item.label}」：可以继续用右侧「开启动态装饰」，也可以直接拖到线路上`)
+}
+const onDragStart = (event, item) => {
+	if (!view) {
+		return
+	}
+	if (pendingDrop.value) {
+		pendingDrop.value = null
+		clearDropPreview()
+	}
+	dragSymbolId.value = item.id
+	symbolId.value = item.id
+	if (event.dataTransfer) {
+		event.dataTransfer.effectAllowed = 'copy'
+		event.dataTransfer.setData('application/x-gis-view-decoration', item.id)
+		event.dataTransfer.setData('text/plain', item.id)
+		event.dataTransfer.setDragImage(ensureDragGhost(), 0, 0)
+	}
+	pushLog('dragstart', `拖拽「${item.label}」：靠近线路才显示落点，松手后还要确认`)
+}
+const onDragOver = (event) => {
+	dragOver.value = true
+	if (event.dataTransfer) {
+		event.dataTransfer.dropEffect = 'copy'
+	}
+	const screen = canvasPointOf(event)
+	if (previewPointer && previewPointer[0] === screen[0] && previewPointer[1] === screen[1]) {
+		return
+	}
+	previewPointer = screen
+	scheduleDropPreview()
+}
+const onDragLeave = (event) => {
+	if (container.value && event.relatedTarget instanceof Node && container.value.contains(event.relatedTarget)) {
+		return
+	}
+	dragOver.value = false
+	if (pendingDrop.value) {
+		const restored = showDropCandidate(pendingDrop.value)
+		pendingDrop.value = { ...pendingDrop.value, preview: restored }
+	}
+	else {
+		clearDropPreview()
+	}
+}
+const settleDropPreview = () => {
+	clearDropPreview()
+	if (pendingDrop.value) {
+		const preview = showDropCandidate(pendingDrop.value)
+		pendingDrop.value = { ...pendingDrop.value, preview }
+	}
+}
+const onDragEnd = () => {
+	dragOver.value = false
+	dragSymbolId.value = ''
+	settleDropPreview()
+}
+const onDrop = (event) => {
+	dragOver.value = false
+	if (previewFrame) {
+		cancelAnimationFrame(previewFrame)
+		previewFrame = 0
+	}
+	if (previewTimer) {
+		clearTimeout(previewTimer)
+		previewTimer = 0
+	}
+	previewQueued = false
+	const paletteId = event.dataTransfer?.getData('application/x-gis-view-decoration')
+		|| event.dataTransfer?.getData('text/plain')
+		|| dragSymbolId.value
+	const item = SYMBOLS.find(entry => entry.id === paletteId)
+	if (!item || !view) {
+		clearDropPreview()
+		return
+	}
+	const candidate = resolveDropCandidate(item.id, canvasPointOf(event))
+	if (!candidate.ok) {
+		clearDropPreview()
+		dropReadout.value = reasonText(candidate.reason)
+		pushLog('drop', `${reasonText(candidate.reason)}：这次没有进入待添加`)
+		emit('notice', reasonText(candidate.reason))
+		return
+	}
+	const preview = showDropCandidate(candidate)
+	pendingDrop.value = { ...candidate, preview }
+	dropReadout.value = `${describeDropCandidate(candidate)} · 点「添加落点装饰」才写入`
+	pushLog('drop', `已落到 ${candidate.lineId}（沿线 ${(candidate.decoration.position * 100).toFixed(1)}%）：数据未变，等待确认`)
+	emit('notice', `已选好 ${candidate.lineId}，点「添加落点装饰」写入真实数据`)
+}
+const confirmDrop = () => {
+	const current = pendingDrop.value
+	if (!current || !view) {
+		return
+	}
+	const permission = linePermissionAt(current.hit)
+	if (!permission.ok) {
+		dropReadout.value = reasonText(permission.reason)
+		pushLog('add', reasonText(permission.reason))
+		return
+	}
+	const added = view.addLineDecoration(current.lineId, { ...current.decoration })
+	if (!added) {
+		dropReadout.value = reasonText('targets-missing')
+		pushLog('add', reasonText('targets-missing'))
+		return
+	}
+	const item = symbolItemOf(current.paletteId)
+	lastCommit.value = {
+		count: 1,
+		lineIds: [current.lineId],
+		size: current.decoration.size,
+		symbol: item.label,
+		position: current.decoration.position,
+		parallel: current.decoration.parallel,
+		scope: 'drag'
+	}
+	pendingDrop.value = null
+	clearDropPreview()
+	dropReadout.value = `已写入 ${current.lineId}：沿线 ${(current.decoration.position * 100).toFixed(1)}%`
+	pushLog('add', `addLineDecoration → ${current.lineId} · ${item.label} · 沿线 ${(current.decoration.position * 100).toFixed(1)}%`)
+	emit('notice', `已把「${item.label}」写到 ${current.lineId}`)
+}
+const cancelDrop = () => {
+	if (!pendingDrop.value) {
+		clearDropPreview()
+		return
+	}
+	const lineId = pendingDrop.value.lineId
+	pendingDrop.value = null
+	clearDropPreview()
+	dropReadout.value = '已取消待添加：数据一个字节没动'
+	pushLog('cancel', `取消落点装饰 ${lineId}：没有写数据`)
+}
+
+const scheduleStart = () => {
+	if (restartTimer) {
+		clearTimeout(restartTimer)
+	}
+	restartTimer = window.setTimeout(() => {
+		restartTimer = 0
+		if (anyTargetEnabled.value && view) {
+			view.beginDecorationDraft({ ...decoratorOptions.value })
+		}
+	}, 0)
+}
+
+const handleDraft = (payload) => {
+	if (!payload) {
+		return
+	}
+	draft.value = payload
+	if (payload.phase === 'hover') {
+		// hover 每次移动都发：面板读数实时更新，日志只在「换了目标 / 作用域」时记一条，别刷屏
+		const key = `${payload.hitKind}:${payload.lineId ?? payload.pointId}:${payload.scope}:${payload.targetCount}`
+		if (key !== lastHoverKey) {
+			lastHoverKey = key
+			pushLog('decorationDraft', payload.hitKind === 'point'
+				? `hover · 节点 ${payload.pointId} · ${pointModeText(payload.placement, payload.anchor)} → ${payload.targetCount} 个`
+				: `hover · ${payload.lineId ?? '—'} · ${payload.scope} → ${payload.targetCount} 条`)
+		}
+		return
+	}
+	lastHoverKey = ''
+	if (payload.phase === 'start') {
+		pushLog('decorationDraft', `start · target=${payload.target} · ${payload.size}px · ${payload.symbol}`)
+		return
+	}
+	if (payload.phase === 'leave') {
+		pushLog('decorationDraft', `leave · 指针离开目标${payload.blockedReason ? `（${payload.blockedReason}）` : ''}，假装饰收掉`)
+		return
+	}
+	if (payload.phase === 'ready') {
+		if (payload.hitKind === 'point') {
+			pushLog('decorationDraft', `ready · 节点 ${payload.pointId} · ${pointModeText(payload.placement, payload.anchor)}${payload.duplicateAdjusted ? '（已避让重复）' : ''}`)
+			emit('notice', `装饰器已准备好：节点 ${payload.pointId}，点「添加真实装饰」写入数据`)
+		}
+		else {
+			pushLog('decorationDraft', `ready · ${payload.lineId} · 沿线 ${(payload.position * 100).toFixed(1)}% · ${payload.targetCount} 条`)
+			emit('notice', `装饰器已准备好：${payload.targetCount} 条线路，点「添加真实装饰」写入数据`)
+		}
+		return
+	}
+	if (payload.phase === 'update') {
+		pushLog('decorationDraft', `update · ${payload.symbol} ${payload.size}px · target=${payload.target}${payload.allowDuplicate ? ' · 允许重复' : ' · 禁止重复'}`)
+		return
+	}
+	if (payload.phase === 'commit') {
+		lastCommit.value = {
+			count: payload.targetCount,
+			lineIds: (payload.targets ?? []).map(target => target.lineId),
+			pointIds: (payload.pointTargets ?? []).map(target => target.pointId),
+			size: payload.size,
+			symbol: payload.symbol,
+			position: payload.position,
+			parallel: payload.parallel,
+			scope: payload.scope,
+			placement: payload.hitKind === 'point' ? payload.placement : undefined,
+			anchor: payload.hitKind === 'point' ? payload.anchor : undefined
+		}
+		const target = lastCommit.value.pointIds.length ? `节点 ${lastCommit.value.pointIds.join('、')}` : `线路 ${lastCommit.value.lineIds.join('、')}`
+		pushLog('decorationDraft', `commit · 已写入 ${target}`)
+		emit('notice', `已写入 ${target} 的真实装饰`)
+		scheduleStart()
+		return
+	}
+	if (payload.phase === 'cancel') {
+		pushLog('decorationDraft', `cancel · 假装饰已取消${payload.reason ? `（${payload.reason}）` : ''}`)
+		scheduleStart()
+	}
+}
+
+const buildOptions = () => ({
+	points: dataset.points,
+	lines: dataset.lines,
+	channels: dataset.channels,
+	channelWidth: 2.4,
+	channelInset: 1.8,
+	pointZoomScale: 0.5,
+	pointStyle: { size: 6, color: '#ffffff', strokeColor: '#4c8dff', strokeWidth: 1.4 },
+	lineStyle: { width: 1.3, color: 'rgba(120, 168, 226, 0.58)' },
+	showGrid: true,
+	gridColor: 'rgba(126, 168, 214, 0.22)',
+	fitPadding: 50,
+	features: 'edit',
+	label: { content: '{name}', position: 'top', gap: 7, maxCount: 40, style: { color: '#27405f', fontSize: '12px' } },
+	labelOptimize: true,
+	onReady: () => {
+		emit('notice', `画布就绪：分别勾选线路 / 节点装饰后移到目标上（${dataset.points.length} 个节点 / ${dataset.channels.length} 条通道）`)
+		pushLog('ready', '视图就绪：线路与节点开关独立，也可以同时开启')
+	}
+})
+
+const startDraft = () => {
+	if (!view || !anyTargetEnabled.value) {
+		return
+	}
+	lastHoverKey = ''
+	view.beginDecorationDraft({ ...decoratorOptions.value })
+}
+
+const stopDraft = () => {
+	if (!view) {
+		return
+	}
+	lastHoverKey = ''
+	view.cancelDecorationDraft()
+	draft.value = null
+}
+
+const commitDraft = () => {
+	if (!view || draft.value?.phase !== 'ready') {
+		return
+	}
+	const result = view.commitDecorationDraft({ ...decoratorOptions.value })
+	if (!result.ok) {
+		pushLog('commit', `没有写入：${result.reason ?? 'unknown'}`)
+		return
+	}
+	draft.value = null
+}
+
+const cancelDraft = () => {
+	if (!view || !view.getDecorationDraft()) {
+		return
+	}
+	view.cancelDecorationDraft()
+}
+
+const clearAdded = () => {
+	if (!view) {
+		return
+	}
+	if (pendingDrop.value) {
+		cancelDrop()
+	}
+	const data = view.getData()
+	const decoratedLines = data.lines.filter(line => line.decorations?.length)
+	const decoratedPoints = data.points.filter(point => point.decorations?.length)
+	if (!decoratedLines.length && !decoratedPoints.length) {
+		pushLog('clear', '当前没有已添加的装饰')
+		return
+	}
+	view.batch(() => {
+		for (const line of decoratedLines) {
+			view.setLineDecorations(line.id, [])
+		}
+		for (const point of decoratedPoints) {
+			view.setPointDecorations(point.id, [])
+		}
+	}, { label: '清空演示装饰' })
+	lastCommit.value = null
+	pushLog('clear', `已清掉 ${decoratedLines.length} 条线路 / ${decoratedPoints.length} 个节点上的装饰（一次 batch）`)
+}
+
+watch([lineEnabled, pointEnabled], () => {
+	if (!view) {
+		return
+	}
+	if (anyTargetEnabled.value) {
+		startDraft()
+	}
+	else {
+		stopDraft()
+	}
+})
+
+watch(decoratorOptions, (next) => {
+	if (view?.getDecorationDraft()) {
+		view.updateDecorationDraft({ ...next })
+	}
+})
+
+const subscribe = () => {
+	offEvents.forEach(off => off())
+	offEvents = [
+		view.on('decorationDraft', handleDraft),
+		view.on('dataChange', payload => {
+			pushLog('dataChange', `${payload.type} · 点 ${payload.counts?.points ?? '—'} / 线 ${payload.counts?.lines ?? '—'} / 通道 ${payload.counts?.channels ?? '—'}`)
+		})
+	]
+}
+const onCanvasPointerMove = (event) => {
+	if (!view) {
+		return
+	}
+	const screen = canvasPointOf(event)
+	lastPointerWorld = view.unproject(screen[0], screen[1])
+}
+const usePointerAsFixed = () => {
+	const world = lastPointerWorld ?? draft.value?.world ?? null
+	if (!world) {
+		pushLog('fixed', '指针还没在画布上移动过，先移到目标附近再取坐标')
+		return
+	}
+	pointAtX.value = Number(world[0].toFixed(4))
+	pointAtY.value = Number(world[1].toFixed(4))
+	pointSnapPosition.value = 'fixed'
+	pushLog('fixed', `固定位置已取指针坐标：${pointAtX.value}, ${pointAtY.value}`)
+}
+const onKeyDown = (event) => {
+	if (event.key !== 'Escape') {
+		return
+	}
+	const tag = event.target?.tagName
+	if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') {
+		return
+	}
+	if (pendingDrop.value) {
+		cancelDrop()
+		return
+	}
+	if (view?.getDecorationDraft()) {
+		cancelDraft()
+	}
+}
+
+onMounted(() => {
+	view = createGisView(container.value, buildOptions())
+	subscribe()
+	window.addEventListener('keydown', onKeyDown)
+})
+
+onBeforeUnmount(() => {
+	lineEnabled.value = false
+	pointEnabled.value = false
+	window.removeEventListener('keydown', onKeyDown)
+	if (restartTimer) {
+		clearTimeout(restartTimer)
+		restartTimer = 0
+	}
+	pendingDrop.value = null
+	dragSymbolId.value = ''
+	clearDropPreview()
+	dragGhost?.remove()
+	dragGhost = null
+	offEvents.forEach(off => off())
+	offEvents = []
+	view?.destroy()
+	view = null
+})
+</script>
+
+<template>
+	<section class="dv-demo dv-dec-demo">
+		<aside class="dv-dec-palette">
+			<div class="dv-dec-palette__head">
+				<strong>图标看板</strong>
+				<span>拖到线路</span>
+			</div>
+			<button
+				v-for="item in SYMBOLS"
+				:key="item.id"
+				type="button"
+				class="dv-dec-palette__item"
+				:class="{ 'dv-dec-palette__item--active': symbolId === item.id }"
+				:draggable="true"
+				:data-demo="`decoration-palette-${item.id}`"
+				:title="item.hint"
+				@click="selectPalette(item)"
+				@dragstart="onDragStart($event, item)"
+				@dragend="onDragEnd"
+			>
+				<span class="dv-dec-palette__glyph" :style="{ color }">{{ item.glyph }}</span>
+				<span>{{ item.label }}</span>
+			</button>
+			<p class="dv-hint">按住图标拖到线路附近，松手只落预览；点右侧「添加落点装饰」才调用 addLineDecoration 写数据。节点装饰请在右侧开启「节点装饰」后直接指向节点。</p>
+		</aside>
+
+		<div class="dv-stage">
+			<div
+				ref="container"
+				class="dv-canvas"
+				:class="{ 'dv-canvas--active': anyTargetEnabled, 'dv-canvas--over': dragOver }"
+				@dragover.prevent="onDragOver"
+				@dragleave="onDragLeave"
+				@drop.prevent="onDrop"
+				@pointermove="onCanvasPointerMove"
+			></div>
+			<div class="dv-toolbar">
+				<button type="button" @click="view?.fitView(50)">适应全部</button>
+				<button type="button" @click="clearAdded">清空演示装饰</button>
+			</div>
+			<p v-if="anyTargetEnabled" class="dv-draft-hint" :class="{ 'dv-draft-hint--ready': draft?.phase === 'ready' }">
+				{{ draftHintText }}
+			</p>
+			<div v-if="draft?.phase === 'ready'" class="dv-confirm">
+				<span class="dv-confirm__text">{{ confirmHint }}</span>
+				<button type="button" class="dv-button dv-button--primary" @click="commitDraft">添加真实装饰</button>
+				<button type="button" class="dv-button" @click="cancelDraft">取消（Esc）</button>
+			</div>
+		</div>
+
+		<aside class="dv-panel">
+			<div class="dv-group">
+				<h3>装饰器开关<span class="dv-chip">{{ anyTargetEnabled ? targetModeText : '未开启' }}</span></h3>
+				<div class="dv-row">
+					<label><input v-model="lineEnabled" type="checkbox" data-demo="decoration-line-enabled" /> 线路装饰</label>
+					<label><input v-model="pointEnabled" type="checkbox" data-demo="decoration-point-enabled" /> 节点装饰</label>
+				</div>
+				<p class="dv-hint">两个开关互不依赖：只开一类就只命中那类；同时开启时按屏幕距离取更近的目标，等距优先节点。</p>
+			</div>
+
+			<div class="dv-group">
+				<h3>图标样式<span class="dv-chip">{{ currentSymbolLabel }}</span></h3>
+				<div class="dv-row">
+					<label class="dv-field">图标
+						<select v-model="symbolId" class="dv-input">
+							<option v-for="item in SYMBOLS" :key="item.id" :value="item.id">{{ item.label }}</option>
+						</select>
+					</label>
+				</div>
+				<div class="dv-row">
+					<label class="dv-field dv-field--wide">大小
+						<input v-model.number="size" type="range" min="8" max="48" step="1" />
+						<span class="dv-value">{{ size }} px</span>
+					</label>
+				</div>
+				<div class="dv-row">
+					<label class="dv-field">颜色 <input v-model="color" class="dv-color" type="color" /></label>
+					<label class="dv-field">描边 <input v-model="strokeColor" class="dv-color" type="color" /></label>
+					<label class="dv-field dv-field--wide">透明度
+						<input v-model.number="opacity" type="range" min="0.2" max="1" step="0.05" />
+						<span class="dv-value">{{ Math.round(opacity * 100) }}%</span>
+					</label>
+				</div>
+				<p class="dv-hint">{{ SYMBOLS.find(item => item.id === symbolId)?.hint }}</p>
+				<p class="dv-hint">开启后由引擎画临时图标；确认前不写数据、不记历史。移出目标会自动收掉，松开左键仍命中才进入 ready。</p>
+			</div>
+
+			<div class="dv-group" :class="{ 'dv-group--muted': !lineEnabled }">
+				<h3>线路装饰<span class="dv-chip">{{ lineEnabled ? '参与命中' : '已关闭' }}</span></h3>
+				<div class="dv-row">
+					<label class="dv-field">作用范围
+						<select v-model="scope" class="dv-input" data-demo="decoration-scope">
+							<option value="line">单条线路</option>
+							<option value="group">整个分组</option>
+							<option value="channel">整条通道</option>
+						</select>
+					</label>
+					<label><input v-model="parallel" type="checkbox" /> 与线路方向平行</label>
+				</div>
+				<div class="dv-row">
+					<label class="dv-field">每条线路最多
+						<input v-model.number="maxPerLine" class="dv-input dv-input--number" type="number" min="0" step="1" data-demo="decoration-max-per-line" />
+						<span class="dv-hint">0 = 不限</span>
+					</label>
+				</div>
+				<div class="dv-row">
+					<label class="dv-field dv-field--wide">允许线路 id
+						<input v-model="allowedLinesText" class="dv-input" type="text" placeholder="留空 = 全部，如 line-0, line-1" data-demo="decoration-allowed-lines" />
+					</label>
+				</div>
+				<div class="dv-row">
+					<label class="dv-field dv-field--wide">允许通道 id
+						<input v-model="allowedChannelsText" class="dv-input" type="text" placeholder="如 channel-a, channel-b" data-demo="decoration-allowed-channels" />
+					</label>
+				</div>
+				<div class="dv-row">
+					<label class="dv-field dv-field--wide">允许分组 id
+						<input v-model="allowedGroupsText" class="dv-input" type="text" placeholder="如 channel-a, channel-c" data-demo="decoration-allowed-groups" />
+					</label>
+				</div>
+				<p class="dv-hint">三组允许范围都留空 = 全部允许；任意一组有值时，线路 / 通道 / 分组命中任意一项即可。超出白名单或达到上限时不会触发 hover / ready。</p>
+			</div>
+
+			<div class="dv-group" :class="{ 'dv-group--muted': !pointEnabled }">
+				<h3>节点装饰<span class="dv-chip">{{ pointEnabled ? pointSnapText : '已关闭' }}</span></h3>
+				<div class="dv-row">
+					<label class="dv-field">吸附方式
+						<select v-model="pointSnapMode" class="dv-input" data-demo="decoration-point-snap-mode">
+							<option value="follow">跟随</option>
+							<option value="fixed">固定</option>
+						</select>
+					</label>
+				</div>
+				<div class="dv-row">
+					<label class="dv-field">位置来源
+						<select v-model="pointSnapPosition" class="dv-input" data-demo="decoration-point-snap-position">
+							<option value="offset">相对节点（偏移）</option>
+							<option value="fixed">固定位置（世界坐标）</option>
+							<option value="pointer">鼠标位置</option>
+						</select>
+					</label>
+				</div>
+				<template v-if="pointSnapPosition === 'offset'">
+					<div class="dv-row">
+						<label class="dv-field dv-field--wide">方向（0° 向上、顺时针）
+							<input v-model.number="pointDirection" type="range" min="0" max="359" step="1" data-demo="decoration-point-direction" />
+							<span class="dv-value">{{ pointDirection }}°</span>
+						</label>
+					</div>
+					<div class="dv-row">
+						<label class="dv-field dv-field--wide">距离（屏幕像素）
+							<input v-model.number="pointDistance" type="range" min="0" max="160" step="1" data-demo="decoration-point-distance" />
+							<span class="dv-value">{{ pointDistance }} px</span>
+						</label>
+					</div>
+					<p class="dv-hint">先用方向 / 距离算出相对节点偏移。跟随直接保存这段屏幕偏移；固定会把当时的位置换算成世界坐标后钉住。</p>
+				</template>
+				<template v-else-if="pointSnapPosition === 'fixed'">
+					<div class="dv-row">
+						<label class="dv-field">X
+							<input v-model.number="pointAtX" class="dv-input dv-input--number" type="number" step="0.1" data-demo="decoration-point-at-x" />
+						</label>
+						<label class="dv-field">Y
+							<input v-model.number="pointAtY" class="dv-input dv-input--number" type="number" step="0.1" data-demo="decoration-point-at-y" />
+						</label>
+					</div>
+					<div class="dv-row">
+						<button type="button" class="dv-button" data-demo="decoration-point-at-pointer" @click="usePointerAsFixed">取当前指针坐标</button>
+					</div>
+					<p class="dv-hint">跟随会把这组世界坐标换算成相对节点的屏幕偏移，节点移动时保持这段像素距离；固定则一直留在这组世界坐标。</p>
+				</template>
+				<p v-else class="dv-hint">以落点时的指针位置为准。跟随保存指针相对节点的屏幕偏移；固定保存指针的世界坐标，节点移动后不跟随。</p>
+				<div class="dv-row">
+					<label class="dv-field">每个节点最多
+						<input v-model.number="maxPerPoint" class="dv-input dv-input--number" type="number" min="0" step="1" data-demo="decoration-max-per-point" />
+						<span class="dv-hint">0 = 不限</span>
+					</label>
+				</div>
+				<div class="dv-row">
+					<label class="dv-field dv-field--wide">允许节点 id
+						<input v-model="allowedPointsText" class="dv-input" type="text" placeholder="留空 = 全部，如 node-0, node-1" data-demo="decoration-allowed-points" />
+					</label>
+				</div>
+				<div class="dv-row">
+					<label><input v-model="connectorEnabled" type="checkbox" data-demo="decoration-connector" /> 从节点中心画连接线</label>
+				</div>
+				<template v-if="connectorEnabled">
+					<div class="dv-row">
+						<label class="dv-field">颜色 <input v-model="connectorColor" class="dv-color" type="color" /></label>
+						<label class="dv-field">线宽
+							<input v-model.number="connectorWidth" class="dv-input dv-input--number" type="number" min="0.2" max="8" step="0.1" />
+							<span class="dv-hint">px</span>
+						</label>
+						<label><input v-model="connectorDashed" type="checkbox" /> 虚线</label>
+					</div>
+				</template>
+				<p class="dv-hint">吸附方式只决定落地后是否跟随节点；位置来源三档在跟随 / 固定下都能选，可添加的位置完全一样。连接线跟着装饰中心走。</p>
+			</div>
+
+			<div class="dv-group">
+				<h3>触发与限制<span class="dv-chip">{{ triggerDistance }}px</span></h3>
+				<div class="dv-row">
+					<label class="dv-field dv-field--wide">触发距离（屏幕像素）
+						<input v-model.number="triggerDistance" type="range" min="2" max="40" step="1" data-demo="decoration-trigger-distance" />
+						<span class="dv-value">{{ triggerDistance }} px</span>
+					</label>
+				</div>
+				<p class="dv-readout">{{ ruleText }}</p>
+			</div>
+
+			<div class="dv-group">
+				<h3>同位置重复<span class="dv-chip">{{ allowDuplicate ? '允许' : '禁止' }}</span></h3>
+				<div class="dv-row">
+					<label><input v-model="allowDuplicate" type="checkbox" data-demo="decoration-allow-duplicate" /> 允许同一位置重复添加</label>
+				</div>
+				<template v-if="!allowDuplicate">
+					<div class="dv-row">
+						<label class="dv-field">处理方式
+							<select v-model="duplicateStrategy" class="dv-input" data-demo="decoration-duplicate-strategy">
+								<option value="offset">自动避让</option>
+								<option value="reject">直接拒绝</option>
+							</select>
+						</label>
+						<label class="dv-field">判定距离
+							<input v-model.number="duplicateDistance" class="dv-input dv-input--number" type="number" min="1" max="64" step="1" data-demo="decoration-duplicate-distance" />
+							<span class="dv-hint">px</span>
+						</label>
+					</div>
+				</template>
+				<p class="dv-hint">关闭「允许重复」后，线路装饰沿线路前后避让，节点装饰沿当前偏移方向往外避让；选「直接拒绝」时该目标不会触发 ready，也不会写入。</p>
+			</div>
+
+			<div class="dv-group">
+				<h3>拖拽添加<span class="dv-chip">{{ pendingDrop ? '待确认' : '空' }}</span></h3>
+				<p class="dv-readout">{{ dropReadout }}</p>
+				<div class="dv-row">
+					<button type="button" class="dv-button dv-button--primary" :disabled="!pendingDrop" data-demo="decoration-drop-confirm" @click="confirmDrop">添加落点装饰</button>
+					<button type="button" class="dv-button" :disabled="!pendingDrop" data-demo="decoration-drop-cancel" @click="cancelDrop">取消</button>
+				</div>
+				<p v-if="pendingDrop" class="dv-hint">落点已选好，确认后才调用 addLineDecoration；取消只收掉预览，数据与历史都不动。</p>
+			</div>
+
+			<div class="dv-group">
+				<h3>当前草稿<span class="dv-chip">{{ phaseText }}</span></h3>
+				<p class="dv-readout">阶段：{{ draft?.phase ?? '—' }} · {{ phaseText }}</p>
+				<p class="dv-readout">命中：{{ hitText }}</p>
+				<p class="dv-readout">目标：{{ targetText }}</p>
+				<p v-if="draft?.hitKind === 'point'" class="dv-readout">位置：{{ positionText }} · 屏幕：{{ decorationScreenText }} · 世界：{{ worldText }}</p>
+				<p v-else class="dv-readout">沿线：{{ positionText }} · 角度：{{ angleText }} · 尺寸：{{ draft?.size ?? size }}px</p>
+				<p v-if="draft?.hitKind === 'point'" class="dv-readout">连接线：{{ draft?.connector ? '开启' : '关闭' }} · 重复避让：{{ draft?.duplicateAdjusted ? '已避让' : '未触发' }}</p>
+				<p v-else class="dv-readout">方向：{{ draft?.parallel ? '跟随线路切向' : '保持水平' }} · 范围：{{ draft?.scope ?? scope }}</p>
+				<p v-if="draft?.blockedReason" class="dv-readout dv-readout--blocked">阻挡：{{ blockedText }}</p>
+			</div>
+
+			<div class="dv-group">
+				<h3>新增 / 取消<span class="dv-chip">{{ draft?.phase === 'ready' ? '等确认' : '空' }}</span></h3>
+				<div class="dv-row">
+					<button type="button" class="dv-button dv-button--primary" :disabled="draft?.phase !== 'ready'" @click="commitDraft">添加真实装饰</button>
+					<button type="button" class="dv-button" :disabled="!draft" @click="cancelDraft">取消（Esc）</button>
+				</div>
+				<p class="dv-hint">线路确认会按 scope 给每条目标线路追加同位置、同方向的 decoration；节点确认只给命中的节点追加一条。整批只发一条 dataChange、只记一步历史；取消 / Esc 都只清假装饰。</p>
+			</div>
+
+			<div class="dv-group">
+				<h3>最近一次写入<span class="dv-chip">{{ lastCommit ? `${lastCommit.count} 个` : '还没有' }}</span></h3>
+				<p class="dv-readout">{{ lastCommitText }}</p>
+				<p v-if="lastCommit?.lineIds?.length" class="dv-readout">线路：{{ lastCommit.lineIds.join('、') }}</p>
+				<p v-if="lastCommit?.pointIds?.length" class="dv-readout">节点：{{ lastCommit.pointIds.join('、') }}</p>
+			</div>
+
+			<div class="dv-group">
+				<h3>事件日志</h3>
+				<ul class="dv-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>
+.dv-dec-demo {
+	grid-template-columns: minmax(150px, 184px) minmax(0, 1fr) clamp(320px, 27vw, 440px);
+}
+
+.dv-group--muted {
+	opacity: 0.72;
+}
+
+.dv-readout--blocked {
+	background: #fff3f0;
+	color: #a34332;
+}
+
+.dv-dec-palette {
+	display: flex;
+	flex-direction: column;
+	gap: 7px;
+	max-height: clamp(460px, calc(100vh - 320px), 860px);
+	padding: 10px;
+	overflow: auto;
+	border: 1px solid #e2e9f2;
+	border-radius: 10px;
+	background: #fff;
+	box-shadow: 0 8px 24px rgba(31, 62, 105, 0.05);
+}
+
+.dv-dec-palette__head {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: 8px;
+	padding: 2px 2px 5px;
+	color: #17233d;
+	font-size: 13px;
+}
+
+.dv-dec-palette__head span {
+	color: #8191a8;
+	font-size: 11px;
+	white-space: nowrap;
+}
+
+.dv-dec-palette__item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 9px;
+	border: 1px solid #d6e0ec;
+	border-radius: 8px;
+	background: #fff;
+	color: #1f2a44;
+	font-size: 12px;
+	text-align: left;
+	cursor: grab;
+}
+
+.dv-dec-palette__item:hover {
+	border-color: #9bc0e8;
+	background: #eef4fc;
+}
+
+.dv-dec-palette__item:active {
+	cursor: grabbing;
+}
+
+.dv-dec-palette__item--active {
+	border-color: #3678bf;
+	background: #eaf2fc;
+	box-shadow: inset 3px 0 0 #3678bf;
+}
+
+.dv-dec-palette__glyph {
+	width: 18px;
+	font-size: 15px;
+	line-height: 1;
+	text-align: center;
+}
+
+.dv-dec-palette > .dv-hint {
+	margin-top: auto;
+	padding: 4px 2px 0;
+}
+
+.dv-canvas--active {
+	outline: 2px dashed rgba(54, 120, 191, 0.55);
+	outline-offset: -8px;
+}
+
+.dv-canvas--over {
+	outline-color: rgba(222, 143, 34, 0.82);
+	background: #fffaf1;
+}
+
+.dv-draft-hint {
+	position: absolute;
+	left: 50%;
+	bottom: 18px;
+	z-index: 4;
+	margin: 0;
+	padding: 6px 14px;
+	border-radius: 999px;
+	background: rgba(54, 120, 191, 0.92);
+	color: #fff;
+	font-size: 12px;
+	transform: translateX(-50%);
+	pointer-events: none;
+}
+
+.dv-draft-hint--ready {
+	background: rgba(222, 143, 34, 0.94);
+}
+
+.dv-confirm {
+	position: absolute;
+	left: 50%;
+	bottom: 54px;
+	z-index: 5;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 6px 8px;
+	border-radius: 10px;
+	background: rgba(255, 255, 255, 0.96);
+	box-shadow: 0 10px 26px rgba(31, 62, 105, 0.2);
+	transform: translateX(-50%);
+}
+
+.dv-confirm__text {
+	max-width: 520px;
+	color: #526b8d;
+	font-size: 12px;
+	line-height: 1.5;
+}
+
+.dv-field {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	color: #4b5b76;
+	font-size: 12px;
+}
+
+.dv-field--wide {
+	flex: 1;
+	min-width: 180px;
+}
+
+.dv-input {
+	min-width: 0;
+	flex: 1;
+	padding: 4px 6px;
+	border: 1px solid #d6e0ec;
+	border-radius: 6px;
+	background: #fff;
+	color: #1f2a44;
+	font-size: 12px;
+}
+
+.dv-input--number {
+	flex: 0 0 72px;
+	width: 72px;
+}
+
+.dv-value {
+	min-width: 42px;
+	color: #2f5e94;
+	font-variant-numeric: tabular-nums;
+	text-align: right;
+}
+
+.dv-color {
+	width: 30px;
+	height: 26px;
+	padding: 1px;
+	border: 1px solid #d6e0ec;
+	border-radius: 6px;
+	background: #fff;
+	cursor: pointer;
+}
+
+@media (max-width: 1280px) {
+	.dv-dec-demo {
+		grid-template-columns: minmax(0, 1fr) clamp(320px, 27vw, 440px);
+	}
+
+	.dv-dec-palette {
+		grid-column: 1 / -1;
+		flex-direction: row;
+		flex-wrap: wrap;
+		align-items: center;
+		max-height: none;
+	}
+
+	.dv-dec-palette__head {
+		flex: 1 1 100%;
+	}
+
+	.dv-dec-palette__item {
+		flex: 0 1 auto;
+	}
+
+	.dv-dec-palette > .dv-hint {
+		flex: 1 1 240px;
+		margin-top: 0;
+	}
+}
+
+@media (max-width: 1080px) {
+	.dv-dec-demo {
+		grid-template-columns: minmax(0, 1fr);
+	}
+}
+</style>