gis-view-webgl2 0.1.2 → 0.1.4

package/docs/demos/gis-view-demo/demo.css

@@ -0,0 +1,1230 @@
+/* GisViewDemo 全部样式：统一挂在 .gis-view-demo 下，避免影响其他演示。 */
+.gis-view-demo .demo-stage {
+	grid-column: 1;
+	grid-row: 2;
+	position: relative;
+	/*
+	 * 宿主缩放：CSS zoom 加在这一层上 —— 宽度是百分比、浏览器会按缩放补偿，视觉尺寸不变；
+	 * 高度是绝对长度，除回去让这一层在父级布局里仍占原来那么多。组件量到的 displayScale 就是它。
+	 */
+	zoom: var(--demo-host-zoom, 1);
+	height: calc(var(--demo-stage-height) / var(--demo-host-zoom, 1));
+}
+
+.gis-view-demo .demo-canvas {
+	height: 100%;
+	border: 1px solid #e2e9f2;
+	border-radius: 10px;
+	background: #f7fafd;
+	overflow: hidden;
+}
+
+/* 布局：左边画布、右边一组可折叠的配置；窄屏在文件末尾的媒体查询里退回单列 */
+.gis-view-demo .demo-card {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) clamp(360px, 22vw, 520px);
+	gap: 0 16px;
+	align-items: start;
+	/*
+	 * 画布高度跟着窗口走：小窗保底 440px、大屏一路长到 1400px（再高也没意义）。
+	 * 460px 是画布之外那一叠固定高度：页头 + 卡片说明 + 画布下面的两行事件读数 + 页面留白。
+	 * 面板列用同一份高度，两边的滚动条因此对得上，页面本身只在内容真的放不下时才滚。
+	 */
+	--demo-stage-height: clamp(440px, calc(100vh - 460px), 1400px);
+}
+
+.gis-view-demo .demo-card-header {
+	grid-column: 1 / -1;
+}
+
+.gis-view-demo .gis-demo-event {
+	grid-column: 1;
+	grid-row: 3;
+}
+
+/* 全屏：舞台铺满屏幕，画布用浏览器给的尺寸（退出后再 resize() 同步一次） */
+.gis-view-demo .demo-stage:fullscreen {
+	position: fixed;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	border-radius: 0;
+	background: #eef3fa;
+}
+
+.gis-view-demo .demo-stage:fullscreen .demo-canvas {
+	height: 100%;
+	border: none;
+	border-radius: 0;
+}
+
+.gis-view-demo .demo-stage-toolbar {
+	position: absolute;
+	top: 12px;
+	right: 12px;
+	z-index: 5;
+	display: flex;
+	gap: 6px;
+	padding: 4px;
+	border: 1px solid rgba(214, 226, 240, 0.9);
+	border-radius: 8px;
+	background: rgba(255, 255, 255, 0.9);
+	box-shadow: 0 10px 26px rgba(31, 62, 105, 0.14);
+	backdrop-filter: blur(6px);
+}
+
+.gis-view-demo .demo-stage-toolbar button {
+	padding: 4px 10px;
+	font-size: 11px;
+}
+
+/*
+ * 面板分页：控件按主题分成三页，一页只显示当前这一组；
+ * 面板列自己在画布右侧滚动，画布高度不被长列表推走。
+ */
+.gis-view-demo .demo-panel-stack {
+	grid-column: 2;
+	grid-row: 2;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	max-height: var(--demo-stage-height);
+	overflow: auto;
+	padding-right: 2px;
+}
+
+.gis-view-demo .demo-tabs {
+	position: sticky;
+	top: 0;
+	z-index: 2;
+	display: flex;
+	gap: 4px;
+	padding: 4px;
+	border: 1px solid #e5ecf5;
+	border-radius: 8px;
+	background: #fff;
+}
+
+.gis-view-demo .demo-tabs button {
+	flex: 1;
+	padding: 6px 4px;
+	border: none;
+	border-radius: 6px;
+	background: transparent;
+	color: #55708f;
+	font-size: 11px;
+	font-weight: 700;
+	cursor: pointer;
+}
+
+.gis-view-demo .demo-tabs button:hover {
+	background: #f2f7ff;
+}
+
+.gis-view-demo .demo-tabs button.is-active {
+	background: #e8f1ff;
+	color: #1d5fb0;
+}
+/* 面板按钮：两列网格，每一格占满宽度；左边是主题名，右边明确标出展开 / 收起 */
+.gis-view-demo .demo-panel-buttons {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 6px;
+}
+
+.gis-view-demo .demo-panel-buttons button {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	width: 100%;
+	min-height: 32px;
+	padding: 7px 10px;
+	border: 1px solid rgba(190, 208, 230, 0.95);
+	border-radius: 8px;
+	background: #f7faff;
+	color: #33517b;
+	font-size: 11px;
+	text-align: left;
+	cursor: pointer;
+	transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
+}
+
+.gis-view-demo .demo-panel-buttons button:hover {
+	border-color: #8fb4dd;
+	background: #eef5ff;
+}
+
+.gis-view-demo .demo-panel-buttons button.is-active {
+	border-color: #2f6fd0;
+	background: #2f6fd0;
+	color: #fff;
+	box-shadow: 0 4px 12px rgba(47, 111, 208, 0.2);
+}
+
+.gis-view-demo .demo-panel-button-mark {
+	display: grid;
+	flex: none;
+	place-items: center;
+	width: 18px;
+	height: 18px;
+	border-radius: 50%;
+	background: rgba(47, 111, 208, 0.08);
+	color: #6484ab;
+	font-size: 14px;
+	line-height: 1;
+}
+
+.gis-view-demo .demo-panel-buttons button.is-active .demo-panel-button-mark {
+	background: rgba(255, 255, 255, 0.2);
+	color: #fff;
+}
+
+/* 面板就在按钮下方展开，保持普通文档流；只有面板内容自己滚，画布不会跟着长高 */
+.gis-view-demo .demo-panel-inline {
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	overflow: hidden;
+	border: 1px solid rgba(208, 222, 239, 0.96);
+	border-radius: 10px;
+	background: #fff;
+	box-shadow: 0 8px 22px rgba(35, 70, 116, 0.08);
+	color: #33517b;
+	font-size: 11px;
+}
+
+.gis-view-demo .demo-panel-inline-head {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 10px;
+	padding: 10px 12px;
+	border-bottom: 1px solid rgba(214, 226, 240, 0.9);
+	background: linear-gradient(180deg, #f8fbff 0%, #f3f8ff 100%);
+}
+
+.gis-view-demo .demo-panel-inline-head > div {
+	display: flex;
+	flex-direction: column;
+	gap: 3px;
+	min-width: 0;
+}
+
+.gis-view-demo .demo-panel-inline-head strong {
+	color: #1d5fb0;
+	font-size: 12px;
+}
+
+.gis-view-demo .demo-panel-inline-head span {
+	color: #7386a1;
+	line-height: 1.45;
+}
+
+.gis-view-demo .demo-panel-inline-head button {
+	flex: none;
+	padding: 3px 8px;
+	border: 1px solid rgba(47, 111, 208, 0.28);
+	border-radius: 6px;
+	background: #fff;
+	color: #2f6fd0;
+	font-size: 11px;
+	cursor: pointer;
+}
+
+.gis-view-demo .demo-panel-inline-head button:hover {
+	border-color: #2f6fd0;
+	background: #eaf2ff;
+}
+
+.gis-view-demo .demo-panel-inline-body {
+	min-height: 0;
+	max-height: clamp(200px, calc(var(--demo-stage-height) - 250px), 960px);
+	overflow: auto;
+	overscroll-behavior: contain;
+}
+
+.gis-view-demo .demo-panel-inline .demo-controls {
+	margin: 8px 10px;
+}
+
+.gis-view-demo .demo-panel-inline .demo-controls:last-child {
+	margin-bottom: 10px;
+}
+
+.gis-view-demo .demo-panel-inline .demo-controls--rules,
+.gis-view-demo .demo-panel-inline .demo-controls--shape {
+	display: block;
+}
+
+/* 没展开时给一句轻提示，右栏不至于只剩一排按钮 */
+.gis-view-demo .demo-panel-empty {
+	display: flex;
+	flex-direction: column;
+	gap: 5px;
+	padding: 12px;
+	border: 1px dashed rgba(176, 198, 224, 0.95);
+	border-radius: 10px;
+	background: linear-gradient(180deg, #fbfdff 0%, #f6faff 100%);
+	color: #7386a1;
+	font-size: 11px;
+	line-height: 1.55;
+}
+
+.gis-view-demo .demo-panel-empty strong {
+	color: #3b597e;
+	font-size: 12px;
+}
+
+/* 实例方法速查：一排按钮换行摆，返回值用等宽块显示 */
+.gis-view-demo .demo-api-actions {
+	flex-wrap: wrap;
+	gap: 4px;
+}
+
+/* API 速查：搜索行 + 分组清单 + 逐条详情 + 求值框（清单是 gen-api-index.mjs 生成的） */
+.gis-view-demo .demo-api-search {
+	align-items: center;
+	gap: 6px;
+}
+
+.gis-view-demo .demo-api-search input[type='search'] {
+	flex: 1 1 220px;
+	min-width: 160px;
+	padding: 4px 8px;
+	border: 1px solid #cfd9e8;
+	border-radius: 6px;
+	color: #33517b;
+	font-size: 12px;
+}
+
+.gis-view-demo .demo-api-search select {
+	padding: 4px 6px;
+	border: 1px solid #cfd9e8;
+	border-radius: 6px;
+	color: #33517b;
+	font-size: 12px;
+}
+
+.gis-view-demo .demo-api-list {
+	max-height: 240px;
+	overflow: auto;
+	padding: 6px 8px;
+	border: 1px solid #cfd9e8;
+	border-radius: 6px;
+	background: #fbfdff;
+}
+
+.gis-view-demo .demo-api-list--options {
+	max-height: 180px;
+	margin-top: 6px;
+}
+
+.gis-view-demo .demo-api-group-title {
+	margin: 6px 0 3px;
+	color: #7c8da6;
+	font-size: 11px;
+}
+
+.gis-view-demo .demo-api-group:first-child .demo-api-group-title {
+	margin-top: 0;
+}
+
+.gis-view-demo .demo-api-item {
+	display: flex;
+	justify-content: space-between;
+	gap: 8px;
+	width: 100%;
+	padding: 2px 6px;
+	border: 1px solid transparent;
+	border-radius: 5px;
+	background: none;
+	color: #33517b;
+	font-size: 11px;
+	text-align: left;
+	cursor: pointer;
+}
+
+.gis-view-demo .demo-api-item:hover {
+	background: #eef5ff;
+}
+
+.gis-view-demo .demo-api-item.is-picked {
+	border-color: #2f6fd0;
+	background: #eaf2ff;
+}
+
+.gis-view-demo .demo-api-item b {
+	font-weight: 600;
+}
+
+.gis-view-demo .demo-api-item span {
+	overflow: hidden;
+	color: #8a97a8;
+	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.gis-view-demo .demo-api-detail {
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 2px;
+	padding: 6px 8px;
+	border-radius: 6px;
+	background: #f2f7ff;
+}
+
+.gis-view-demo .demo-api-eval {
+	align-items: center;
+	gap: 6px;
+}
+
+.gis-view-demo .demo-api-eval input[type='text'] {
+	flex: 1 1 auto;
+	width: auto;
+	min-width: 180px;
+	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+}
+
+.gis-view-demo .demo-api-search code,
+.gis-view-demo .demo-api-eval code {
+	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+}
+
+.gis-view-demo .demo-canvas-menu {
+	width: 320px;
+}
+
+
+.gis-view-demo .demo-controls textarea {
+	width: 100%;
+	min-height: 126px;
+	padding: 6px 8px;
+	border: 1px solid #cfd9e8;
+	border-radius: 6px;
+	color: #33517b;
+	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+	font-size: 11px;
+	line-height: 1.5;
+	resize: vertical;
+}
+
+/* 说明段落：默认收起，只留标题旁边这个开关 */
+.gis-view-demo .demo-notes-toggle {
+	margin: 6px 0 0 8px;
+	padding: 3px 9px;
+	border: 1px dashed #cfd9e8;
+	border-radius: 999px;
+	background: #f7faff;
+	color: #4b6b93;
+	font-size: 11px;
+	font-weight: 600;
+	cursor: pointer;
+}
+
+.gis-view-demo .demo-notes--closed p {
+	display: none;
+}
+
+/* 始终露在画布上的鹰眼图说明收成两行，详细信息在文档里 */
+.gis-view-demo .demo-minimap-hint {
+	max-width: 336px;
+	max-height: 30px;
+	line-height: 1.5;
+	overflow: hidden;
+}
+
+/* 小图的工具条按内容收缩，说明文字不再把整块撑到画布中间 */
+.gis-view-demo .demo-minimap {
+	max-width: 352px;
+}
+
+/* 设置默认收起来：画布上只留一个摘要条，需要调的时候再展开 */
+.gis-view-demo .demo-minimap-settings > summary {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	padding: 3px 6px;
+	border-radius: 6px;
+	color: #3c5c85;
+	font-size: 11px;
+	font-weight: 700;
+	list-style: none;
+	cursor: pointer;
+}
+
+.gis-view-demo .demo-minimap-settings > summary::-webkit-details-marker {
+	display: none;
+}
+
+.gis-view-demo .demo-minimap-settings > summary::before {
+	content: '▸';
+	color: #8fb4dd;
+	font-size: 10px;
+}
+
+.gis-view-demo .demo-minimap-settings[open] > summary::before {
+	content: '▾';
+}
+
+.gis-view-demo .demo-minimap-settings > summary em {
+	margin-left: auto;
+	color: #7c93b0;
+	font-size: 10px;
+	font-style: normal;
+	font-weight: 500;
+}
+
+.gis-view-demo .demo-minimap-settings[open] > summary {
+	margin-bottom: 2px;
+}
+
+@media (max-width: 980px) {
+	.gis-view-demo .demo-card {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	.gis-view-demo .demo-card-header,
+	.gis-view-demo .demo-stage,
+	.gis-view-demo .demo-panel-stack,
+	.gis-view-demo .gis-demo-event {
+		grid-column: 1;
+	}
+
+	.gis-view-demo .demo-stage {
+		height: clamp(380px, 68vh, 620px);
+	}
+
+	.gis-view-demo .demo-panel-stack {
+		grid-row: auto;
+		max-height: none;
+		overflow: visible;
+	}
+
+	.gis-view-demo .demo-panel-inline-body {
+		max-height: min(60vh, 620px);
+	}
+
+	.gis-view-demo .demo-minimap-hint {
+		-webkit-line-clamp: 3;
+	}
+}
+
+.gis-view-demo .demo-overlay {
+	position: absolute;
+	top: 12px;
+	left: 12px;
+	width: 208px;
+	padding: 10px 12px;
+	border: 1px solid rgba(214, 226, 240, 0.9);
+	border-radius: 10px;
+	background: rgba(255, 255, 255, 0.88);
+	box-shadow: 0 10px 26px rgba(31, 62, 105, 0.14);
+	color: #3b5675;
+	font-size: 11px;
+	pointer-events: none;
+	backdrop-filter: blur(6px);
+}
+
+.gis-view-demo .demo-overlay-title {
+	margin: 0 0 8px;
+	padding-bottom: 6px;
+	border-bottom: 1px solid rgba(214, 226, 240, 0.8);
+	color: #2f6fd0;
+	font-size: 11px;
+	font-weight: 700;
+	letter-spacing: 0.04em;
+}
+
+.gis-view-demo .demo-overlay dl {
+	display: grid;
+	gap: 4px;
+	margin: 0;
+}
+
+.gis-view-demo .demo-overlay dl > div {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: 10px;
+}
+
+.gis-view-demo .demo-overlay dt {
+	color: #7c8da6;
+}
+
+.gis-view-demo .demo-overlay dd {
+	margin: 0;
+	color: #25395c;
+	font-variant-numeric: tabular-nums;
+	font-weight: 600;
+}
+
+.gis-view-demo .demo-minimap {
+	position: absolute;
+	left: 12px;
+	bottom: 12px;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	padding: 6px 6px 4px;
+	border: 1px solid rgba(214, 226, 240, 0.9);
+	border-radius: 10px;
+	background: rgba(255, 255, 255, 0.9);
+	box-shadow: 0 10px 26px rgba(31, 62, 105, 0.14);
+	backdrop-filter: blur(6px);
+}
+
+.gis-view-demo .demo-minimap-toolbar {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 4px;
+	max-width: 336px;
+}
+
+.gis-view-demo .demo-minimap-toolbar select {
+	padding: 2px 4px;
+	border: 1px solid #cfd9e8;
+	border-radius: 6px;
+	color: #33517b;
+	font-size: 11px;
+}
+
+.gis-view-demo .demo-minimap-toolbar input[type='color'] {
+	width: 26px;
+	height: 18px;
+	padding: 0 1px;
+	border: 1px solid #cfd9e8;
+	border-radius: 6px;
+	background: #fff;
+	cursor: pointer;
+}
+
+.gis-view-demo .demo-minimap-toolbar input[type='number'] {
+	width: 42px;
+	padding: 2px 4px;
+	border: 1px solid #cfd9e8;
+	border-radius: 6px;
+	color: #33517b;
+	font-size: 11px;
+}
+
+.gis-view-demo .demo-minimap-toolbar button {
+	min-width: 22px;
+	padding: 2px 6px;
+	border: 1px solid #cfd9e8;
+	border-radius: 6px;
+	background: #fff;
+	color: #33517b;
+	font-size: 11px;
+	line-height: 1.4;
+	cursor: pointer;
+}
+
+.gis-view-demo .demo-minimap-toolbar button:hover {
+	border-color: #8fb4dd;
+	background: #f2f7ff;
+}
+
+.gis-view-demo .demo-minimap-switch {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	color: #526b8d;
+	font-size: 11px;
+}
+
+.gis-view-demo .demo-minimap-hint {
+	color: #8191a8;
+	font-size: 10px;
+	text-align: center;
+}
+
+.gis-view-demo .demo-slider {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	color: #526b8d;
+	/* 下拉的选项一长，不折行、不压缩，放不下就整行换到下一行（不然文字会被挤成一列） */
+	white-space: nowrap;
+	flex-shrink: 0;
+}
+
+.gis-view-demo .demo-slider input[type='range'] {
+	width: 96px;
+	margin: 0;
+	accent-color: #3678bf;
+}
+
+.gis-view-demo .demo-slider input[type='range']:disabled {
+	opacity: 0.4;
+}
+
+.gis-view-demo .demo-slider span {
+	min-width: 44px;
+	color: #8191a8;
+	font-variant-numeric: tabular-nums;
+}
+
+.gis-view-demo .demo-slider select {
+	padding: 3px 6px;
+	border: 1px solid #cfd9e8;
+	border-radius: 6px;
+	color: #33517b;
+	font-size: 12px;
+}
+
+.gis-view-demo .demo-controls input[type='text'] {
+	width: 120px;
+	padding: 3px 6px;
+	border: 1px solid #cfd9e8;
+	border-radius: 6px;
+	color: #33517b;
+	font-size: 12px;
+}
+
+.gis-view-demo .demo-controls button {
+	border-color: #cfd9e8;
+	background: #fff;
+	color: #33517b;
+}
+
+.gis-view-demo .demo-controls button:hover {
+	border-color: #8fb4dd;
+	background: #f2f7ff;
+}
+
+.gis-view-demo .demo-members {
+	display: flex;
+	flex: 1 1 100%;
+	flex-direction: column;
+	gap: 4px;
+	padding: 6px 8px;
+	border-radius: 6px;
+	background: #f7f9fc;
+}
+
+.gis-view-demo .demo-member-row {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 6px;
+	color: #526b8d;
+	font-size: 12px;
+}
+
+.gis-view-demo .demo-member-title {
+	min-width: 54px;
+	color: #33517b;
+	font-weight: 600;
+}
+
+.gis-view-demo .demo-member-row input[type='text'] {
+	width: 132px;
+}
+
+.gis-view-demo .demo-member-row input[type='number'] {
+	width: 76px;
+	padding: 3px 6px;
+	border: 1px solid #cfd9e8;
+	border-radius: 6px;
+	color: #33517b;
+	font-size: 12px;
+}
+
+.gis-view-demo .demo-member-row input[type='color'] {
+	width: 30px;
+	height: 22px;
+	padding: 0;
+	border: 1px solid #cfd9e8;
+	border-radius: 4px;
+	background: #fff;
+}
+
+.gis-view-demo .gis-demo-event {
+	margin: 12px 0 0;
+	padding: 8px 10px;
+	border-radius: 6px;
+	background: #f3f7fc;
+	color: #4a648a;
+	font-size: 12px;
+	line-height: 1.5;
+}
+
+.gis-view-demo .demo-groups {
+	margin: 6px 0 0;
+	padding: 8px 10px;
+	max-height: 168px;
+	overflow: auto;
+	border-radius: 6px;
+	background: #f7f9fc;
+	color: #3f5878;
+	font-size: 11px;
+	line-height: 1.5;
+	white-space: pre;
+}
+
+/* 面板里的长说明：默认折成一行「说明」，点开才铺开 —— 面板就不会被几段参数说明撑长 */
+.gis-view-demo .demo-hint-more {
+	flex: 1 1 100%;
+}
+
+.gis-view-demo .demo-hint-more > summary {
+	color: #8191a8;
+	font-size: 11px;
+	cursor: pointer;
+	list-style: none;
+}
+
+.gis-view-demo .demo-hint-more > summary::-webkit-details-marker {
+	display: none;
+}
+
+.gis-view-demo .demo-hint-more > summary::before {
+	content: '▸ 说明';
+}
+
+.gis-view-demo .demo-hint-more[open] > summary::before {
+	content: '▾ 说明';
+}
+
+.gis-view-demo .demo-hint-more .demo-control-hint {
+	display: block;
+	margin: 4px 0 0;
+	line-height: 1.6;
+}
+
+/* 「数据格式」面板：一条结构一块，块里是标题 + 字段说明 + 从当前数据里取的真实样例 */
+.gis-view-demo .demo-panel .demo-controls--shape {
+	display: block;
+}
+
+.gis-view-demo .demo-shape {
+	margin-bottom: 8px;
+	padding: 8px 10px;
+	border: 1px solid #e5ecf5;
+	border-radius: 8px;
+	background: #fff;
+}
+
+.gis-view-demo .demo-shape:last-child {
+	margin-bottom: 0;
+}
+
+.gis-view-demo .demo-shape-title {
+	margin: 0;
+	color: #33517b;
+	font-size: 12px;
+	font-weight: 600;
+}
+
+.gis-view-demo .demo-shape-fields {
+	display: block;
+	margin-top: 4px;
+	color: #6b7f9c;
+	font-size: 11px;
+	line-height: 1.6;
+}
+
+.gis-view-demo .demo-shape-note {
+	display: block;
+	margin-top: 4px;
+	color: #8191a8;
+	font-size: 11px;
+}
+
+.gis-view-demo .demo-shape .demo-groups {
+	margin-top: 4px;
+	max-height: 132px;
+	white-space: pre-wrap;
+}
+
+.gis-view-demo .demo-channel-menu {
+	position: absolute;
+	z-index: 6;
+	width: 340px;
+	padding: 10px 12px;
+	border: 1px solid rgba(214, 226, 240, 0.95);
+	border-radius: 10px;
+	background: rgba(255, 255, 255, 0.97);
+	box-shadow: 0 16px 34px rgba(31, 62, 105, 0.22);
+	color: #3b5675;
+	font-size: 11px;
+	backdrop-filter: blur(6px);
+}
+
+.gis-view-demo .demo-point-menu {
+	width: 280px;
+}
+
+.gis-view-demo .demo-point-menu .demo-channel-menu-actions button {
+	padding: 4px 9px;
+	border: 1px solid rgba(190, 208, 230, 0.95);
+	border-radius: 6px;
+	background: #f5f8fc;
+	color: #3b5675;
+	cursor: pointer;
+}
+
+.gis-view-demo .demo-point-menu .demo-channel-menu-actions button:disabled {
+	cursor: not-allowed;
+	opacity: 0.5;
+}
+
+
+.gis-view-demo .demo-channel-menu-head {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding-bottom: 6px;
+	border-bottom: 1px solid rgba(214, 226, 240, 0.8);
+}
+
+.gis-view-demo .demo-channel-menu-head strong {
+	color: #2f6fd0;
+	font-size: 12px;
+}
+
+.gis-view-demo .demo-channel-menu-head span {
+	flex: 1;
+	color: #6a86a8;
+}
+
+.gis-view-demo .demo-channel-menu-head button {
+	border: none;
+	background: none;
+	color: #90a5bf;
+	font-size: 14px;
+	line-height: 1;
+	cursor: pointer;
+}
+
+.gis-view-demo .demo-channel-menu-groups {
+	margin: 6px 0;
+	padding: 0;
+	display: grid;
+	gap: 4px;
+	max-height: 132px;
+	overflow: auto;
+	list-style: none;
+}
+
+.gis-view-demo .demo-channel-menu-groups li {
+	display: flex;
+	justify-content: space-between;
+	gap: 8px;
+	padding: 4px 6px;
+	border-radius: 6px;
+	background: #f5f8fc;
+	cursor: pointer;
+}
+
+.gis-view-demo .demo-channel-menu-groups li.is-current {
+	background: #e4efff;
+	color: #2f6fd0;
+	font-weight: 600;
+}
+
+.gis-view-demo .demo-channel-menu-actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+}
+
+.gis-view-demo .demo-channel-menu-lines {
+	margin: 6px 0 8px;
+	padding-top: 6px;
+	border-top: 1px dashed rgba(214, 226, 240, 0.9);
+}
+
+.gis-view-demo .demo-channel-menu-subtitle {
+	margin: 0 0 5px;
+	color: #6a86a8;
+	line-height: 1.5;
+}
+
+.gis-view-demo .demo-channel-menu-lines ul {
+	margin: 0;
+	padding: 0;
+	display: grid;
+	gap: 4px;
+	max-height: 120px;
+	overflow: auto;
+	list-style: none;
+}
+
+.gis-view-demo .demo-channel-menu-lines li {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	min-width: 0;
+	padding: 3px 5px;
+	border-radius: 6px;
+	background: #f5f8fc;
+}
+
+.gis-view-demo .demo-channel-menu-line-id {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	color: #3b5675;
+}
+
+.gis-view-demo .demo-channel-menu-target {
+	/* flex 项默认按内容撑开：不给 min-width: 0，选项一长整行就顶出弹框 */
+	flex: 0 1 auto;
+	min-width: 0;
+	max-width: 148px;
+	padding: 2px 4px;
+	border: 1px solid rgba(47, 111, 208, 0.35);
+	border-radius: 6px;
+	background: #ffffff;
+	color: #2f6fd0;
+	font-size: 11px;
+}
+
+.gis-view-demo .demo-channel-menu-assign {
+	flex: 0 0 auto;
+	padding: 3px 8px;
+	border: 1px solid rgba(47, 111, 208, 0.35);
+	border-radius: 6px;
+	background: #e4efff;
+	color: #2f6fd0;
+	font-size: 11px;
+	cursor: pointer;
+}
+
+.gis-view-demo .demo-channel-menu-actions button {
+	padding: 3px 8px;
+	border: 1px solid rgba(47, 111, 208, 0.35);
+	border-radius: 6px;
+	background: #ffffff;
+	color: #2f6fd0;
+	font-size: 11px;
+	cursor: pointer;
+}
+
+.gis-view-demo .demo-channel-menu-actions button:disabled {
+	border-color: rgba(150, 170, 195, 0.4);
+	background: #f4f7fb;
+	color: #9db0c8;
+	cursor: not-allowed;
+}
+
+.gis-view-demo .demo-channel-menu-hint {
+	margin: 8px 0 0;
+	color: #6a86a8;
+	line-height: 1.5;
+}
+
+.gis-view-demo .demo-merge-mask {
+	position: fixed;
+	inset: 0;
+	z-index: 40;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgba(12, 24, 40, 0.34);
+}
+
+.gis-view-demo .demo-merge-dialog {
+	width: min(380px, calc(100% - 32px));
+	padding: 16px 18px;
+	border: 1px solid rgba(47, 111, 208, 0.28);
+	border-radius: 12px;
+	background: #ffffff;
+	box-shadow: 0 18px 44px rgba(12, 30, 56, 0.24);
+	color: #16324f;
+}
+
+.gis-view-demo .demo-merge-dialog h4 {
+	margin: 0 0 6px;
+	font-size: 14px;
+}
+
+.gis-view-demo .demo-merge-dialog p {
+	margin: 0;
+	color: #55708f;
+	font-size: 12px;
+	line-height: 1.6;
+}
+
+.gis-view-demo .demo-station-grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 8px 10px;
+	margin: 10px 0 4px;
+}
+
+.gis-view-demo .demo-station-grid label {
+	display: flex;
+	flex-direction: column;
+	gap: 3px;
+	color: #55708f;
+	font-size: 12px;
+}
+
+.gis-view-demo .demo-station-grid input,
+.gis-view-demo .demo-station-grid select {
+	padding: 4px 6px;
+	border: 1px solid rgba(47, 111, 208, 0.32);
+	border-radius: 6px;
+	background: #fbfdff;
+	color: #16324f;
+	font: inherit;
+}
+
+.gis-view-demo .demo-station-error {
+	margin: 4px 0 0;
+	color: #c0392b;
+}
+
+.gis-view-demo .demo-merge-pair {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	margin: 10px 0 6px;
+	font-size: 13px;
+}
+
+.gis-view-demo .demo-merge-pair b {
+	color: #2f6fd0;
+}
+
+.gis-view-demo .demo-merge-detail {
+	color: #6a86a8;
+}
+
+.gis-view-demo .demo-merge-actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	margin-top: 14px;
+}
+
+.gis-view-demo .demo-merge-actions button {
+	padding: 5px 10px;
+	border: 1px solid rgba(47, 111, 208, 0.35);
+	border-radius: 8px;
+	background: #ffffff;
+	color: #2f6fd0;
+	font-size: 12px;
+	cursor: pointer;
+}
+
+.gis-view-demo .demo-merge-actions button.is-primary {
+	border-color: #2f6fd0;
+	background: #2f6fd0;
+	color: #ffffff;
+}
+
+/* 删除确认框里「要删什么」的清单：左边是要删的要素、右边是它的归属 / 连带影响 */
+.gis-view-demo .demo-remove-list {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	max-height: 180px;
+	margin: 10px 0 0;
+	padding: 0;
+	overflow: auto;
+	list-style: none;
+}
+
+.gis-view-demo .demo-remove-list li {
+	display: flex;
+	justify-content: space-between;
+	gap: 10px;
+	padding: 5px 7px;
+	border: 1px solid rgba(47, 111, 208, 0.18);
+	border-radius: 8px;
+	color: #29486c;
+	font-size: 12px;
+}
+
+.gis-view-demo .demo-remove-list span {
+	color: #6a86a8;
+}
+.gis-view-demo .gis-demo-events {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px 16px;
+	margin: 6px 0 0;
+	padding: 8px 10px;
+	border-radius: 6px;
+	background: #f7fafd;
+	color: #4a648a;
+	font-size: 12px;
+}
+
+/* 功能开关：18 个复选框按两列铺开（勾选 = 强制打开、取消 = 强制关闭） */
+.gis-view-demo .demo-features {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 2px 10px;
+	min-height: 0;
+	margin-top: -2px;
+}
+
+.gis-view-demo .demo-feature-toggle {
+	display: inline-flex;
+	align-items: center;
+	gap: 5px;
+	color: #526b8d;
+	font-size: 12px;
+	cursor: pointer;
+}
+
+/* 历史步骤与事件日志：一行一条，左边是名字、右边是读数 */
+.gis-view-demo .demo-step-list {
+	display: flex;
+	flex-direction: column;
+	gap: 3px;
+	max-height: 138px;
+	margin: 8px 10px;
+	padding: 0;
+	overflow: auto;
+	list-style: none;
+}
+
+.gis-view-demo .demo-step-list li {
+	display: flex;
+	align-items: baseline;
+	gap: 8px;
+	padding: 4px 8px;
+	border-radius: 6px;
+	background: #f7f9fc;
+	color: #4a648a;
+	font-size: 11px;
+}
+
+.gis-view-demo .demo-step-list li b {
+	flex: none;
+	color: #23405f;
+	font-weight: 700;
+}
+
+.gis-view-demo .demo-step-list li span {
+	color: #7b8ca6;
+	font-variant-numeric: tabular-nums;
+}
+
+/* 事件日志的载荷文本可能很长：单行省略，鼠标悬停看全文 */
+.gis-view-demo .demo-step-list--events li span {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.gis-view-demo .gis-demo-events b {
+	margin-right: 4px;
+	color: #23405f;
+	font-weight: 600;
+}
+
+.gis-view-demo .gis-demo-events span {
+	font-variant-numeric: tabular-nums;
+}