gis-view-webgl2 0.1.7 → 0.1.9

package/docs/demos/BasicDemo.vue

@@ -1,14 +1,15 @@
 <script setup>
 /**
- * 基础视图：一份数据 + 最少的配置，重点看相机与拾取这两组读数怎么拿。
- *
- * 面板上就四个开关（数据量 / 网格 / 节点标签 / 通道），读数栏把
- * onCameraChange / onClick / onSelect / onStats 的值直接摊开 ——
- * 事件载荷长什么样、什么时候发，一眼能对上。
- */
+ * 基础视图：一份数据 + 最少的配置，重点看相机、比例、空闲与拾取读数怎么拿。
+ *
+ * 首屏用顶层 center / scale 落位；面板能读写比例、观察 idleTimeout 的回调与事件，
+ * 数据区四个开关（数据量 / 网格 / 节点标签 / 通道）仍只改最小配置。读数栏把
+ * onCameraChange / onClick / onSelect / onStats / onIdle 的值直接摊开 ——
+ * 事件载荷长什么样、什么时候发，一眼能对上。
+ */
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import { createGisView } from '../../src/index.js'
-import { buildDemoData } from './shared/demoData.js'
+import { buildDemoData, DEMO_CENTER } from './shared/demoData.js'
 import './shared/demoStyle.css'
 
 const emit = defineEmits(['notice'])
@@ -16,7 +17,15 @@ const container = ref(null)
 const pointCount = ref(28)
 const gridOn = ref(true)
 const labelOn = ref(true)
-const channelOn = ref(true)
+const channelOn = ref(true)
+const scaleDraft = ref('72')
+const currentScale = ref(72)
+const idleElapsedMs = ref(0)
+const idleCallbackCount = ref(0)
+const idleEventCount = ref(0)
+const idleEnabled = ref(true)
+const IDLE_TIMEOUT_MS = 1200
+let idleTicker = null
 const readouts = ref({ camera: '—', pick: '未选中', stats: '—', event: '—' })
 let dataset = buildDemoData({ count: 28 })
 let view = null
