gis-view-webgl2 0.1.0 → 0.1.2

package/docs/demos/ChannelDemo.vue

@@ -14,10 +14,11 @@
  *   确认之后才动数据（组件不弹界面，框是这一页自己按载荷画的）。
  * - 导出：`exportData({ format: 'input' })` 拿回与输入同构的一份数据（含通道与拐点），
  *   点「按导出重建」就把它喂回 `updateData` + `updateOptions` —— 导出再导入即回显；
- *   旁边一并给一份 `format: 'view'` 的业务口径（line_data / parallel_groups 那套列名）。
+ *   旁边一并给一份 `format: 'view'` 的业务口径（line_data / parallel_groups 那套列名）；
+ *   「后端 DTO」按钮演示 `defineExportFormat` 带作用域注册的项目自定义格式。
  */
 import { computed, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue'
-import { createGisView } from '../../src/index.js'
+import { createGisView, defineExportFormat, listExportFormats } from '../../src/index.js'
 import { buildDemoData } from './shared/demoData.js'
 import { createFakeBackend, cloneFakeData, FAKE_BACKEND_MODES } from './shared/fakeBackend.js'
 import './shared/demoStyle.css'
@@ -32,11 +33,16 @@ const channelInset = ref(0.3)
 const offsetMode = ref('tangent')
 /** 通道选中模式：'line' 只选点中的回线 / 'group' 连所在分组 / 'channel' 连整条通道 */
 const channelSelectMode = ref('line')
+/** 分组拐点拖动模式：'parallel' 共用骨架 / 'vertex' 只移同组同序号拐点 */
+const channelWaypointDragMode = ref('parallel')
+const waypointDragText = ref('分组拐点拖动：先点「准备两分组拐点」，再拖中间拐点比较两种模式')
 /** 待确认的删除请求（'remove' 事件的 pending 载荷）：确认框照着它渲染 */
 const removeRequest = ref(null)
 const removeText = ref('删除：按 Delete 或点上面的按钮，先出载荷、确认之后才动数据')
 const channelsText = ref('—')
 const groupsText = ref('—')
+const visibilityText = ref('隐藏 / 显示：—')
+const changedText = ref('最近变化：—')
 const exportText = ref('')
 const logLines = ref([])
 const backendMode = ref('success')
@@ -49,6 +55,35 @@ const backendLastSuccess = shallowRef(null)
 const backendLogLines = ref([])
 const waypointSyncText = ref('拐点 / 分组同步：—')
 const fakeBackend = createFakeBackend({ initialVersion: 8, latency: 420, prefix: 'channel' })
+const DTO_FORMAT = 'channel-backend-dto'
+let disposeDtoFormat = null
+/** 自定义导出格式：只把标准文档映射成这一页后端要的列名，不碰组件内部数组 */
+const backendDtoAdapter = ({ document: source, counts }) => ({
+	schema: 'gis-view.channel-demo.v1',
+	counts,
+	camera: source.view?.camera ?? null,
+	stations: source.points.map(point => ({
+		station_id: point.id,
+		station_name: point.name ?? '',
+		x: point.x,
+		y: point.y
+	})),
+	routes: source.lines.map(line => ({
+		route_id: line.id,
+		from: line.from ?? null,
+		to: line.to ?? null,
+		coords: line.path ?? []
+	})),
+	channels: source.channels.map(channel => ({
+		channel_id: channel.id,
+		channel_name: channel.name ?? '',
+		groups: (channel.groups ?? []).map(group => ({
+			group_id: group.id,
+			line_ids: group.lineIds,
+			waypoints: group.path
+		}))
+	}))
+})
 let logSeq = 0
 let backendLogSeq = 0
 let backendJobSeq = 0
@@ -193,6 +228,7 @@ const handleWaypointBackend = (payload) => {
 		const groupId = payload.groupId ?? payload.group_id
 		const group = view.getChannelGroupWaypoints(payload.channelId, groupId)
 		const path = pathJson(group?.path)
+		const waypointOffsets = { ...(group?.waypointOffsets ?? {}) }
 		if (!group) {
 			waypointSyncText.value = `${phaseLabel}：分组 ${String(groupId ?? '—')} 的整份骨架读不出来，请求没有发出`
 			return
@@ -206,6 +242,7 @@ const handleWaypointBackend = (payload) => {
 				channelId: payload.channelId,
 				groupId,
 				path,
+				waypointOffsets,
 				phase: payload.phase,
 				scope: group.scope ?? 'group'
 			}
@@ -269,6 +306,8 @@ const buildOptions = () => ({
 	features: { pan: true, zoom: true, hover: true, select: true, contextMenu: true, keyboard: true, drag: true, channelMenu: true, remove: true },
 	// 通道选中模式：点一条回线选它自己 / 连所在分组 / 连整条通道
 	channelSelectMode: channelSelectMode.value,
+	// 分组拐点拖动：共用骨架 / 只移同组同序号拐点
+	channelWaypointDragMode: channelWaypointDragMode.value,
 	// 删除配置：confirm 缺省（null）表示组件不弹界面、停在待确认 —— 这一页订阅 'remove' 事件自己画确认框
 	remove: { scope: 'lines' },
 	// 交互框里的「加拐点 / 删拐点」动的是分组骨架，要有这一项才不是灰的（Ctrl + 点击加点、双击删点也一起开了）
@@ -288,8 +327,12 @@ const buildOptions = () => ({
 			const channel = view?.getLineChannel(entry.index)
 			groupsText.value = channel
 				? `线路 ${entry.item?.id ?? entry.index} → ${channel.channelId} / 分组 ${channel.groupId}（共 ${channel.group?.lineIds?.length ?? 0} 回）`
-				: `线路 ${entry.item?.id ?? entry.index} 不在通道里`
+			: `线路 ${entry.item?.id ?? entry.index} 不在通道里`
 		}
+	},
+	onDataChange: () => {
+		syncReadouts()
+		syncChangedChannels()
 	}
 })
 
@@ -316,6 +359,37 @@ const syncReadouts = () => {
 	groupsText.value = firstChannelId === undefined ? '—' : describeGroups(firstChannelId)
 	// 面板上改过分组之后，开着的右键框也要跟着对上（对不上就收掉）
 	syncMenu()
+	syncChangedChannels()
+}
+
+/** 最近变化通道：分组 / 成员 / 拐点 / 端点 / 可见性 / 其余声明字段 */
+const syncChangedChannels = () => {
+	const labels = { groups: '分组', members: '成员', waypoints: '拐点', endpoints: '端点', visibility: '可见性', fields: '字段' }
+	const changed = view?.getChangedChannels() ?? []
+	changedText.value = changed.length
+		? `最近变化 ${changed.length} 条：${changed.slice(0, 4).map(item => `${String(item.id)}（${item.reasons.map(reason => labels[reason] ?? reason).join(' / ')}）`).join(' · ')}`
+		: '最近变化：没有（改分组 / 拖拐点 / 隐藏后再看）'
+}
+
+const setFirstFeatureVisible = (kind, visible) => {
+	const options = view?.getOptions()
+	const item = kind === 'point' ? options?.points?.[0] : kind === 'line' ? options?.lines?.[0] : options?.channels?.[0]
+	const ref = item?.id ?? (item ? 0 : null)
+	const kindLabel = kind === 'point' ? '节点' : kind === 'line' ? '线路' : '通道'
+	if (!view || ref === null) return
+	const outcome = visible ? view.showFeatures(kind, ref) : view.hideFeatures(kind, ref)
+	visibilityText.value = outcome.ok
+		? `${visible ? '显示' : '隐藏'}${kindLabel} ${String(ref)}：${outcome.indexes.length} 条${outcome.skipped.length ? ` · 跳过 ${outcome.skipped.length}` : ''}`
+		: `${visible ? '显示' : '隐藏'}${kindLabel}失败：${outcome.reason}`
+	pushLog(visible ? 'showFeatures' : 'hideFeatures', visibilityText.value)
+	syncReadouts()
+}
+
+const clearChannelChanges = () => {
+	view?.clearChangedChannels()
+	syncChangedChannels()
+	visibilityText.value = '通道对账：已把当前声明记成新基准'
+	pushLog('clearChangedChannels', visibilityText.value)
 }
 
 const describeGroups = (channelId) => {
@@ -430,6 +504,127 @@ const splitPickedIntoGroup = () => {
 	syncReadouts()
 }
 
+/**
+ * 线路分组弹框：参考业务页的「分组卡片 + 行内移入目标」。
+ * 行内「确认移入」只改本地草稿，底部「确定分组」才调用一次 splitChannelGroups：
+ * 一次把整份 groups 声明换掉，避免每挪一条回线都发一次请求 / 记一步历史。
+ */
+const groupDialog = ref(null)
+const groupDialogTargets = ref({})
+const groupDialogText = ref('线路分组：改完所有移动后，点「确定分组」一次提交')
+const sameGroupId = (left, right) => String(left) === String(right)
+
+const dialogLineRowOf = (lineId) => {
+	const line = view?.getLine(lineId)
+	const from = line?.from === undefined || line?.from === null ? null : view?.getPoint(line.from)
+	const to = line?.to === undefined || line?.to === null ? null : view?.getPoint(line.to)
+	const endpointName = from?.name && to?.name ? `${from.name}_${to.name}` : String(lineId)
+	return {
+		id: lineId,
+		label: line?.name || endpointName,
+		meta: line ? [line.from, line.to].filter(id => id !== undefined && id !== null).map(String).join(' → ') : String(lineId)
+	}
+}
+
+/** 弹框副标题沿用截图里的「场站对标标识」：优先用通道两端，读不到再退回第一条回线两端 */
+const dialogStationKeyOf = (channelId) => {
+	const declared = view?.getOptions().channels?.find(channel => sameGroupId(channel.id, channelId))
+	const ends = [declared?.from, declared?.to].filter(id => id !== undefined && id !== null)
+	if (ends.length) {
+		return ends.map(String).join('|')
+	}
+	const firstLineId = view?.getChannelGroups(channelId)?.flatMap(group => group.lineIds ?? [])[0]
+	const line = firstLineId === undefined ? null : view?.getLine(firstLineId)
+	const lineEnds = [line?.from, line?.to].filter(id => id !== undefined && id !== null)
+	return lineEnds.length ? lineEnds.map(String).join('|') : String(channelId)
+}
+
+const groupDialogGroups = computed(() => (groupDialog.value?.groups ?? []).map((group, index) => ({
+	...group,
+	index,
+	rows: group.lineIds.map(dialogLineRowOf)
+})))
+
+const groupDialogTargetsFor = sourceIndex => groupDialogGroups.value.filter(group => group.index !== sourceIndex)
+
+const openGroupDialog = (channelId, hitLineId) => {
+	const wanted = channelId ?? channelMenu.value?.channelId ?? firstChannelGroups()?.channelId
+	if (!view || wanted === undefined || wanted === null) {
+		pushLog('线路分组：当前没有可编辑的通道')
+		return
+	}
+	const groups = view.getChannelGroups(wanted)
+	if (!groups.length) {
+		pushLog('线路分组：通道 ' + wanted + ' 暂时读不到分组')
+		return
+	}
+	groupDialog.value = {
+		channelId: wanted,
+		stationKey: dialogStationKeyOf(wanted),
+		hitLineId: hitLineId ?? null,
+		groups: groups.map(group => ({ id: group.id, lineIds: [...(group.lineIds ?? [])] })),
+		moves: 0
+	}
+	groupDialogTargets.value = {}
+	groupDialogText.value = String(wanted) + '：' + groups.length + ' 组 / ' + groups.reduce((sum, group) => sum + group.lineIds.length, 0) + ' 回线。可以连续移动，确定时一次提交。'
+	if (channelMenu.value) {
+		closeChannelMenu()
+	}
+	pushLog('线路分组：打开 ' + wanted + ' 的整组编辑弹框')
+}
+
+const moveGroupDialogLine = (lineId) => {
+	const draft = groupDialog.value
+	if (!draft) {
+		return
+	}
+	const rawTarget = groupDialogTargets.value[String(lineId)]
+	const sourceIndex = draft.groups.findIndex(group => group.lineIds.some(id => sameGroupId(id, lineId)))
+	const targetIndex = draft.groups.findIndex(group => sameGroupId(group.id, rawTarget))
+	if (sourceIndex < 0) {
+		groupDialogText.value = '这条回线已经不在草稿里，重新打开弹框再试'
+		return
+	}
+	if (targetIndex < 0) {
+		groupDialogText.value = '先给这条回线选一个目标分组'
+		return
+	}
+	const sourceLabel = '分组 ' + (sourceIndex + 1)
+	const targetLabel = '分组 ' + (targetIndex + 1)
+	const nextGroups = draft.groups.map(group => ({ id: group.id, lineIds: [...group.lineIds] }))
+	nextGroups[sourceIndex].lineIds = nextGroups[sourceIndex].lineIds.filter(id => !sameGroupId(id, lineId))
+	nextGroups[targetIndex].lineIds.push(lineId)
+	draft.groups = nextGroups.filter(group => group.lineIds.length)
+	draft.moves += 1
+	delete groupDialogTargets.value[String(lineId)]
+	groupDialogText.value = '草稿第 ' + draft.moves + ' 处：' + dialogLineRowOf(lineId).label + ' ' + sourceLabel + ' → ' + targetLabel + '。数据还没动，点「确定分组」一次提交。'
+}
+
+const closeGroupDialog = () => {
+	groupDialog.value = null
+	groupDialogTargets.value = {}
+}
+
+const confirmGroupDialog = () => {
+	const draft = groupDialog.value
+	if (!view || !draft) {
+		return
+	}
+	if (!draft.moves) {
+		groupDialogText.value = '还没有移动任何回线；可以继续编辑，或点「取消」退出'
+		return
+	}
+	const groups = draft.groups
+		.filter(group => group.lineIds.length)
+		.map(group => ({ id: group.id, lineIds: [...group.lineIds] }))
+	view.splitChannelGroups(draft.channelId, groups)
+	const lineCount = groups.reduce((sum, group) => sum + group.lineIds.length, 0)
+	pushLog('splitChannelGroups：' + draft.channelId + ' 一次提交 ' + draft.moves + ' 处移动（' + groups.length + ' 组 / ' + lineCount + ' 回线）')
+	groupDialogText.value = '已一次提交：' + groups.length + ' 组 / ' + lineCount + ' 回线'
+	closeGroupDialog()
+	syncReadouts()
+}
+
 /**
  * 右键交互框：右键一条通道回线时 onChannelContextMenu(payload) 把「这条通道几组 / 当前是哪一组 /
  * 这一组能做哪些交互」一次交出来，界面照着 groups 与 actions 渲染就行 —— 核心是四件事：
@@ -563,6 +758,78 @@ const applyChannelSelectMode = () => {
 	pushLog('通道选中模式 → ' + channelSelectMode.value + '（' + labels[channelSelectMode.value] + '）')
 }
 
+/** 分组拐点拖动模式：只影响下一次拖动，updateOptions 不重排场景 */
+const applyChannelWaypointDragMode = () => {
+	view?.updateOptions({ channelWaypointDragMode: channelWaypointDragMode.value })
+	const labels = {
+		parallel: '共用骨架 + 平行偏移（和现有逻辑一样）',
+		vertex: '只移动同组同序号拐点，其他拐点不动'
+	}
+	waypointDragText.value = '分组拐点拖动：' + labels[channelWaypointDragMode.value]
+	pushLog('分组拐点拖动 → ' + channelWaypointDragMode.value + '：' + labels[channelWaypointDragMode.value])
+}
+
+/**
+ * 把第一条通道拆成两组，并给每组加两个错开的拐点：
+ * 拖动中间拐点时，parallel 模式会重算整条平行骨架；vertex 模式只平移四根线上同一个序号的顶点。
+ */
+const prepareWaypointDragDemo = () => {
+	if (!view) {
+		return
+	}
+	const channel = view.getChannels()[0]
+	if (!channel) {
+		return
+	}
+	const channelId = channel.channelId
+	let groups = view.getChannelGroups(channelId)
+	const lineIds = groups.flatMap(group => group.lineIds)
+	if (lineIds.length < 2) {
+		waypointDragText.value = '这条通道只有一回线，拆不出两组可比较的分组拐点'
+		return
+	}
+	const splitAt = Math.ceil(lineIds.length / 2)
+	view.splitChannelGroups(channelId, [lineIds.slice(0, splitAt), lineIds.slice(splitAt)])
+	groups = view.getChannelGroups(channelId)
+	// 先把旧拐点清干净，重复点按钮也能得到同一份演示数据
+	for (const group of groups) {
+		let live = view.getChannelGroups(channelId).find(item => String(item.id) === String(group.id))
+		let guard = 0
+		while (live && live.skeleton.length > 2 && guard < 64) {
+			view.removeChannelGroupWaypoint(channelId, group.id, live.skeleton.length - 2)
+			live = view.getChannelGroups(channelId).find(item => String(item.id) === String(group.id))
+			guard += 1
+		}
+	}
+	groups = view.getChannelGroups(channelId)
+	groups.forEach((group, groupIndex) => {
+		const start = group.skeleton[0]
+		const end = group.skeleton[group.skeleton.length - 1]
+		if (!start || !end) {
+			return
+		}
+		const dx = end[0] - start[0]
+		const dy = end[1] - start[1]
+		const length = Math.hypot(dx, dy)
+		if (length < 1e-9) {
+			return
+		}
+		const normal = [-dy / length, dx / length]
+		const side = groupIndex === 0 ? 1 : -1
+		const offset = Math.min(Math.max(length * 0.06, 0.05), 0.16) * side
+		for (const ratio of [0.33, 0.66]) {
+			view.addChannelGroupWaypoint(channelId, group.id, [
+				start[0] + dx * ratio + normal[0] * offset,
+				start[1] + dy * ratio + normal[1] * offset
+			])
+		}
+	})
+	view.updateOptions({ channelSelectMode: channelSelectMode.value, channelWaypointDragMode: channelWaypointDragMode.value })
+	syncReadouts()
+	waypointDragText.value = `已准备 ${groups.length} 组 / 每组 2 个拐点：拖动中间拐点比较「共用骨架」和「只移同序号拐点」`
+	pushLog('分组拐点演示就绪：' + groups.map(group => group.id + '（' + group.lineIds.length + ' 回）').join(' / '))
+}
+
 /** 删除载荷的中文读数：要删什么、连带什么 */
 const describeRemove = (plan) => {
 	const counts = plan.counts ?? {}
@@ -625,7 +892,14 @@ const cancelRemove = () => {
 
 /** Esc 收框：框是演示自己画的，组件只负责把载荷交出来 */
 const onWindowKeyDown = (event) => {
-	if (event.key === 'Escape' && channelMenu.value) {
+	if (event.key !== 'Escape') {
+		return
+	}
+	if (groupDialog.value) {
+		closeGroupDialog()
+		return
+	}
+	if (channelMenu.value) {
 		closeChannelMenu()
 	}
 }
@@ -661,6 +935,18 @@ const exportData = () => {
 	return exported
 }
 
+/** 自定义格式按钮：同一份标准文档，不必再手写深拷贝 / 坐标归一 / JSON 安全 */
+const exportBackendDto = () => {
+	const dto = view?.exportData({ format: DTO_FORMAT })
+	if (!dto) {
+		return
+	}
+	exportText.value = `自定义格式 ${DTO_FORMAT}：${dto.counts.points} 站 / ${dto.counts.lines} 线路 / ${dto.counts.channels} 通道 · 通道分组 ${dto.counts.groups}`
+		+ `　|　当前可注册表：${listExportFormats().join(' / ')}`
+	pushLog(`自定义导出：${dto.schema}，${dto.stations.length} 站 / ${dto.routes.length} 线 / ${dto.channels.length} 通道`)
+	return dto
+}
+
 /** 回灌：把 input 口径的那份直接喂回视图（点 / 线走 updateData，通道走 updateOptions） */
 const rebuildFromExport = () => {
 	const exported = exportData()
@@ -675,6 +961,7 @@ const rebuildFromExport = () => {
 }
 
 onMounted(() => {
+	disposeDtoFormat = defineExportFormat(DTO_FORMAT, backendDtoAdapter)
 	view = createGisView(container.value, buildOptions())
 	// 删除请求走 'remove' 事件（与 onRemove 同一份载荷）：pending / remove / cancel 三个阶段都在这一条上
 	view.on('remove', handleRemoveRequest)
@@ -687,6 +974,8 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
 	disposed = true
+	disposeDtoFormat?.()
+	disposeDtoFormat = null
 	window.removeEventListener('keydown', onWindowKeyDown)
 	view?.destroy()
 	view = null
@@ -715,6 +1004,9 @@ onBeforeUnmount(() => {
 						<span>{{ group.lineCount }} 回{{ group.waypointCount ? ' / ' + group.waypointCount + ' 拐点' : '' }}</span>
 					</li>
 				</ul>
+				<button type="button" class="dv-channel-menu__open-dialog" data-demo="channel-group-dialog-open-menu" @click="openGroupDialog(channelMenu.channelId, channelMenu.lineId)">
+					线路分组…
+				</button>
 				<div v-if="menuLineRows.length" class="dv-channel-menu__lines">
 					<p class="dv-channel-menu__subtitle">线路分配 · 每条回线都能拆成新分组或并进别的分组</p>
 					<ul>
@@ -743,6 +1035,65 @@ onBeforeUnmount(() => {
 					命中回线 {{ channelMenu.lineId }} · 这些都在 onChannelContextMenu(payload) 里；点空白处 / Esc / × 收框
 				</p>
 			</div>
+			<div v-if="groupDialog" class="dv-group-dialog" data-demo="channel-group-dialog" @click.self="closeGroupDialog">
+				<section class="dv-group-dialog__panel" role="dialog" aria-modal="true" aria-labelledby="dv-channel-group-title">
+					<header class="dv-group-dialog__head">
+						<div>
+							<h3 id="dv-channel-group-title">线路分组</h3>
+							<p>场站对标标识：{{ groupDialog.stationKey }}</p>
+						</div>
+						<button type="button" title="取消并关闭（Esc）" @click="closeGroupDialog">×</button>
+					</header>
+					<div class="dv-group-dialog__body">
+						<section
+							v-for="group in groupDialogGroups"
+							:key="String(group.id)"
+							class="dv-group-dialog__card"
+							data-demo="channel-group-dialog-card"
+							:data-group-id="String(group.id)"
+						>
+							<header>
+								<strong>分组 {{ group.index + 1 }}</strong>
+								<span>{{ group.lineIds.length }} 条线路</span>
+								<code>{{ group.id }}</code>
+							</header>
+							<ul>
+								<li
+									v-for="row in group.rows"
+									:key="String(row.id)"
+									class="dv-group-dialog__line"
+									data-demo="channel-group-dialog-line"
+									:data-line-id="String(row.id)"
+									:data-group-id="String(group.id)"
+								>
+									<div class="dv-group-dialog__line-text">
+										<strong>{{ row.label }}</strong>
+										<span>{{ row.meta }}</span>
+									</div>
+									<select v-model="groupDialogTargets[String(row.id)]" data-demo="channel-group-dialog-target">
+										<option value="">移入其他组</option>
+										<option v-for="target in groupDialogTargetsFor(group.index)" :key="String(target.id)" :value="String(target.id)">
+											分组 {{ target.index + 1 }}（{{ target.lineIds.length }} 条）
+										</option>
+									</select>
+									<button type="button" :disabled="!groupDialogTargets[String(row.id)]" data-demo="channel-group-dialog-move" @click="moveGroupDialogLine(row.id)">
+										确认移入
+									</button>
+								</li>
+							</ul>
+						</section>
+					</div>
+					<footer class="dv-group-dialog__footer">
+						<p data-demo="channel-group-dialog-text">{{ groupDialogText }}</p>
+						<div>
+							<button type="button" data-demo="channel-group-dialog-cancel" @click="closeGroupDialog">取消</button>
+							<button type="button" class="dv-button--primary" data-demo="channel-group-dialog-confirm" :disabled="!groupDialog.moves" @click="confirmGroupDialog">
+								确定分组
+							</button>
+						</div>
+					</footer>
+				</section>
+			</div>
 			<div v-if="removeRequest" class="dv-remove-box">
 				<div class="dv-channel-menu__head">
 					<strong>确认删除</strong>
@@ -803,6 +1154,7 @@ onBeforeUnmount(() => {
 				<div class="dv-row">
 					<button type="button" class="dv-button" @click="splitFirstChannel">第一条通道：每回线拆一组</button>
 					<button type="button" class="dv-button" @click="mergeFirstChannel">并回一组</button>
+					<button type="button" class="dv-button" data-demo="channel-group-dialog-open" @click="openGroupDialog()">线路分组…</button>
 				</div>
 				<p class="dv-readout">{{ channelsText }}</p>
 				<div class="dv-row dv-split" data-demo="add-channel-group-picks">
@@ -827,14 +1179,14 @@ onBeforeUnmount(() => {
 				<p class="dv-hint">勾几条回线点「勾上的拆成一组」= addChannelGroup(channelId, lineIds, { id?, path? })：一次把这几条挪进单独一组（数据里没写 groups 的通道也是这么拆，被挪空的那一组整组消失）；「新这一组的拐点」两项演示 options.path（照抄来源组当前的骨架 / 写 [] 直连），组 id 留空按 通道 id::N 排。一条一条挪走 moveChannelLine，整份重排走 splitChannelGroups。</p>
 				<p class="dv-readout">{{ groupsText }}</p>
 				<p class="dv-hint">选中一条通道回线也会刷新读数：onSelect 载荷里的 items 带上 index，再用 getLineChannel(index) 问出它属于哪条通道、哪一组。</p>
-				<p class="dv-hint">右键一条通道回线出交互框：点分组就是 setCurrentChannelGroup（顺带选中它的回线），每条回线可以拆成新分组 / 并进别的分组，下面一排按钮交给 runChannelAction。</p>
+				<p class="dv-hint">右键一条通道回线出交互框：点分组就是 setCurrentChannelGroup（顺带选中它的回线），每条回线可以拆成新分组 / 并进别的分组，下面一排按钮交给 runChannelAction。「线路分组…」弹框把多次移入攒成一份草稿，确定时只调用一次 splitChannelGroups 换整份分组声明。</p>
 			</div>
 
 			<div class="dv-group">
 				<h3>通道选中模式<span class="dv-chip">{{ channelSelectMode }}</span></h3>
 				<div class="dv-row">
 					<label>点一条回线
-						<select v-model="channelSelectMode" @change="applyChannelSelectMode">
+						<select v-model="channelSelectMode" data-demo="channel-select-mode" @change="applyChannelSelectMode">
 							<option value="line">line（只选它自己）</option>
 							<option value="group">group（连所在分组）</option>
 							<option value="channel">channel（连整条通道）</option>
@@ -843,7 +1195,49 @@ onBeforeUnmount(() => {
 				</div>
 				<p class="dv-hint">
 					channelSelectMode 只决定下一次点选怎么摊开：line 单条、group 连这一组、channel 整条通道；
-					在 group / channel 下 Ctrl + 点击是整批取反。切换走 updateOptions，场景不用重排。
+					在 group / channel 下 Ctrl + 点击是整批取反，Ctrl + 点击线路加点也按这一档选中并高亮。
+					切换走 updateOptions，场景不用重排。
+				</p>
+			</div>
+
+			<div class="dv-group">
+				<h3>分组拐点拖动<span class="dv-chip">{{ channelWaypointDragMode }}</span></h3>
+				<div class="dv-row">
+					<label>拖动模式
+						<select v-model="channelWaypointDragMode" data-demo="channel-waypoint-drag-mode" @change="applyChannelWaypointDragMode">
+							<option value="parallel">parallel（共用骨架，和现有逻辑一样）</option>
+							<option value="vertex">vertex（只移同组同序号拐点）</option>
+						</select>
+					</label>
+					<button type="button" class="dv-button dv-button--primary" data-demo="channel-waypoint-drag-prepare" @click="prepareWaypointDragDemo">准备两分组拐点</button>
+				</div>
+				<p class="dv-readout" data-demo="channel-waypoint-drag-text">{{ waypointDragText }}</p>
+				<p class="dv-hint">
+					channelWaypointDragMode 只影响下一次拖动：parallel 改共用骨架，组内回线按平行偏移整体重算；vertex 只把同组同一
+					pathIndex 的拐点按相同世界增量平移，相邻拐点与其它分组不动。vertex 的结果写进 groups[].waypointOffsets，
+					键是骨架顶点序号（只认中间拐点），格式 { "1": [dx, dy] }；不写或空对象就是普通平行骨架。
+				</p>
+			</div>
+
+			<div class="dv-group">
+				<h3>隐藏 / 显示与最近变化</h3>
+				<div class="dv-row">
+					<button type="button" class="dv-button" data-demo="point-hide" @click="setFirstFeatureVisible('point', false)">隐藏第一个节点</button>
+					<button type="button" class="dv-button dv-button--primary" data-demo="point-show" @click="setFirstFeatureVisible('point', true)">显示第一个节点</button>
+					<button type="button" class="dv-button" data-demo="line-hide" @click="setFirstFeatureVisible('line', false)">隐藏第一条线路</button>
+					<button type="button" class="dv-button dv-button--primary" data-demo="line-show" @click="setFirstFeatureVisible('line', true)">显示第一条线路</button>
+				</div>
+				<div class="dv-row">
+					<button type="button" class="dv-button" data-demo="channel-hide" @click="setFirstFeatureVisible('channel', false)">隐藏第一条通道</button>
+					<button type="button" class="dv-button dv-button--primary" data-demo="channel-show" @click="setFirstFeatureVisible('channel', true)">显示第一条通道</button>
+					<button type="button" class="dv-button" data-demo="channel-clear-changed" @click="clearChannelChanges">通道对账</button>
+				</div>
+				<p class="dv-readout" data-demo="channel-visibility">{{ visibilityText }}</p>
+				<p class="dv-readout" data-demo="channel-changed">{{ changedText }}</p>
+				<p class="dv-hint">
+					节点 / 线路 / 通道都能用 hideFeatures / showFeatures 收起再恢复，只改 visible，数据本身不删；通道收起时成员回线、分组、拐点与编辑状态都保留；
+					getChangedChannels 会把分组、成员、拐点、端点、可见性与其余字段的变化逐条列出来，
+					clearChangedChannels 把当前声明记成新的对账基准。
 				</p>
 			</div>
 
@@ -883,7 +1277,7 @@ onBeforeUnmount(() => {
 				<p class="dv-readout" data-demo="channel-waypoint-status">{{ waypointSyncText }}</p>
 				<p class="dv-readout" data-demo="channel-backend-readout">{{ backendText }}</p>
 				<p class="dv-hint">
-					{{ backendModeHint }}。请求头带 `Idempotency-Key` / `If-Match`，body 带 baseVersion 与 opId；拐点只接 add / remove / end，start / move 的中间态一条都不发；拖动结束读整份 path 覆盖。
+					{{ backendModeHint }}。请求头带 `Idempotency-Key` / `If-Match`，body 带 baseVersion 与 opId；拐点只接 add / remove / end，start / move 的中间态一条都不发；拖动结束读整份 path 与 waypointOffsets 覆盖。
 					通道里的拐点走 `PATCH /gis/channels/{id}/groups/waypoints`，独立线路走 `PATCH /gis/lines/{id}/path`；
 					分组变化走 `PATCH /gis/channels/{id}/groups`，body 是整份 groups 声明，不按 delta 猜被挪空的组。
 					成功响应统一为 `{ code, message, requestId, traceId, data: { operation, version, idempotent, transactionId, result } }`，
@@ -901,12 +1295,14 @@ onBeforeUnmount(() => {
 				<h3>导出 / 回灌</h3>
 				<div class="dv-row">
 					<button type="button" class="dv-button" @click="exportData">导出（exportData）</button>
+					<button type="button" class="dv-button" data-demo="channel-export-dto" @click="exportBackendDto">后端 DTO（自定义格式）</button>
 					<button type="button" class="dv-button dv-button--primary" @click="rebuildFromExport">按导出重建</button>
 				</div>
-				<p class="dv-readout">{{ exportText || '还没导出：点一下看导出的份量' }}</p>
+				<p class="dv-readout" data-demo="channel-export-readout">{{ exportText || '还没导出：点一下看导出的份量' }}</p>
 				<p class="dv-hint">
 					回灌用的是 input 口径（与 createGisView 入参同构）；view 口径是给后端 / 别的系统的业务记录
-					（station_data / line_data / parallel_groups 那套列名），不拿来回灌。
+					（station_data / line_data / parallel_groups 那套列名），不拿来回灌。后端 DTO 口径由
+					`defineExportFormat` 注册，卸载时只清掉自己这一个适配器；演示把标准文档映射成项目自己的表。
 				</p>
 			</div>
 
@@ -1056,6 +1452,217 @@ onBeforeUnmount(() => {
 	line-height: 1.6;
 }
 
+.dv-channel-menu__open-dialog {
+	width: 100%;
+	margin-top: 6px;
+}
+
+/* 线路分组弹框：草稿式整组编辑，底部确定才调用一次 splitChannelGroups */
+.dv-group-dialog {
+	position: absolute;
+	z-index: 12;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 20px;
+	background: rgba(18, 34, 56, 0.28);
+}
+
+.dv-group-dialog__panel {
+	display: flex;
+	flex-direction: column;
+	width: min(760px, 100%);
+	max-height: 100%;
+	overflow: hidden;
+	border: 1px solid #dce5f0;
+	border-radius: 14px;
+	background: #fff;
+	box-shadow: 0 24px 64px rgba(16, 39, 70, 0.28);
+	color: #314964;
+	font-size: 12px;
+}
+
+.dv-group-dialog__head {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 12px;
+	padding: 17px 20px 13px;
+	border-bottom: 1px solid #edf1f6;
+}
+
+.dv-group-dialog__head h3 {
+	margin: 0;
+	color: #17233d;
+	font-size: 17px;
+	font-weight: 650;
+}
+
+.dv-group-dialog__head p {
+	margin: 5px 0 0;
+	color: #7f8fa5;
+	font-size: 11px;
+	word-break: break-all;
+}
+
+.dv-group-dialog__head > button {
+	padding: 0 4px;
+	border: 0;
+	background: transparent;
+	color: #7d8ca1;
+	font-size: 22px;
+	line-height: 1;
+	cursor: pointer;
+}
+
+.dv-group-dialog__body {
+	display: flex;
+	flex-direction: column;
+	gap: 11px;
+	padding: 15px 20px;
+	overflow: auto;
+}
+
+.dv-group-dialog__card {
+	overflow: hidden;
+	border: 1px solid #e3e9f1;
+	border-radius: 9px;
+	background: #f7f9fc;
+}
+
+.dv-group-dialog__card > header {
+	display: flex;
+	align-items: baseline;
+	gap: 8px;
+	padding: 10px 14px;
+	border-bottom: 1px solid #e9eef5;
+}
+
+.dv-group-dialog__card > header strong {
+	color: #253c58;
+	font-size: 13px;
+}
+
+.dv-group-dialog__card > header span {
+	color: #8a99ad;
+	font-size: 11px;
+}
+
+.dv-group-dialog__card > header code {
+	margin-left: auto;
+	color: #9aa8b9;
+	font-size: 10px;
+}
+
+.dv-group-dialog__card ul {
+	margin: 0;
+	padding: 2px 12px 4px;
+	list-style: none;
+}
+
+.dv-group-dialog__line {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 9px 2px;
+	border-bottom: 1px solid #ebeff5;
+}
+
+.dv-group-dialog__line:last-child {
+	border-bottom: 0;
+}
+
+.dv-group-dialog__line-text {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	min-width: 0;
+	gap: 2px;
+}
+
+.dv-group-dialog__line-text strong {
+	overflow: hidden;
+	color: #314964;
+	font-size: 12px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.dv-group-dialog__line-text span {
+	overflow: hidden;
+	color: #93a0b2;
+	font-size: 10px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.dv-group-dialog select {
+	min-width: 138px;
+	padding: 5px 7px;
+	border: 1px solid #d6e0ec;
+	border-radius: 6px;
+	background: #fff;
+	color: #3c5878;
+	font-size: 11px;
+}
+
+.dv-group-dialog button {
+	padding: 5px 10px;
+	border: 1px solid #d1deed;
+	border-radius: 6px;
+	background: #f7faff;
+	color: #2f5e94;
+	font-size: 11px;
+	cursor: pointer;
+}
+
+.dv-group-dialog button:disabled {
+	opacity: 0.45;
+	cursor: not-allowed;
+}
+
+.dv-group-dialog__line button {
+	white-space: nowrap;
+}
+
+.dv-group-dialog__footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 14px;
+	padding: 13px 20px 15px;
+	border-top: 1px solid #edf1f6;
+}
+
+.dv-group-dialog__footer p {
+	flex: 1;
+	margin: 0;
+	color: #7f8fa5;
+	font-size: 11px;
+	line-height: 1.55;
+}
+
+.dv-group-dialog__footer > div {
+	display: flex;
+	gap: 8px;
+}
+
+.dv-group-dialog__footer button {
+	padding: 7px 15px;
+	font-size: 12px;
+}
+
+.dv-group-dialog__footer .dv-button--primary {
+	border-color: #2f78d0;
+	background: #347fd8;
+	color: #fff;
+}
+
+.dv-group-dialog__footer .dv-button--primary:disabled {
+	background: #a8c4e6;
+}
+
 /* 删除确认框：组件只把载荷交出来（要删什么 / 连带什么 / 能按哪些范围删），框是这一页自己按载荷画的 */
 .dv-remove-box {
 	position: absolute;