@pisell/private-materials 6.12.168 → 6.12.169

package/es/components/HDLKiosk/ui/ScaleSimulatorConsole/index.js

@@ -0,0 +1,387 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import "./index.less";
+//#region src/components/HDLKiosk/ui/ScaleSimulatorConsole/index.tsx
+const isScaleSimulatorApiAvailable = () => typeof window !== "undefined" && Boolean(window.pisellScaleSimulator);
+const ACCESS_PASSWORD = "0000";
+const PANEL_WIDTH = 720;
+const PANEL_HEADER_VISIBLE_HEIGHT = 76;
+const STATUS_OPTIONS = [
+	{
+		value: "stable",
+		label: "稳定"
+	},
+	{
+		value: "unstable",
+		label: "波动"
+	},
+	{
+		value: "overload",
+		label: "超载"
+	},
+	{
+		value: "negative",
+		label: "负数"
+	}
+];
+const CONNECTION_LABELS = {
+	connected: "已连接",
+	connecting: "连接中",
+	disconnected: "已断开"
+};
+function getInitialPosition() {
+	if (typeof window === "undefined") return {
+		x: 32,
+		y: 96
+	};
+	return {
+		x: Math.max(20, Math.round((window.innerWidth - PANEL_WIDTH) / 2)),
+		y: Math.max(76, Math.round((window.innerHeight - 760) / 2))
+	};
+}
+function CloseIcon() {
+	return /* @__PURE__ */ React.createElement("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true"
+	}, /* @__PURE__ */ React.createElement("path", { d: "m6 6 12 12M18 6 6 18" }));
+}
+function MinimizeIcon({ minimized }) {
+	return /* @__PURE__ */ React.createElement("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true"
+	}, minimized ? /* @__PURE__ */ React.createElement("path", { d: "M7 10V7h3m4 0h3v3m0 4v3h-3m-4 0H7v-3" }) : /* @__PURE__ */ React.createElement("path", { d: "M6 16h12" }));
+}
+function ScaleGlyph() {
+	return /* @__PURE__ */ React.createElement("svg", {
+		viewBox: "0 0 32 32",
+		"aria-hidden": "true"
+	}, /* @__PURE__ */ React.createElement("path", { d: "M8 12h16l-1.5 4h-13L8 12Z" }), /* @__PURE__ */ React.createElement("path", { d: "M10 16h12l2 11H8l2-11Z" }), /* @__PURE__ */ React.createElement("rect", {
+		x: "12",
+		y: "19",
+		width: "8",
+		height: "5",
+		rx: "1.5"
+	}), /* @__PURE__ */ React.createElement("path", { d: "M11 8h10" }));
+}
+function ScaleSimulatorConsole({ authOpen, onAuthClose }) {
+	var _snapshot$weight, _STATUS_OPTIONS$find$, _STATUS_OPTIONS$find;
+	const [password, setPassword] = useState("");
+	const [passwordError, setPasswordError] = useState(false);
+	const [panelOpen, setPanelOpen] = useState(false);
+	const [minimized, setMinimized] = useState(false);
+	const [position, setPosition] = useState(getInitialPosition);
+	const [snapshot, setSnapshot] = useState(null);
+	const [api, setApi] = useState(null);
+	const [apiRevision, setApiRevision] = useState(0);
+	const [manualWeight, setManualWeight] = useState("1000");
+	const [manualStatus, setManualStatus] = useState("stable");
+	const [actionError, setActionError] = useState(null);
+	const passwordInputRef = useRef(null);
+	const panelRef = useRef(null);
+	const dragRef = useRef(null);
+	useEffect(() => {
+		var _passwordInputRef$cur;
+		if (!authOpen) return;
+		setPassword("");
+		setPasswordError(false);
+		(_passwordInputRef$cur = passwordInputRef.current) === null || _passwordInputRef$cur === void 0 || _passwordInputRef$cur.focus();
+	}, [authOpen]);
+	useEffect(() => {
+		var _window$pisellScaleSi;
+		if (!panelOpen) return void 0;
+		const nextApi = (_window$pisellScaleSi = window.pisellScaleSimulator) !== null && _window$pisellScaleSi !== void 0 ? _window$pisellScaleSi : null;
+		setApi(nextApi);
+		if (!nextApi) {
+			setSnapshot(null);
+			return;
+		}
+		setSnapshot(nextApi.getSnapshot());
+		return nextApi.subscribe(setSnapshot);
+	}, [panelOpen, apiRevision]);
+	useEffect(() => {
+		const handlePointerMove = (event) => {
+			var _panelRef$current$off, _panelRef$current;
+			const drag = dragRef.current;
+			if (!drag || drag.pointerId !== event.pointerId) return;
+			const panelWidth = (_panelRef$current$off = (_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.offsetWidth) !== null && _panelRef$current$off !== void 0 ? _panelRef$current$off : PANEL_WIDTH;
+			const nextX = drag.origin.x + event.clientX - drag.startX;
+			const nextY = drag.origin.y + event.clientY - drag.startY;
+			setPosition({
+				x: Math.min(Math.max(8, nextX), Math.max(8, window.innerWidth - panelWidth - 8)),
+				y: Math.min(Math.max(8, nextY), Math.max(8, window.innerHeight - PANEL_HEADER_VISIBLE_HEIGHT))
+			});
+		};
+		const handlePointerUp = (event) => {
+			var _dragRef$current;
+			if (((_dragRef$current = dragRef.current) === null || _dragRef$current === void 0 ? void 0 : _dragRef$current.pointerId) === event.pointerId) dragRef.current = null;
+		};
+		window.addEventListener("pointermove", handlePointerMove);
+		window.addEventListener("pointerup", handlePointerUp);
+		window.addEventListener("pointercancel", handlePointerUp);
+		return () => {
+			window.removeEventListener("pointermove", handlePointerMove);
+			window.removeEventListener("pointerup", handlePointerUp);
+			window.removeEventListener("pointercancel", handlePointerUp);
+		};
+	}, []);
+	const runAction = useCallback((action) => {
+		if (!api) return;
+		try {
+			setActionError(null);
+			action(api);
+		} catch (error) {
+			setActionError(error instanceof Error ? error.message : String(error));
+		}
+	}, [api]);
+	const submitPassword = (event) => {
+		event.preventDefault();
+		if (password !== ACCESS_PASSWORD) {
+			var _passwordInputRef$cur2;
+			setPasswordError(true);
+			(_passwordInputRef$cur2 = passwordInputRef.current) === null || _passwordInputRef$cur2 === void 0 || _passwordInputRef$cur2.select();
+			return;
+		}
+		setPasswordError(false);
+		setPanelOpen(true);
+		setMinimized(false);
+		setApiRevision((current) => current + 1);
+		onAuthClose();
+	};
+	const closePanel = () => {
+		api === null || api === void 0 || api.stopPlayback();
+		setPanelOpen(false);
+		setActionError(null);
+	};
+	const startDrag = (event) => {
+		if (event.target.closest("button")) return;
+		dragRef.current = {
+			pointerId: event.pointerId,
+			startX: event.clientX,
+			startY: event.clientY,
+			origin: position
+		};
+	};
+	const applyManualWeight = () => {
+		const weight = Number(manualWeight);
+		if (!Number.isFinite(weight)) {
+			setActionError("请输入有效的克重数值。");
+			return;
+		}
+		runAction((simulator) => simulator.setSnapshot({
+			weight,
+			status: manualStatus,
+			connectionState: "connected"
+		}));
+	};
+	const playPlaceItem = () => {
+		runAction((simulator) => simulator.play([
+			{
+				weight: 0,
+				status: "stable",
+				connectionState: "connected"
+			},
+			{
+				delayMs: 350,
+				weight: 1440,
+				status: "unstable"
+			},
+			{
+				delayMs: 160,
+				weight: 2080,
+				status: "unstable"
+			},
+			{
+				delayMs: 160,
+				weight: 1970,
+				status: "unstable"
+			},
+			{
+				delayMs: 320,
+				weight: 2e3,
+				status: "stable"
+			}
+		]));
+	};
+	const playRemoveItem = () => {
+		const currentWeight = (snapshot === null || snapshot === void 0 ? void 0 : snapshot.weight) || 1e3;
+		runAction((simulator) => simulator.play([
+			{
+				weight: currentWeight,
+				status: "stable",
+				connectionState: "connected"
+			},
+			{
+				delayMs: 180,
+				weight: currentWeight * .45,
+				status: "unstable"
+			},
+			{
+				delayMs: 160,
+				weight: 28,
+				status: "unstable"
+			},
+			{
+				delayMs: 280,
+				weight: 0,
+				status: "stable"
+			}
+		]));
+	};
+	const playJitter = () => {
+		const base = Math.max(100, (snapshot === null || snapshot === void 0 ? void 0 : snapshot.weight) || 1e3);
+		runAction((simulator) => simulator.play([
+			{
+				weight: base - 12,
+				status: "unstable",
+				connectionState: "connected"
+			},
+			{
+				delayMs: 220,
+				weight: base + 9,
+				status: "unstable"
+			},
+			{
+				delayMs: 220,
+				weight: base - 5,
+				status: "unstable"
+			},
+			{
+				delayMs: 220,
+				weight: base + 3,
+				status: "unstable"
+			}
+		], { loop: true }));
+	};
+	const playReconnect = () => {
+		runAction((simulator) => simulator.play([
+			{
+				weight: 0,
+				status: "stable",
+				connectionState: "disconnected"
+			},
+			{
+				delayMs: 1500,
+				connectionState: "connecting"
+			},
+			{
+				delayMs: 900,
+				weight: 0,
+				status: "stable",
+				connectionState: "connected"
+			}
+		]));
+	};
+	const displayWeight = (_snapshot$weight = snapshot === null || snapshot === void 0 ? void 0 : snapshot.weight) !== null && _snapshot$weight !== void 0 ? _snapshot$weight : 0;
+	const apiAvailable = Boolean(api);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, authOpen ? /* @__PURE__ */ React.createElement("div", {
+		className: "hdl-scale-simulator-gate",
+		role: "presentation",
+		onMouseDown: (event) => {
+			if (event.target === event.currentTarget) onAuthClose();
+		}
+	}, /* @__PURE__ */ React.createElement("form", {
+		className: "hdl-scale-simulator-gate__card",
+		"aria-label": "称重模拟器访问验证",
+		onSubmit: submitPassword
+	}, /* @__PURE__ */ React.createElement("div", { className: "hdl-scale-simulator-gate__icon" }, /* @__PURE__ */ React.createElement(ScaleGlyph, null)), /* @__PURE__ */ React.createElement("div", { className: "hdl-scale-simulator-gate__copy" }, /* @__PURE__ */ React.createElement("small", null, "ENGINEERING ACCESS"), /* @__PURE__ */ React.createElement("h2", null, "称重模拟器"), /* @__PURE__ */ React.createElement("p", null, "请输入工程密码以打开设备控制台")), /* @__PURE__ */ React.createElement("label", { className: passwordError ? "is-error" : "" }, /* @__PURE__ */ React.createElement("span", null, "访问密码"), /* @__PURE__ */ React.createElement("input", {
+		ref: passwordInputRef,
+		type: "password",
+		inputMode: "numeric",
+		autoComplete: "off",
+		maxLength: 4,
+		value: password,
+		"aria-invalid": passwordError,
+		onChange: (event) => {
+			setPassword(event.target.value.replace(/\D/g, "").slice(0, 4));
+			setPasswordError(false);
+		},
+		onKeyDown: (event) => {
+			if (event.key === "Escape") onAuthClose();
+		}
+	})), passwordError ? /* @__PURE__ */ React.createElement("p", {
+		className: "hdl-scale-simulator-gate__error",
+		role: "alert"
+	}, "密码不正确，请重新输入。") : null, /* @__PURE__ */ React.createElement("div", { className: "hdl-scale-simulator-gate__actions" }, /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		onClick: onAuthClose
+	}, "取消"), /* @__PURE__ */ React.createElement("button", {
+		type: "submit",
+		className: "is-primary"
+	}, "打开控制台")))) : null, panelOpen ? /* @__PURE__ */ React.createElement("aside", {
+		ref: panelRef,
+		className: `hdl-scale-simulator-panel${minimized ? " is-minimized" : ""}`,
+		style: {
+			left: position.x,
+			top: position.y
+		},
+		"aria-label": "称重模拟器控制台"
+	}, /* @__PURE__ */ React.createElement("header", {
+		className: "hdl-scale-simulator-panel__header",
+		onPointerDown: startDrag
+	}, /* @__PURE__ */ React.createElement("span", { className: "hdl-scale-simulator-panel__brand" }, /* @__PURE__ */ React.createElement(ScaleGlyph, null)), /* @__PURE__ */ React.createElement("span", { className: "hdl-scale-simulator-panel__title" }, /* @__PURE__ */ React.createElement("small", null, "DEVICE LAB"), /* @__PURE__ */ React.createElement("strong", null, "称重模拟器")), /* @__PURE__ */ React.createElement("span", { className: `hdl-scale-simulator-panel__availability ${apiAvailable ? "is-online" : "is-offline"}` }, /* @__PURE__ */ React.createElement("i", null), apiAvailable ? `API v${api === null || api === void 0 ? void 0 : api.version}` : "API 未连接"), /* @__PURE__ */ React.createElement("span", { className: "hdl-scale-simulator-panel__window-actions" }, /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		"aria-label": minimized ? "还原称重模拟器" : "最小化称重模拟器",
+		onClick: () => setMinimized((current) => !current)
+	}, /* @__PURE__ */ React.createElement(MinimizeIcon, { minimized })), /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		"aria-label": "关闭称重模拟器",
+		onClick: closePanel
+	}, /* @__PURE__ */ React.createElement(CloseIcon, null)))), !minimized ? /* @__PURE__ */ React.createElement("div", { className: "hdl-scale-simulator-panel__body" }, !apiAvailable ? /* @__PURE__ */ React.createElement("div", {
+		className: "hdl-scale-simulator-panel__unavailable",
+		role: "status"
+	}, /* @__PURE__ */ React.createElement("strong", null, "未检测到 Android 称重模拟 API"), /* @__PURE__ */ React.createElement("p", null, "请确认当前是已启用模拟能力的 Android 测试包，并重新检测。"), /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		onClick: () => setApiRevision((current) => current + 1)
+	}, "重新检测")) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("section", { className: "hdl-scale-simulator-readout" }, /* @__PURE__ */ React.createElement("div", { className: "hdl-scale-simulator-readout__screen" }, /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("i", { "aria-hidden": "true" }), "NET WEIGHT"), /* @__PURE__ */ React.createElement("strong", null, (displayWeight / 1e3).toFixed(3)), /* @__PURE__ */ React.createElement("b", null, "kg"), /* @__PURE__ */ React.createElement("small", null, displayWeight.toFixed(0), " g")), /* @__PURE__ */ React.createElement("div", { className: "hdl-scale-simulator-readout__telemetry" }, /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("small", null, "设备连接"), /* @__PURE__ */ React.createElement("strong", { className: `is-${snapshot === null || snapshot === void 0 ? void 0 : snapshot.connectionState}` }, snapshot ? CONNECTION_LABELS[snapshot.connectionState] : "未知")), /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("small", null, "读数状态"), /* @__PURE__ */ React.createElement("strong", null, (_STATUS_OPTIONS$find$ = (_STATUS_OPTIONS$find = STATUS_OPTIONS.find((option) => option.value === (snapshot === null || snapshot === void 0 ? void 0 : snapshot.status))) === null || _STATUS_OPTIONS$find === void 0 ? void 0 : _STATUS_OPTIONS$find.label) !== null && _STATUS_OPTIONS$find$ !== void 0 ? _STATUS_OPTIONS$find$ : "未知")), /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("small", null, "业务监听"), /* @__PURE__ */ React.createElement("strong", null, (snapshot === null || snapshot === void 0 ? void 0 : snapshot.isWeighing) ? "运行中" : "未启动")), /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("small", null, "场景脚本"), /* @__PURE__ */ React.createElement("strong", null, (snapshot === null || snapshot === void 0 ? void 0 : snapshot.isPlaying) ? "播放中" : "已停止")))), !(snapshot === null || snapshot === void 0 ? void 0 : snapshot.isWeighing) ? /* @__PURE__ */ React.createElement("p", { className: "hdl-scale-simulator-panel__notice" }, "当前称重业务尚未启动监听。控制值会保留，但业务页面启动称重后才会收到读数。") : null, /* @__PURE__ */ React.createElement("section", { className: "hdl-scale-simulator-section" }, /* @__PURE__ */ React.createElement("div", { className: "hdl-scale-simulator-section__heading" }, /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("small", null, "MANUAL INPUT"), /* @__PURE__ */ React.createElement("strong", null, "手动称重")), /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		className: "is-subtle",
+		onClick: () => runAction((simulator) => simulator.reset())
+	}, "重置设备")), /* @__PURE__ */ React.createElement("div", { className: "hdl-scale-simulator-manual" }, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("span", null, "原始重量"), /* @__PURE__ */ React.createElement("span", { className: "hdl-scale-simulator-manual__input" }, /* @__PURE__ */ React.createElement("input", {
+		type: "number",
+		step: "1",
+		"aria-label": "原始重量",
+		value: manualWeight,
+		onChange: (event) => setManualWeight(event.target.value)
+	}), /* @__PURE__ */ React.createElement("b", null, "g"))), /* @__PURE__ */ React.createElement("fieldset", null, /* @__PURE__ */ React.createElement("legend", null, "重量状态"), /* @__PURE__ */ React.createElement("span", null, STATUS_OPTIONS.map((option) => /* @__PURE__ */ React.createElement("button", {
+		key: option.value,
+		type: "button",
+		className: manualStatus === option.value ? "is-active" : "",
+		onClick: () => setManualStatus(option.value)
+	}, option.label)))), /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		className: "hdl-scale-simulator-manual__apply",
+		onClick: applyManualWeight
+	}, "应用读数"))), /* @__PURE__ */ React.createElement("section", { className: "hdl-scale-simulator-section" }, /* @__PURE__ */ React.createElement("div", { className: "hdl-scale-simulator-section__heading" }, /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("small", null, "REAL-WORLD PRESETS"), /* @__PURE__ */ React.createElement("strong", null, "实际场景")), (snapshot === null || snapshot === void 0 ? void 0 : snapshot.isPlaying) ? /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		className: "is-stop",
+		onClick: () => runAction((simulator) => simulator.stopPlayback())
+	}, "停止场景") : null), /* @__PURE__ */ React.createElement("div", { className: "hdl-scale-simulator-presets" }, /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		onClick: playPlaceItem
+	}, /* @__PURE__ */ React.createElement("span", null, "01"), /* @__PURE__ */ React.createElement("strong", null, "放上 2kg 商品"), /* @__PURE__ */ React.createElement("small", null, "波动后稳定")), /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		onClick: playRemoveItem
+	}, /* @__PURE__ */ React.createElement("span", null, "02"), /* @__PURE__ */ React.createElement("strong", null, "取走商品"), /* @__PURE__ */ React.createElement("small", null, "逐步回落归零")), /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		onClick: playJitter
+	}, /* @__PURE__ */ React.createElement("span", null, "03"), /* @__PURE__ */ React.createElement("strong", null, "持续抖动"), /* @__PURE__ */ React.createElement("small", null, "循环不稳定读数")), /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		onClick: playReconnect
+	}, /* @__PURE__ */ React.createElement("span", null, "04"), /* @__PURE__ */ React.createElement("strong", null, "断线重连"), /* @__PURE__ */ React.createElement("small", null, "断开、连接中、恢复")), /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		onClick: () => runAction((simulator) => simulator.overload())
+	}, /* @__PURE__ */ React.createElement("span", null, "05"), /* @__PURE__ */ React.createElement("strong", null, "设备超载"), /* @__PURE__ */ React.createElement("small", null, "30kg overload")), /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		onClick: () => runAction((simulator) => simulator.setWeight(-50))
+	}, /* @__PURE__ */ React.createElement("span", null, "06"), /* @__PURE__ */ React.createElement("strong", null, "负数读数"), /* @__PURE__ */ React.createElement("small", null, "-50g negative")), /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		onClick: () => runAction((simulator) => simulator.zero())
+	}, /* @__PURE__ */ React.createElement("span", null, "07"), /* @__PURE__ */ React.createElement("strong", null, "快速归零"), /* @__PURE__ */ React.createElement("small", null, "0g stable")), /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		onClick: () => runAction((simulator) => simulator.disconnect())
+	}, /* @__PURE__ */ React.createElement("span", null, "08"), /* @__PURE__ */ React.createElement("strong", null, "立即断开"), /* @__PURE__ */ React.createElement("small", null, "disconnected")))), actionError ? /* @__PURE__ */ React.createElement("p", {
+		className: "hdl-scale-simulator-panel__error",
+		role: "alert"
+	}, actionError) : null)) : null) : null);
+}
+//#endregion
+export { ScaleSimulatorConsole as default, isScaleSimulatorApiAvailable };