@@ -25,14 +34,14 @@ let statsDrawnAt = Number.NEGATIVE_INFINITY
 
 /**
  * 事件载荷压成一行：`action.target` 说清点到了哪一类（point / line / channel / empty），
- * `action.data` 或 `item` 给出那一条数据本身 —— 指针事件的载荷结构见 docs/数据格式.md。
+ * 命中的数据在载荷顶层（点 / 线读 item，通道读 channel，标签读 label）—— 指针事件的载荷结构见 docs/数据格式.md。
  */
 const describeTarget = (payload) => {
 	if (!payload) {
 		return '空白（清除选中）'
 	}
 	const target = payload.action?.target ?? payload.kind ?? payload.type ?? '—'
-	const data = payload.action?.data ?? payload.item ?? null
+	const data = payload.item ?? payload.channel ?? payload.label ?? payload.line ?? null
 	const id = Array.isArray(data)
 		? `${data.length} 项`
 		: data?.id ?? data?.name ?? payload.id ?? payload.index ?? '—'
@@ -66,9 +75,21 @@ const buildOptions = () => ({
 	showGrid: gridOn.value,
 	gridColor: 'rgba(126, 168, 214, 0.22)',
 	fitPadding: 40,
+	// 首屏相机用顶层简写：等价于 initialView: { center, scale }；显式 initialView 整份优先。
+	center: [...DEMO_CENTER],
+	scale: 72,
 	// 功能开关缺省全关：这一页要能平移缩放、能悬停选中，显式打开查看类（见 docs/GisView.md 的「功能开关」）
 	features: 'view',
 	label: labelOptions(),
+	// 停手 1.2 秒触发一次 onIdle / idle；每个空闲段只触发一次。
+	idleTimeout: IDLE_TIMEOUT_MS,
+	onIdle: ({ idleTime, timeout }) => {
+		idleCallbackCount.value += 1
+		readouts.value = {
+			...readouts.value,
+			event: `onIdle：停手 ${Math.round(idleTime)} ms（阈值 ${timeout} ms）`
+		}
+	},
 	onReady: () => {
 		emit('notice', `已加载 ${dataset.points.length} 个节点 / ${dataset.lines.length} 条线路`)
 		readouts.value = { ...readouts.value, event: 'ready：WebGL2 上下文就绪' }
@@ -113,9 +134,10 @@ const applyData = () => {
 	}
 	dataset = buildDemoData({ count: pointCount.value })
 	view.updateData(dataset.points, channelOn.value ? dataset.lines : dataset.linesWithoutChannel)
-	view.updateOptions({ channels: channelOn.value ? dataset.channels : [] })
-	view.fitView(40)
-	emit('notice', `已换成 ${dataset.points.length} 个节点 / ${dataset.lines.length} 条线路`)
+	view.updateOptions({ channels: channelOn.value ? dataset.channels : [] })
+	view.fitView(40)
+	syncScaleFromView()
+	emit('notice', `已换成 ${dataset.points.length} 个节点 / ${dataset.lines.length} 条线路`)
 }
 
 /**
@@ -134,16 +156,70 @@ const applyChannel = () => {
 	})
 }
 
-const resetCamera = () => {
-	view?.fitView(40)
-}
-
-const zoomBy = (factor) => {
-	view?.zoomBy(factor)
-}
+const resetCamera = () => {
+	view?.fitView(40)
+	syncScaleFromView()
+}
+
+const zoomBy = (factor) => {
+	view?.zoomBy(factor)
+	syncScaleFromView()
+}
+
+const syncScaleFromView = () => {
+	if (!view) {
+		return
+	}
+	const scale = view.getScale()
+	currentScale.value = scale
+	scaleDraft.value = Number(scale.toFixed(2)).toString()
+}
+
+const readScale = () => {
+	if (!view) {
+		return
+	}
+	const scale = view.getScale()
+	currentScale.value = scale
+	scaleDraft.value = Number(scale.toFixed(2)).toString()
+	readouts.value = { ...readouts.value, event: `getScale() → ${scale.toFixed(3)} px/单位` }
+}
+
+const applyScale = () => {
+	if (!view) {
+		return
+	}
+	const scale = Number(scaleDraft.value)
+	if (!Number.isFinite(scale) || scale <= 0) {
+		readouts.value = { ...readouts.value, event: 'setScale() 只接受正数' }
+		return
+	}
+	view.setScale(scale)
+	const applied = view.getScale()
+	currentScale.value = applied
+	scaleDraft.value = Number(applied.toFixed(2)).toString()
+	readouts.value = { ...readouts.value, event: `setScale(${scale}) → ${applied.toFixed(3)} px/单位` }
+}
+
+const toggleIdle = () => {
+	view?.updateOptions({ idleTimeout: idleEnabled.value ? IDLE_TIMEOUT_MS : 0 })
+	idleElapsedMs.value = view?.getIdleTime() ?? 0
+	readouts.value = {
+		...readouts.value,
+		event: idleEnabled.value ? `idleTimeout 已开启（${IDLE_TIMEOUT_MS} ms）` : 'idleTimeout 已关闭（0）'
+	}
+}
 
 onMounted(() => {
 	view = createGisView(container.value, buildOptions())
+	syncScaleFromView()
+	view.on('idle', (payload) => {
+		idleEventCount.value += 1
+		readouts.value = {
+			...readouts.value,
+			event: `idle 事件：停手 ${Math.round(payload.idleTime)} ms（阈值 ${payload.timeout} ms）`
+		}
+	})
 	// 标签拖动：面板上给一行「偏移记在状态里」的读数，松手后偏移一直留在 getLabelStates() 里
 	view.on('labelDrag', (payload) => {
 		if (payload.phase === 'move') {
@@ -151,10 +227,17 @@ onMounted(() => {
 		}
 		readouts.value = { ...readouts.value, event: `labelDrag：${payload.phase} · ${payload.id ?? payload.index} 偏移 [${payload.offset.map(value => Math.round(value)).join(', ')}]` }
 	})
+	idleTicker = window.setInterval(() => {
+		if (view) {
+			idleElapsedMs.value = view.getIdleTime()
+		}
+	}, 200)
 })
-
-onBeforeUnmount(() => {
-	view?.destroy()
+
+onBeforeUnmount(() => {
+	window.clearInterval(idleTicker)
+	idleTicker = null
+	view?.destroy()
 	view = null
 })
 </script><template>
@@ -167,9 +250,31 @@ onBeforeUnmount(() => {
 				<button type="button" @click="zoomBy(1 / 1.4)">缩小</button>
 			</div>
 		</div>
-		<aside class="dv-panel">
-			<div class="dv-group">
-				<h3>数据</h3>
+		<aside class="dv-panel">
+			<div class="dv-group">
+				<h3>比例读写<span class="dv-chip">center / scale 首屏</span></h3>
+				<div class="dv-row">
+					<label>目标比例
+						<input v-model="scaleDraft" class="dv-number" data-demo="basic-scale-input" type="number" min="0.01" step="1" />
+					</label>
+					<button type="button" class="dv-button dv-button--primary" data-demo="basic-scale-set" @click="applyScale">setScale()</button>
+					<button type="button" class="dv-button" data-demo="basic-scale-get" @click="readScale">getScale()</button>
+				</div>
+				<p class="dv-readout" data-demo="basic-scale-read">当前比例：{{ currentScale.toFixed(2) }} px/单位</p>
+				<p class="dv-hint">滚轮、拖动或按钮改完相机后，onCameraChange 会把新比例与中心写回下面「读数」；setScale() 省略锚点时以视口中心缩放。</p>
+			</div>
+			<div class="dv-group">
+				<h3>空闲检测<span class="dv-chip">{{ idleEnabled ? `${IDLE_TIMEOUT_MS} ms` : '已关闭' }}</span></h3>
+				<div class="dv-row">
+					<label><input v-model="idleEnabled" data-demo="basic-idle-toggle" type="checkbox" @change="toggleIdle" /> 开启 idleTimeout</label>
+				</div>
+				<p class="dv-readout" data-demo="basic-idle-read">
+					getIdleTime()：{{ idleElapsedMs.toFixed(0) }} ms · onIdle：{{ idleCallbackCount }} 次 · idle 事件：{{ idleEventCount }} 次
+				</p>
+				<p class="dv-hint">在画布上移动、滚轮或按键会把计时清零；程序化调用（例如上面的 setScale）不会。停手到阈值后每条空闲段只触发一次。</p>
+			</div>
+			<div class="dv-group">
+				<h3>数据</h3>
 				<div class="dv-row">
 					<label>节点数
 						<select v-model.number="pointCount" @change="applyData">
@@ -200,4 +305,16 @@ onBeforeUnmount(() => {
 			</div>
 		</aside>
 	</section>
-</template>
+</template>
+
+<style scoped>
+.dv-number {
+	width: 82px;
+	padding: 4px 6px;
+	border: 1px solid #d6e0ec;
+	border-radius: 6px;
+	background: #fff;
+	color: #1f2a44;
+	font-size: 12px;
+}
+</style>

package/docs/demos/BatchAddDemo.vue

@@ -1,9 +1,11 @@
 <script setup>
 /**
- * 批量新增：把「一次调用加多条」的五个入口摆在一起。
+ * 批量增删改：把「一次调用处理多条」的入口摆在一起。
  *
  * addPoints / addLines / addChannels 走现成数据或通道声明批量追加；addWaypoints 一次给
  * 同一条线路插多个拐点；addChannelGroups 在一条既有通道里一次加多组回线。
+ * patchPoints / patchLines 是批量修改；removePoints / removeLines 与 batch 里的 removeChannel
+ * 是批量删除；splitChannelGroups / removeChannelGroup 在一条通道上整份重排分组。
  * 每次操作只记一步历史、只发一条数据变更，读数里同时给出方法返回与当前总数。
  */
 import { onBeforeUnmount, onMounted, ref } from 'vue'
@@ -119,21 +121,21 @@ const addChannelBatch = () => runAction('addChannels', () => {
 			name: `批量通道 ${currentRound}-A`,
 			from: picked[0].id,
 			to: picked[2].id,
-			circuits: 2,
 			path: [[Number((middle[0] + normal[0]).toFixed(5)), Number((middle[1] + normal[1]).toFixed(5))]],
-			lineProps: { vn_kv: 525, max_loading_rate: 0.82 }
+			lineData: [
+				{ vn_kv: 525, max_loading_rate: 0.82 },
+				{ vn_kv: 525, max_loading_rate: 0.82 }
+			]
 		},
 		{
 			id: `batch-channel-${currentRound}-b`,
 			name: `批量通道 ${currentRound}-B`,
 			from: picked[1].id,
 			to: picked[3].id,
-			circuits: 1,
 			path: [[Number((middle[0] - normal[0]).toFixed(5)), Number((middle[1] - normal[1]).toFixed(5))]],
-			lineProps: { vn_kv: 230, max_loading_rate: 0.61 }
+			lineData: [{ vn_kv: 230, max_loading_rate: 0.61 }]
 		}
-	])
-	view.selectFeatures(result.lineIds)
+	], { select: true })
 	return `addChannels → ${result.count} 条通道 · ${result.channelIds.join(' / ')} · ${result.lineIds.length} 条回线`
 })
 
