gis-view-webgl2 0.1.0 → 0.1.2

package/docs/demos/shared/demoStyle.css

@@ -1,250 +1,250 @@
-/**
- * 几个功能演示共用的外观：浅色卡片 + 深色画布 + 右侧读数栏。
- * 类名统一 dv- 前缀，和 GisViewDemo.vue 里那套 demo-* 互不干扰
- * （综合示例保持原样，功能演示各自短小，共用这一份样式不必各写一遍）。
- */
-.dv-demo {
-	display: grid;
-	grid-template-columns: minmax(0, 1fr) clamp(272px, 23vw, 380px);
-	gap: 14px;
-	align-items: start;
-}
-
-.dv-stage {
-	position: relative;
-	height: clamp(460px, calc(100vh - 320px), 860px);
-	border: 1px solid #e2e9f2;
-	border-radius: 10px;
-	overflow: hidden;
-	background: #f7fafd;
-}
-
-.dv-canvas {
-	height: 100%;
-}
-
-/* 画布右上角的悬浮工具条：全屏 / 适合全部这类「不动数据」的操作 */
-.dv-toolbar {
-	position: absolute;
-	top: 10px;
-	right: 10px;
-	z-index: 3;
-	display: flex;
-	gap: 6px;
-	padding: 5px;
-	border-radius: 8px;
-	background: rgba(255, 255, 255, 0.86);
-	box-shadow: 0 4px 16px rgba(31, 62, 105, 0.14);
-	backdrop-filter: blur(6px);
-}
-
-.dv-toolbar button {
-	padding: 5px 10px;
-	font-size: 12px;
-}
-
-.dv-panel {
-	display: flex;
-	flex-direction: column;
-	gap: 10px;
-	max-height: clamp(460px, calc(100vh - 320px), 860px);
-	overflow: auto;
-	padding-right: 4px;
-}
-
-.dv-group {
-	padding: 12px;
-	border: 1px solid #e2e9f2;
-	border-radius: 10px;
-	background: #fff;
-	box-shadow: 0 8px 24px rgba(31, 62, 105, 0.05);
-}
-
-.dv-group > h3 {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-	margin: 0 0 10px;
-	color: #17233d;
-	font-size: 14px;
-}
-
-.dv-row {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: 8px;
-}
-
-.dv-row + .dv-row {
-	margin-top: 8px;
-}
-
-.dv-row label {
-	display: inline-flex;
-	align-items: center;
-	gap: 5px;
-	color: #526b8d;
-	font-size: 12px;
-	cursor: pointer;
-}
-
-.dv-row select {
-	padding: 4px 6px;
-	border: 1px solid #d6e0ec;
-	border-radius: 6px;
-	background: #fff;
-	color: #1f2a44;
-	font-size: 12px;
-}
-
-.dv-row input[type='range'] {
-	width: 118px;
-}
-
-.dv-button {
-	padding: 6px 10px;
-	border: 1px solid #cfdcec;
-	border-radius: 6px;
-	background: #f6f9fd;
-	color: #2f5e94;
-	font-size: 12px;
-	cursor: pointer;
-}
-
-.dv-button:hover {
-	background: #e9f1fb;
-}
-
-.dv-button--primary {
-	border-color: #3678bf;
-	background: #3678bf;
-	color: #fff;
-}
-
-.dv-button--primary:hover {
-	background: #28629e;
-}
-
-.dv-button--danger {
-	border-color: #e7bcbc;
-	background: #fdf4f4;
-	color: #b93b3b;
-}
-
-.dv-button:disabled {
-	opacity: 0.55;
-	cursor: not-allowed;
-}
-
-.dv-readout {
-	margin: 0;
-	padding: 8px 10px;
-	border-radius: 8px;
-	background: #f3f6fa;
-	color: #526b8d;
-	font-size: 12px;
-	line-height: 1.6;
-	word-break: break-all;
-}
-
-.dv-hint {
-	margin: 6px 0 0;
-	color: #8191a8;
-	font-size: 11px;
-	line-height: 1.6;
-}
-
-.dv-log {
-	max-height: 220px;
-	margin: 0;
-	padding: 0;
-	overflow: auto;
-	list-style: none;
-}
-
-.dv-log li {
-	padding: 5px 8px;
-	border-bottom: 1px dashed #e6edf6;
-	color: #526b8d;
-	font-size: 12px;
-	line-height: 1.5;
-}
-
-.dv-log li:last-child {
-	border-bottom: 0;
-}
-
-.dv-log strong {
-	color: #2f5e94;
-	font-weight: 600;
-}
-
-.dv-chips {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 5px;
-}
-
-.dv-chip {
-	padding: 3px 8px;
-	border: 1px solid #d6e0ec;
-	border-radius: 999px;
-	background: #fff;
-	color: #526b8d;
-	font-size: 11px;
-	cursor: pointer;
-}
-
-.dv-chip--active {
-	border-color: #3678bf;
-	background: #eaf2fc;
-	color: #2f5e94;
-	font-weight: 600;
-}
-
-/* 标签右键菜单：贴在指针位置的自绘菜单（演示 labelContextMenu 的用法） */
-.dv-menu {
-	position: fixed;
-	z-index: 60;
-	min-width: 168px;
-	padding: 5px;
-	border: 1px solid #d6e0ec;
-	border-radius: 8px;
-	background: #fff;
-	box-shadow: 0 12px 32px rgba(31, 62, 105, 0.18);
-}
-
-.dv-menu button {
-	display: block;
-	width: 100%;
-	padding: 7px 10px;
-	border: 0;
-	border-radius: 6px;
-	background: transparent;
-	color: #1f2a44;
-	font-size: 12px;
-	text-align: left;
-	cursor: pointer;
-}
-
-.dv-menu button:hover {
-	background: #eef4fc;
-}
-
-.dv-menu__title {
-	padding: 6px 10px 4px;
-	color: #8191a8;
-	font-size: 11px;
-}
-
-@media (max-width: 1080px) {
-	.dv-demo {
-		grid-template-columns: minmax(0, 1fr);
-	}
-
-	.dv-panel {
-		max-height: none;
-	}
+/**
+ * 几个功能演示共用的外观：浅色卡片 + 深色画布 + 右侧读数栏。
+ * 类名统一 dv- 前缀，和 GisViewDemo.vue 里那套 demo-* 互不干扰
+ * （综合示例保持原样，功能演示各自短小，共用这一份样式不必各写一遍）。
+ */
+.dv-demo {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) clamp(272px, 23vw, 380px);
+	gap: 14px;
+	align-items: start;
+}
+
+.dv-stage {
+	position: relative;
+	height: clamp(460px, calc(100vh - 320px), 860px);
+	border: 1px solid #e2e9f2;
+	border-radius: 10px;
+	overflow: hidden;
+	background: #f7fafd;
+}
+
+.dv-canvas {
+	height: 100%;
+}
+
+/* 画布右上角的悬浮工具条：全屏 / 适合全部这类「不动数据」的操作 */
+.dv-toolbar {
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	z-index: 3;
+	display: flex;
+	gap: 6px;
+	padding: 5px;
+	border-radius: 8px;
+	background: rgba(255, 255, 255, 0.86);
+	box-shadow: 0 4px 16px rgba(31, 62, 105, 0.14);
+	backdrop-filter: blur(6px);
+}
+
+.dv-toolbar button {
+	padding: 5px 10px;
+	font-size: 12px;
+}
+
+.dv-panel {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	max-height: clamp(460px, calc(100vh - 320px), 860px);
+	overflow: auto;
+	padding-right: 4px;
+}
+
+.dv-group {
+	padding: 12px;
+	border: 1px solid #e2e9f2;
+	border-radius: 10px;
+	background: #fff;
+	box-shadow: 0 8px 24px rgba(31, 62, 105, 0.05);
+}
+
+.dv-group > h3 {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	margin: 0 0 10px;
+	color: #17233d;
+	font-size: 14px;
+}
+
+.dv-row {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
+.dv-row + .dv-row {
+	margin-top: 8px;
+}
+
+.dv-row label {
+	display: inline-flex;
+	align-items: center;
+	gap: 5px;
+	color: #526b8d;
+	font-size: 12px;
+	cursor: pointer;
+}
+
+.dv-row select {
+	padding: 4px 6px;
+	border: 1px solid #d6e0ec;
+	border-radius: 6px;
+	background: #fff;
+	color: #1f2a44;
+	font-size: 12px;
+}
+
+.dv-row input[type='range'] {
+	width: 118px;
+}
+
+.dv-button {
+	padding: 6px 10px;
+	border: 1px solid #cfdcec;
+	border-radius: 6px;
+	background: #f6f9fd;
+	color: #2f5e94;
+	font-size: 12px;
+	cursor: pointer;
+}
+
+.dv-button:hover {
+	background: #e9f1fb;
+}
+
+.dv-button--primary {
+	border-color: #3678bf;
+	background: #3678bf;
+	color: #fff;
+}
+
+.dv-button--primary:hover {
+	background: #28629e;
+}
+
+.dv-button--danger {
+	border-color: #e7bcbc;
+	background: #fdf4f4;
+	color: #b93b3b;
+}
+
+.dv-button:disabled {
+	opacity: 0.55;
+	cursor: not-allowed;
+}
+
+.dv-readout {
+	margin: 0;
+	padding: 8px 10px;
+	border-radius: 8px;
+	background: #f3f6fa;
+	color: #526b8d;
+	font-size: 12px;
+	line-height: 1.6;
+	word-break: break-all;
+}
+
+.dv-hint {
+	margin: 6px 0 0;
+	color: #8191a8;
+	font-size: 11px;
+	line-height: 1.6;
+}
+
+.dv-log {
+	max-height: 220px;
+	margin: 0;
+	padding: 0;
+	overflow: auto;
+	list-style: none;
+}
+
+.dv-log li {
+	padding: 5px 8px;
+	border-bottom: 1px dashed #e6edf6;
+	color: #526b8d;
+	font-size: 12px;
+	line-height: 1.5;
+}
+
+.dv-log li:last-child {
+	border-bottom: 0;
+}
+
+.dv-log strong {
+	color: #2f5e94;
+	font-weight: 600;
+}
+
+.dv-chips {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 5px;
+}
+
+.dv-chip {
+	padding: 3px 8px;
+	border: 1px solid #d6e0ec;
+	border-radius: 999px;
+	background: #fff;
+	color: #526b8d;
+	font-size: 11px;
+	cursor: pointer;
+}
+
+.dv-chip--active {
+	border-color: #3678bf;
+	background: #eaf2fc;
+	color: #2f5e94;
+	font-weight: 600;
+}
+
+/* 标签右键菜单：贴在指针位置的自绘菜单（演示 labelContextMenu 的用法） */
+.dv-menu {
+	position: fixed;
+	z-index: 60;
+	min-width: 168px;
+	padding: 5px;
+	border: 1px solid #d6e0ec;
+	border-radius: 8px;
+	background: #fff;
+	box-shadow: 0 12px 32px rgba(31, 62, 105, 0.18);
+}
+
+.dv-menu button {
+	display: block;
+	width: 100%;
+	padding: 7px 10px;
+	border: 0;
+	border-radius: 6px;
+	background: transparent;
+	color: #1f2a44;
+	font-size: 12px;
+	text-align: left;
+	cursor: pointer;
+}
+
+.dv-menu button:hover {
+	background: #eef4fc;
+}
+
+.dv-menu__title {
+	padding: 6px 10px 4px;
+	color: #8191a8;
+	font-size: 11px;
+}
+
+@media (max-width: 1080px) {
+	.dv-demo {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	.dv-panel {
+		max-height: none;
+	}
 }

package/docs/demos/shared/fakeBackend.js

@@ -49,6 +49,21 @@ const uniqueIds = values => [...new Set((values ?? [])
 	.map(value => String(value)))]
 const idsOf = values => (values ?? []).map(item => item?.id).filter(id => id !== undefined && id !== null)
 const groupLineIds = groups => (groups ?? []).flatMap(group => (group?.lineIds ?? []).map(id => String(id)))
+/** 与字段顺序无关的 JSON：同一个 opId 换一个 body 要能被服务端识别成 IDEMPOTENCY_CONFLICT */
+const canonicalJson = (value) => {
+	if (Array.isArray(value)) {
+		return `[${value.map(entry => canonicalJson(entry)).join(',')}]`
+	}
+	if (value && typeof value === 'object') {
+		return `{${Object.keys(value).sort().map(key => `${JSON.stringify(key)}:${canonicalJson(value[key])}`).join(',')}}`
+	}
+	return JSON.stringify(value ?? null)
+}
+const requestFingerprint = request => canonicalJson({
+	method: request?.method ?? 'POST',
+	url: request?.url ?? '',
+	body: request?.body ?? {}
+})
 
 /** 从 URL 判断业务操作；URL 是接口边界，body.op 只作为展示 / 审计字段 */
 const operationOf = (request) => {
@@ -83,7 +98,7 @@ export function createFakeBackend(options = {}) {
 	let requestSeq = 0
 	let attemptSeq = 0
 	let replayCount = 0
-	/** opId → 第一次成功响应：重复提交直接复用，不再改版本 */
+	/** opId → { response, fingerprint }：重复提交复用第一次响应，但换了 body 要报幂等冲突 */
 	const completed = new Map()
 	/** 最近一次成功写入的资源快照：409 时可以随错误包一起回给前端 */
 	const resources = new Map()
@@ -319,7 +334,13 @@ export function createFakeBackend(options = {}) {
 					scope: 'document',
 					resolution: 'refetch-latest-or-rebase'
 				}
-				: null,
+				: code === 'IDEMPOTENCY_CONFLICT'
+					? {
+						type: 'idempotency-key',
+						scope: 'opId',
+						resolution: 'use-new-opid-for-new-request'
+					}
+					: null,
 			current: currentResourceOf(request, operation)
 		}
 	})
@@ -337,11 +358,77 @@ export function createFakeBackend(options = {}) {
 		const requestId = request?.requestId ?? request?.id ?? `req-${prefix}-${pad(requestSeq)}`
 		const serverTime = new Date().toISOString()
 		const operation = operationOf(request)
-		const opId = request?.opId ?? request?.body?.opId ?? request?.headers?.['Idempotency-Key']
+		const headerOpId = request?.headers?.['Idempotency-Key']
+		const bodyOpId = request?.body?.opId ?? request?.opId
+		const ifMatch = request?.headers?.['If-Match']
+		const opId = bodyOpId ?? headerOpId
 		const baseVersion = Number(request?.body?.baseVersion ?? request?.baseVersion)
-		const cached = opId ? completed.get(opId) : null
-		if (cached) {
+		const fingerprint = requestFingerprint(request)
+		/** 统一组一笔校验失败响应：400 / 409 都走同一个错误包 */
+		const fail = ({ code, status, message, retryable = false }) => {
+			const body = errorBody({
+				request,
+				operation,
+				code,
+				message,
+				requestId,
+				traceId,
+				serverTime,
+				currentVersion: version,
+				expectedVersion: baseVersion,
+				retryable
+			})
+			return {
+				ok: false,
+				status,
+				statusText: statusText(status),
+				code,
+				reason: message,
+				retryable,
+				idempotent: false,
+				serverVersion: version,
+				expectedVersion: Number.isFinite(baseVersion) ? baseVersion : null,
+				currentVersion: version,
+				requestId,
+				traceId,
+				request,
+				body,
+				data: body.data
+			}
+		}
+		// 真实网关会先校验头与 body 一致性；服务端不能猜以哪一个为准。
+		if (bodyOpId === undefined || bodyOpId === null || bodyOpId === '' || String(headerOpId ?? '') !== String(bodyOpId)) {
+			return fail({
+				code: 'BAD_REQUEST',
+				status: 400,
+				message: 'Idempotency-Key 必须存在且与 body.opId 完全一致'
+			})
+		}
+		if (!Number.isFinite(baseVersion)) {
+			return fail({
+				code: 'BAD_REQUEST',
+				status: 400,
+				message: 'body.baseVersion 必须是有限数字'
+			})
+		}
+		if (String(ifMatch ?? '') !== `"v${baseVersion}"`) {
+			return fail({
+				code: 'BAD_REQUEST',
+				status: 400,
+				message: `If-Match 必须写成 "v${baseVersion}"（与 body.baseVersion 一致）`
+			})
+		}
+		const cachedEntry = opId ? completed.get(opId) : null
+		if (cachedEntry && cachedEntry.fingerprint !== fingerprint) {
+			return fail({
+				code: 'IDEMPOTENCY_CONFLICT',
+				status: 409,
+				message: '同一个 opId 被用于不同请求体：新动作请生成新的 opId'
+			})
+		}
+		if (cachedEntry) {
 			replayCount += 1
+			const cached = cachedEntry.response
 			const body = cloneFakeData(cached.body)
 			body.requestId = requestId
 			body.traceId = traceId
@@ -486,7 +573,7 @@ export function createFakeBackend(options = {}) {
 			data: body.data
 		}
 		if (opId) {
-			completed.set(opId, response)
+			completed.set(opId, { response, fingerprint })
 		}
 		return response
 	}