@@ -211,6 +213,118 @@ const addChannelGroupBatch = () => runAction('addChannelGroups', () => {
 		: `addChannelGroups 没有落地：${result.reason}`
 })
 
+/** 一次改场站、线路、通道：三种 patch 包在同一个 batch 里，只记一步历史 */
+const batchUpdateDemo = () => runAction('batch', () => {
+	const currentRound = nextRound()
+	const data = view.getData()
+	const points = data.points.slice(-4)
+	const batchLines = data.lines.filter(item => String(item.id).startsWith('batch-line-'))
+	const lines = (batchLines.length ? batchLines : data.lines).slice(-4)
+	const channels = view.getOptions().channels ?? []
+	let pointResult = null
+	let lineResult = null
+	view.batch(() => {
+		if (points.length) {
+			pointResult = view.patchPoints(points.map((item, index) => ({
+				id: item.id,
+				name: `${item.name ?? item.id} · 批量修改 ${currentRound}`,
+				zone_name: `批量修改 #${currentRound}`,
+				batch_updated: currentRound,
+				...(index === 0 ? { vn_kv: 1050 } : {})
+			})))
+		}
+		if (lines.length) {
+			lineResult = view.patchLines(lines.map(item => ({ id: item.id })), {
+				color: '#2f6fd0',
+				width: 2.2,
+				batch_updated: currentRound
+			})
+		}
+		for (const channel of channels) {
+			view.updateChannel(channel.id, {
+				name: `${channel.name ?? channel.id} · 批量修改 ${currentRound}`,
+				width: Math.max(Number(channel.width) || 2.2, 2.4),
+				batch_updated: currentRound
+			})
+		}
+	}, { label: '批量修改场站 / 线路 / 通道' })
+	return `batch(update) → 节点 ${pointResult?.count ?? 0} / 线路 ${lineResult?.count ?? 0} / 通道 ${channels.length} · 三种 patch 合并为一步历史`
+})
+
+/** 一次删场站、线路、通道：逐条接口放进 batch，只发一条数据变更 */
+const batchDeleteDemo = () => runAction('batch', () => {
+	const data = view.getData()
+	const pointRefs = data.points.filter(item => String(item.id).startsWith('batch-point-')).slice(-2).map(item => item.id)
+	const lineRefs = data.lines.filter(item => String(item.id).startsWith('batch-line-')).slice(-2).map(item => item.id)
+	const channelIds = (view.getOptions().channels ?? []).filter(item => String(item.id).startsWith('batch-channel-')).slice(-1).map(item => item.id)
+	if (!pointRefs.length && !lineRefs.length && !channelIds.length) {
+		return 'batch(delete)：当前没有本页批量新增的数据；先点上面的 addPoints / addLines / addChannels'
+	}
+	const before = { points: data.points.length, lines: data.lines.length, channels: view.getOptions().channels?.length ?? 0 }
+	view.batch(() => {
+		for (const id of channelIds) {
+			view.removeChannel(id)
+		}
+		if (pointRefs.length) {
+			view.removePoints(pointRefs)
+		}
+		const alive = new Set(view.getData().lines.map(item => String(item.id)))
+		const remainingLines = lineRefs.filter(id => alive.has(String(id)))
+		if (remainingLines.length) {
+			view.removeLines(remainingLines)
+		}
+	}, { label: '批量删除场站 / 线路 / 通道' })
+	const after = view.getData()
+	return `batch(delete) → 节点 ${before.points}→${after.points.length} / 线路 ${before.lines}→${after.lines.length} / 通道 ${before.channels}→${view.getOptions().channels?.length ?? 0} · 整批只记一步`
+})
+
+/** 多条通道一次重排分组：每条通道都只调用一次 splitChannelGroups */
+const batchGroupSplitDemo = () => runAction('batch', () => {
+	const channels = view.getOptions().channels ?? []
+	const before = view.getChannels().length
+	let changed = 0
+	view.batch(() => {
+		for (const channel of channels) {
+			const groups = view.getChannelGroups(channel.id)
+			if (groups.length !== 1) {
+				continue
+			}
+			const lineIds = [...new Set(groups[0]?.lineIds ?? [])]
+			if (lineIds.length < 2) {
+				continue
+			}
+			const cut = Math.max(1, Math.floor(lineIds.length / 2))
+			view.splitChannelGroups(channel.id, [lineIds.slice(0, cut), lineIds.slice(cut)])
+			changed += 1
+		}
+	}, { label: '批量重排通道分组' })
+	return changed
+		? `batch(splitChannelGroups) → ${changed} 条通道一次拆成两组 · 分组 ${before}→${view.getChannels().length} · 整批一步历史`
+		: 'batch(splitChannelGroups)：没有可拆的单组通道（每条至少两条回线）'
+})
+
+/** 多条通道一次删掉最后一组：removeChannelGroup 会并回相邻组，回线本身不丢 */
+const batchGroupRemoveDemo = () => runAction('batch', () => {
+	const channels = view.getOptions().channels ?? []
+	const before = view.getChannels().length
+	let changed = 0
+	view.batch(() => {
+		for (const channel of channels) {
+			const groups = view.getChannelGroups(channel.id)
+			if (groups.length < 2) {
+				continue
+			}
+			const result = view.removeChannelGroup(channel.id, groups[groups.length - 1].id)
+			if (result.ok) {
+				changed += 1
+			}
+		}
+	}, { label: '批量删除通道分组' })
+	return changed
+		? `batch(removeChannelGroup) → ${changed} 条通道各删一组并回相邻组 · 分组 ${before}→${view.getChannels().length} · 回线数据未丢`
+		: 'batch(removeChannelGroup)：当前没有多组通道'
+})
+
 const undoLast = () => runAction('undo', () => {
 	const entry = view.undo()
 	return entry ? `undo → ${entry.label ?? '已撤销一步'}` : 'undo → 没有可撤销的步骤'
@@ -289,6 +403,18 @@ onBeforeUnmount(() => {
 				<p class="dv-readout" data-demo="batch-add-history">{{ historyText }}</p>
 				<p class="dv-hint">每个按钮只调一个批量方法；一次调用里的多条数据只记一步历史、只发一条 dataChange。addWaypoints 返回的是真正插入成功的坐标，addChannelGroups 返回逐组结果。</p>
 			</div>
+			<div class="dv-group">
+				<h3>批量修改 / 删除 / 分组</h3>
+				<div class="dv-row">
+					<button type="button" class="dv-button dv-button--primary" data-demo="batch-update-all" @click="batchUpdateDemo">patchPoints + patchLines + updateChannel</button>
+					<button type="button" class="dv-button dv-button--danger" data-demo="batch-delete-all" @click="batchDeleteDemo">batch(removePoints / removeLines / removeChannel)</button>
+				</div>
+				<div class="dv-row">
+					<button type="button" class="dv-button" data-demo="batch-group-split" @click="batchGroupSplitDemo">batch(splitChannelGroups ×N)</button>
+					<button type="button" class="dv-button" data-demo="batch-group-remove" @click="batchGroupRemoveDemo">batch(removeChannelGroup ×N)</button>
+				</div>
+				<p class="dv-hint">节点 / 线路本身支持一次传多条：<code>patchPoints([{ id, name }, …])</code>、<code>patchLines(ids, patch)</code>、<code>removePoints(refs)</code>、<code>removeLines(ids)</code>。通道只有单条 <code>updateChannel</code> / <code>removeChannel</code>，用 <code>view.batch(() => ids.forEach(id =&gt; view.removeChannel(id)), { label })</code> 包起来仍是一步历史、一条 <code>batch</code> 数据变更。分组侧 <code>splitChannelGroups</code> 一次换整份 groups，<code>addChannelGroups</code> 一次加多组，删组走 <code>removeChannelGroup</code>，摘回线走 <code>removeChannelLines</code>。</p>
+			</div>
 			<div class="dv-group">
 				<h3>历史</h3>
 				<div class="dv-row">

package/docs/demos/ChannelDemo.vue

@@ -36,6 +36,13 @@ const channelSelectMode = ref('line')
 /** 分组拐点拖动模式：'parallel' 共用骨架 / 'vertex' 只移同组同序号拐点 */
 const channelWaypointDragMode = ref('parallel')
 const waypointDragText = ref('分组拐点拖动：先点「准备两分组拐点」，再拖中间拐点比较两种模式')
+/** 通道简略：开启后分组回线数超过 threshold 只画一条代表线 */
+const channelSimplify = ref(false)
+const simplifyThreshold = ref(2)
+const simplifyColor = ref('#ff6b35')
+const simplifyWidth = ref(4)
+const simplifyDash = ref('dashed')
+const simplifyText = ref('通道简略：关（reopen 后甲 / 丙通道会各折叠成一条代表线）')
 /** 待确认的删除请求（'remove' 事件的 pending 载荷）：确认框照着它渲染 */
 const removeRequest = ref(null)
 const removeText = ref('删除：按 Delete 或点上面的按钮，先出载荷、确认之后才动数据')
@@ -309,6 +316,7 @@ const buildOptions = () => ({
 	channelSelectMode: channelSelectMode.value,
 	// 分组拐点拖动：共用骨架 / 只移同组同序号拐点
 	channelWaypointDragMode: channelWaypointDragMode.value,
+	channelSimplify: simplifyOption(),
 	// 删除配置：confirm 缺省（null）表示组件不弹界面、停在待确认 —— 这一页订阅 'remove' 事件自己画确认框
 	remove: { scope: 'lines' },
 	// 交互框里的「加拐点 / 删拐点」动的是分组骨架，要有这一项才不是灰的（Ctrl + 点击加点、双击删点也一起开了）
@@ -337,6 +345,37 @@ const buildOptions = () => ({
 	}
 })
 
+const simplifyOption = () => channelSimplify.value
+	? {
+		enabled: true,
+		threshold: Math.max(1, Math.floor(Number(simplifyThreshold.value) || 1)),
+		style: {
+			color: simplifyColor.value,
+			width: Math.max(0.5, Number(simplifyWidth.value) || 0.5),
+			dash: simplifyDash.value,
+			lineType: simplifyDash.value
+		}
+	}
+	: false
+
+/** 重读简略读数：分组仍按原始成员计数，只有画布上的可见回线会折叠 */
+const syncSimplifyReadout = () => {
+	const groups = view?.getChannelGroups() ?? []
+	const enabled = view?.getOptions().channelSimplify?.enabled === true
+	const threshold = Math.max(1, Math.floor(Number(view?.getOptions().channelSimplify?.threshold) || 1))
+	const lineCount = group => group.lineIds?.length ?? group.lineIndexes?.length ?? 0
+	const folded = enabled ? groups.filter(group => lineCount(group) > threshold) : []
+	const total = groups.reduce((sum, group) => sum + lineCount(group), 0)
+	const visible = groups.reduce((sum, group) => sum + (lineCount(group) > threshold && enabled ? 1 : lineCount(group)), 0)
+	simplifyText.value = `通道简略：${enabled ? '开' : '关'} · threshold=${threshold} · ${groups.length} 组 / ${total} 回线 → 画布 ${visible} 条${folded.length ? `（折叠 ${folded.map(group => group.id).join('、')}）` : ''} · 数据与分组读数仍为原始 ${total} 条`
+}
+
+const applyChannelSimplify = () => {
+	view?.updateOptions({ channelSimplify: simplifyOption() })
+	syncSimplifyReadout()
+	pushLog(simplifyText.value)
+}
+
 /**
  * 通道读数：几条通道、各自几回线、每组分了几组。
  * getChannels() 给的是**分组**那一档（一条通道拆成几组就返回几条，按 channelId 归并）；
@@ -361,6 +400,7 @@ const syncReadouts = () => {
 	// 面板上改过分组之后，开着的右键框也要跟着对上（对不上就收掉）
 	syncMenu()
 	syncChangedChannels()
+	syncSimplifyReadout()
 }
 
 /** 最近变化通道：分组 / 成员 / 拐点 / 端点 / 可见性 / 其余声明字段 */
@@ -1151,6 +1191,27 @@ onBeforeUnmount(() => {
 				<p class="dv-hint">内收比例只在 inset 模式下生效；切到 tangent 时通道按切线方向整体让开。</p>
 			</div>
 
+			<div class="dv-group">
+				<h3>通道简略<span class="dv-chip">{{ channelSimplify ? 'on' : 'off' }}</span></h3>
+				<div class="dv-row">
+					<label><input v-model="channelSimplify" data-demo="channel-simplify-enabled" type="checkbox" @change="applyChannelSimplify" /> 开启简略</label>
+					<label>阈值 <input v-model.number="simplifyThreshold" data-demo="channel-simplify-threshold" type="number" min="1" step="1" @change="applyChannelSimplify" /></label>
+				</div>
+				<div class="dv-row">
+					<label>代表线颜色 <input v-model="simplifyColor" data-demo="channel-simplify-color" type="color" @change="applyChannelSimplify" /></label>
+					<label>线宽 <input v-model.number="simplifyWidth" data-demo="channel-simplify-width" type="number" min="0.5" max="12" step="0.5" @change="applyChannelSimplify" /></label>
+					<label>线型
+						<select v-model="simplifyDash" data-demo="channel-simplify-dash" @change="applyChannelSimplify">
+							<option value="solid">实线</option>
+							<option value="dashed">虚线</option>
+							<option value="dotted">点线</option>
+						</select>
+					</label>
+				</div>
+				<p class="dv-readout" data-demo="channel-simplify-readout">{{ simplifyText }}</p>
+				<p class="dv-hint">分组回线数大于阈值时只画第一条可见回线，并套用这里的颜色 / 线宽 / 线型；没有 groups 的通道按一整组处理。关闭后全部恢复，getData() / 分组成员 / 导出始终是原始数据。</p>
+			</div>
+
 			<div class="dv-group">
 				<h3>分组</h3>
 				<div class="dv-row">