@pisell/private-materials 6.12.167 → 6.12.169

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

@@ -0,0 +1,621 @@
+.pisell-hdl-kiosk {
+  .hdl-entry-brand-mark {
+    appearance: none;
+    padding: 0;
+    cursor: pointer;
+    transition: transform 160ms ease, filter 160ms ease;
+  }
+
+  .hdl-entry-brand-mark:hover {
+    filter: brightness(1.12);
+    transform: rotate(-7deg) scale(1.035);
+  }
+
+  .hdl-entry-brand-mark:active {
+    transform: rotate(-7deg) scale(0.97);
+  }
+
+  .hdl-scale-simulator-gate {
+    position: fixed;
+    z-index: 90;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    padding: 28px;
+    background: radial-gradient(circle at 50% 40%, rgba(51, 176, 151, 0.12), transparent 38%), rgba(4, 8, 12, 0.76);
+    backdrop-filter: blur(18px) saturate(0.8);
+  }
+
+  .hdl-scale-simulator-gate__card {
+    position: relative;
+    display: grid;
+    width: min(520px, calc(100vw - 48px));
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    border-radius: 32px;
+    padding: 40px;
+    background: linear-gradient(145deg, rgba(25, 34, 42, 0.98), rgba(8, 13, 18, 0.99));
+    color: #f8fbfc;
+    box-shadow: 0 36px 100px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  }
+
+  .hdl-scale-simulator-gate__card::before {
+    position: absolute;
+    top: -140px;
+    right: -120px;
+    width: 330px;
+    height: 330px;
+    border-radius: 50%;
+    background: rgba(50, 205, 167, 0.09);
+    content: '';
+    pointer-events: none;
+  }
+
+  .hdl-scale-simulator-gate__icon {
+    position: relative;
+    display: grid;
+    width: 76px;
+    height: 76px;
+    place-items: center;
+    border: 1px solid rgba(104, 235, 203, 0.26);
+    border-radius: 24px;
+    background: linear-gradient(145deg, rgba(47, 201, 166, 0.2), rgba(47, 201, 166, 0.05));
+    color: #6ee8c9;
+    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.24);
+  }
+
+  .hdl-scale-simulator-gate__icon svg,
+  .hdl-scale-simulator-panel__brand svg {
+    width: 45px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.8;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .hdl-scale-simulator-gate__copy {
+    position: relative;
+    margin-top: 26px;
+  }
+
+  .hdl-scale-simulator-gate__copy small,
+  .hdl-scale-simulator-panel__title small,
+  .hdl-scale-simulator-section__heading small {
+    color: #66dfc1;
+    font-size: 11px;
+    font-weight: 900;
+    letter-spacing: 0.18em;
+  }
+
+  .hdl-scale-simulator-gate__copy h2 {
+    margin: 7px 0 8px;
+    color: #fff;
+    font-size: 30px;
+    line-height: 1.15;
+    font-weight: 900;
+  }
+
+  .hdl-scale-simulator-gate__copy p {
+    margin: 0;
+    color: rgba(232, 242, 246, 0.58);
+    font-size: 15px;
+  }
+
+  .hdl-scale-simulator-gate__card > label {
+    display: grid;
+    gap: 9px;
+    margin-top: 28px;
+    color: rgba(236, 244, 247, 0.72);
+    font-size: 13px;
+    font-weight: 800;
+  }
+
+  .hdl-scale-simulator-gate__card > label input {
+    width: 100%;
+    height: 58px;
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    border-radius: 16px;
+    outline: 0;
+    padding: 0 18px;
+    background: rgba(255, 255, 255, 0.06);
+    color: #fff;
+    font-size: 26px;
+    font-weight: 800;
+    letter-spacing: 0.42em;
+  }
+
+  .hdl-scale-simulator-gate__card > label input:focus {
+    border-color: rgba(104, 235, 203, 0.7);
+    box-shadow: 0 0 0 4px rgba(104, 235, 203, 0.1);
+  }
+
+  .hdl-scale-simulator-gate__card > label.is-error input {
+    border-color: rgba(255, 104, 104, 0.8);
+  }
+
+  .hdl-scale-simulator-gate__error {
+    margin: 9px 0 0;
+    color: #ff9999;
+    font-size: 13px;
+    font-weight: 700;
+  }
+
+  .hdl-scale-simulator-gate__actions {
+    display: grid;
+    grid-template-columns: 1fr 1.45fr;
+    gap: 12px;
+    margin-top: 28px;
+  }
+
+  .hdl-scale-simulator-gate__actions button {
+    min-height: 52px;
+    border: 1px solid rgba(255, 255, 255, 0.13);
+    border-radius: 15px;
+    background: rgba(255, 255, 255, 0.05);
+    color: rgba(255, 255, 255, 0.76);
+    font-size: 15px;
+    font-weight: 850;
+    cursor: pointer;
+  }
+
+  .hdl-scale-simulator-gate__actions button.is-primary {
+    border-color: transparent;
+    background: linear-gradient(135deg, #3ed0ad, #159b7e);
+    color: #04130f;
+    box-shadow: 0 12px 28px rgba(26, 178, 143, 0.22);
+  }
+
+  .hdl-scale-simulator-panel {
+    position: fixed;
+    z-index: 80;
+    width: min(720px, calc(100vw - 24px));
+    max-height: calc(100vh - 20px);
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.13);
+    border-radius: 25px;
+    background: #0c1218;
+    color: #edf5f6;
+    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  }
+
+  .hdl-scale-simulator-panel.is-minimized {
+    width: min(420px, calc(100vw - 24px));
+  }
+
+  .hdl-scale-simulator-panel__header {
+    display: grid;
+    min-height: 76px;
+    grid-template-columns: 45px minmax(0, 1fr) max-content max-content;
+    align-items: center;
+    gap: 13px;
+    padding: 12px 14px 12px 17px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    background: radial-gradient(circle at 8% 0%, rgba(55, 213, 175, 0.13), transparent 34%), linear-gradient(180deg, #182129, #111820);
+    cursor: grab;
+    touch-action: none;
+    user-select: none;
+  }
+
+  .hdl-scale-simulator-panel__brand {
+    display: grid;
+    width: 45px;
+    height: 45px;
+    place-items: center;
+    border: 1px solid rgba(83, 224, 190, 0.2);
+    border-radius: 14px;
+    background: rgba(64, 208, 174, 0.1);
+    color: #65e0c2;
+  }
+
+  .hdl-scale-simulator-panel__brand svg {
+    width: 29px;
+  }
+
+  .hdl-scale-simulator-panel__title {
+    display: grid;
+    min-width: 0;
+    gap: 2px;
+  }
+
+  .hdl-scale-simulator-panel__title strong {
+    color: #f7fbfc;
+    font-size: 17px;
+    font-weight: 900;
+  }
+
+  .hdl-scale-simulator-panel__availability {
+    display: inline-flex;
+    min-height: 30px;
+    align-items: center;
+    gap: 7px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 999px;
+    padding: 5px 10px;
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 11px;
+    font-weight: 800;
+    white-space: nowrap;
+  }
+
+  .hdl-scale-simulator-panel__availability i {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: #ff7a7a;
+  }
+
+  .hdl-scale-simulator-panel__availability.is-online i {
+    background: #56e4bd;
+    box-shadow: 0 0 10px rgba(86, 228, 189, 0.62);
+  }
+
+  .hdl-scale-simulator-panel__window-actions {
+    display: inline-flex;
+    gap: 5px;
+  }
+
+  .hdl-scale-simulator-panel__window-actions button {
+    display: grid;
+    width: 38px;
+    height: 38px;
+    place-items: center;
+    border: 0;
+    border-radius: 12px;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.62);
+    cursor: pointer;
+  }
+
+  .hdl-scale-simulator-panel__window-actions button:hover {
+    background: rgba(255, 255, 255, 0.08);
+    color: #fff;
+  }
+
+  .hdl-scale-simulator-panel__window-actions button:last-child:hover {
+    background: rgba(234, 69, 78, 0.18);
+    color: #ff9da3;
+  }
+
+  .hdl-scale-simulator-panel__window-actions svg {
+    width: 20px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+  }
+
+  .hdl-scale-simulator-panel__body {
+    max-height: calc(100vh - 106px);
+    overflow: auto;
+    padding: 18px;
+    background: radial-gradient(circle at 100% 0%, rgba(64, 202, 171, 0.055), transparent 34%), #0c1218;
+    scrollbar-color: rgba(104, 235, 203, 0.28) transparent;
+  }
+
+  .hdl-scale-simulator-panel__unavailable {
+    display: grid;
+    min-height: 270px;
+    place-items: center;
+    align-content: center;
+    border: 1px dashed rgba(255, 255, 255, 0.13);
+    border-radius: 19px;
+    padding: 34px;
+    background: rgba(255, 255, 255, 0.025);
+    text-align: center;
+  }
+
+  .hdl-scale-simulator-panel__unavailable p {
+    max-width: 390px;
+    margin: 10px 0 20px;
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 13px;
+    line-height: 1.6;
+  }
+
+  .hdl-scale-simulator-panel__unavailable button,
+  .hdl-scale-simulator-section__heading button {
+    min-height: 34px;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 10px;
+    padding: 5px 13px;
+    background: rgba(255, 255, 255, 0.05);
+    color: rgba(255, 255, 255, 0.72);
+    font-size: 12px;
+    font-weight: 800;
+    cursor: pointer;
+  }
+
+  .hdl-scale-simulator-readout {
+    display: grid;
+    grid-template-columns: minmax(250px, 0.86fr) minmax(280px, 1.14fr);
+    gap: 14px;
+  }
+
+  .hdl-scale-simulator-readout__screen {
+    display: grid;
+    min-height: 174px;
+    grid-template-columns: 1fr auto;
+    align-content: center;
+    overflow: hidden;
+    border: 1px solid rgba(92, 238, 201, 0.24);
+    border-radius: 18px;
+    padding: 21px 22px;
+    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 4px), linear-gradient(145deg, #102c29, #071815);
+    box-shadow: inset 0 0 34px rgba(69, 231, 190, 0.05), 0 13px 28px rgba(0, 0, 0, 0.22);
+  }
+
+  .hdl-scale-simulator-readout__screen > span {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    grid-column: 1 / -1;
+    color: rgba(114, 239, 208, 0.52);
+    font: 900 10px ui-monospace, SFMono-Regular, Menlo, monospace;
+    letter-spacing: 0.17em;
+  }
+
+  .hdl-scale-simulator-readout__screen > span i {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: #62e6c5;
+    box-shadow: 0 0 9px rgba(81, 239, 200, 0.55);
+  }
+
+  .hdl-scale-simulator-readout__screen strong {
+    color: #7af3d4;
+    font: 500 47px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
+    letter-spacing: -0.06em;
+    text-shadow: 0 0 22px rgba(81, 239, 200, 0.24);
+  }
+
+  .hdl-scale-simulator-readout__screen b {
+    align-self: end;
+    margin: 0 0 7px 9px;
+    color: rgba(122, 243, 212, 0.62);
+    font: 14px ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+
+  .hdl-scale-simulator-readout__screen small {
+    grid-column: 1 / -1;
+    color: rgba(122, 243, 212, 0.38);
+    font: 11px ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+
+  .hdl-scale-simulator-readout__telemetry {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 9px;
+  }
+
+  .hdl-scale-simulator-readout__telemetry > span {
+    display: grid;
+    min-height: 80px;
+    align-content: center;
+    gap: 7px;
+    border: 1px solid rgba(255, 255, 255, 0.07);
+    border-radius: 15px;
+    padding: 13px 15px;
+    background: rgba(255, 255, 255, 0.03);
+  }
+
+  .hdl-scale-simulator-readout__telemetry small {
+    color: rgba(255, 255, 255, 0.38);
+    font-size: 11px;
+  }
+
+  .hdl-scale-simulator-readout__telemetry strong {
+    color: rgba(255, 255, 255, 0.84);
+    font-size: 14px;
+  }
+
+  .hdl-scale-simulator-readout__telemetry strong.is-connected { color: #61e6c4; }
+  .hdl-scale-simulator-readout__telemetry strong.is-connecting { color: #f1c96d; }
+  .hdl-scale-simulator-readout__telemetry strong.is-disconnected { color: #ff8b91; }
+
+  .hdl-scale-simulator-panel__notice,
+  .hdl-scale-simulator-panel__error {
+    margin: 12px 0 0;
+    border: 1px solid rgba(240, 190, 91, 0.14);
+    border-radius: 12px;
+    padding: 10px 13px;
+    background: rgba(240, 190, 91, 0.06);
+    color: rgba(250, 218, 149, 0.76);
+    font-size: 11px;
+    font-weight: 700;
+    line-height: 1.5;
+  }
+
+  .hdl-scale-simulator-section {
+    margin-top: 16px;
+    border: 1px solid rgba(255, 255, 255, 0.075);
+    border-radius: 18px;
+    padding: 16px;
+    background: rgba(255, 255, 255, 0.022);
+  }
+
+  .hdl-scale-simulator-section__heading {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 14px;
+    margin-bottom: 14px;
+  }
+
+  .hdl-scale-simulator-section__heading > span {
+    display: grid;
+    gap: 2px;
+  }
+
+  .hdl-scale-simulator-section__heading strong {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 16px;
+  }
+
+  .hdl-scale-simulator-section__heading button.is-stop {
+    border-color: rgba(255, 102, 112, 0.18);
+    background: rgba(255, 73, 86, 0.08);
+    color: #ff9ca3;
+  }
+
+  .hdl-scale-simulator-manual {
+    display: grid;
+    grid-template-columns: minmax(150px, 0.85fr) minmax(250px, 1.35fr) 105px;
+    align-items: end;
+    gap: 10px;
+  }
+
+  .hdl-scale-simulator-manual label,
+  .hdl-scale-simulator-manual fieldset {
+    display: grid;
+    min-width: 0;
+    gap: 7px;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    color: rgba(255, 255, 255, 0.42);
+    font-size: 10px;
+    font-weight: 800;
+  }
+
+  .hdl-scale-simulator-manual legend { margin-bottom: 7px; padding: 0; }
+
+  .hdl-scale-simulator-manual__input {
+    display: grid;
+    height: 44px;
+    grid-template-columns: minmax(0, 1fr) 34px;
+    align-items: center;
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 11px;
+    background: rgba(255, 255, 255, 0.04);
+  }
+
+  .hdl-scale-simulator-manual__input input {
+    width: 100%;
+    height: 42px;
+    border: 0;
+    outline: 0;
+    padding: 0 11px;
+    background: transparent;
+    color: #fff;
+    font: 800 15px ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+
+  .hdl-scale-simulator-manual__input b {
+    color: rgba(255, 255, 255, 0.38);
+    font-size: 11px;
+  }
+
+  .hdl-scale-simulator-manual fieldset > span {
+    display: grid;
+    height: 44px;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 3px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 11px;
+    padding: 3px;
+    background: rgba(0, 0, 0, 0.16);
+  }
+
+  .hdl-scale-simulator-manual fieldset button {
+    border: 0;
+    border-radius: 8px;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.45);
+    font-size: 11px;
+    font-weight: 800;
+    cursor: pointer;
+  }
+
+  .hdl-scale-simulator-manual fieldset button.is-active {
+    background: rgba(83, 224, 190, 0.14);
+    color: #71e8cb;
+  }
+
+  .hdl-scale-simulator-manual__apply {
+    height: 44px;
+    border: 0;
+    border-radius: 11px;
+    background: linear-gradient(135deg, #42d4b0, #189c80);
+    color: #041511;
+    font-size: 12px;
+    font-weight: 900;
+    cursor: pointer;
+  }
+
+  .hdl-scale-simulator-presets {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 8px;
+  }
+
+  .hdl-scale-simulator-presets > button {
+    position: relative;
+    display: grid;
+    min-height: 92px;
+    align-content: center;
+    gap: 4px;
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.075);
+    border-radius: 13px;
+    padding: 12px;
+    background: linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
+    color: #fff;
+    text-align: left;
+    cursor: pointer;
+    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
+  }
+
+  .hdl-scale-simulator-presets > button:hover {
+    border-color: rgba(92, 230, 197, 0.25);
+    background: rgba(68, 214, 178, 0.07);
+    transform: translateY(-1px);
+  }
+
+  .hdl-scale-simulator-presets > button > span {
+    position: absolute;
+    top: 8px;
+    right: 9px;
+    color: rgba(105, 231, 200, 0.2);
+    font: 900 18px ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+
+  .hdl-scale-simulator-presets strong {
+    position: relative;
+    color: rgba(255, 255, 255, 0.85);
+    font-size: 12px;
+  }
+
+  .hdl-scale-simulator-presets small {
+    position: relative;
+    color: rgba(255, 255, 255, 0.34);
+    font-size: 9px;
+    line-height: 1.35;
+  }
+
+  .hdl-scale-simulator-panel__error {
+    border-color: rgba(255, 94, 106, 0.18);
+    background: rgba(255, 70, 83, 0.07);
+    color: #ff9aa1;
+  }
+}
+
+@media (max-width: 760px) {
+  .pisell-hdl-kiosk {
+    .hdl-scale-simulator-panel__availability { display: none; }
+    .hdl-scale-simulator-panel__header { grid-template-columns: 45px minmax(0, 1fr) max-content; }
+    .hdl-scale-simulator-readout { grid-template-columns: 1fr; }
+    .hdl-scale-simulator-manual { grid-template-columns: 1fr; }
+    .hdl-scale-simulator-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pisell-hdl-kiosk .hdl-entry-brand-mark,
+  .pisell-hdl-kiosk .hdl-scale-simulator-presets > button {
+    transition: none;
+  }
+}

package/es/components/HDLKiosk/{app → ui}/ScreenRenderer.js

@@ -3,11 +3,11 @@ import { BlockingNotice } from "../components/common/BlockingNotice/index.js";
 import { resolveHDLKioskView } from "./views.js";
 import React from "react";
 import { locales } from "@pisell/utils";
-//#region src/components/HDLKiosk/app/ScreenRenderer.tsx
+//#region src/components/HDLKiosk/ui/ScreenRenderer.tsx
 /**
 * 文件角色：把当前 Workflow Node 交给其 Slice 自有 View 渲染。
-* 运行机制：从应用 View 注册表按 Activity 读取同步组件；Modal 节点先渲染 base
-* Slice，再叠加当前 Slice View。
+* 运行机制：从应用 View 注册表按 Activity 读取同步组件；先渲染 Actor
+* Surface 保留的 Page，再按顺序叠加 Modal Slice View。
 * 边界：只组装 View Context，不调用 Host、不创建 ViewModel、不决定下一节点。
 */
 function ScreenRenderer({ definition, snapshot, sales, send, commandState = { busy: false }, resetting, capabilities, businessMode = "prototype", scaleMinimumWeightKg = .01, renderIdentityAuth, memberAction = {
@@ -22,10 +22,10 @@ function ScreenRenderer({ definition, snapshot, sales, send, commandState = { bu
 	methods: [],
 	loading: false
 } }) {
-	var _activeNode$presentat, _commandState$error;
+	var _definition$nodes$sna, _commandState$error;
 	const activeNode = definition.nodes[snapshot.nodeId];
-	const modalBaseNodeId = ((_activeNode$presentat = activeNode.presentation) === null || _activeNode$presentat === void 0 ? void 0 : _activeNode$presentat.mode) === "modal" ? activeNode.presentation.base : void 0;
-	const renderedNode = definition.nodes[modalBaseNodeId !== null && modalBaseNodeId !== void 0 ? modalBaseNodeId : snapshot.nodeId];
+	const pageNode = (_definition$nodes$sna = definition.nodes[snapshot.surface.pageStepId]) !== null && _definition$nodes$sna !== void 0 ? _definition$nodes$sna : activeNode;
+	const overlayNodes = snapshot.surface.overlays.map((stepId) => definition.nodes[stepId]).filter((node) => Boolean(node));
 	const bindActivity = (activityId) => (action) => {
 		send(action.kind === "intent" || action.kind === "navigation" ? _objectSpread2(_objectSpread2({}, action), {}, { activityId }) : action);
 	};
@@ -64,7 +64,7 @@ function ScreenRenderer({ definition, snapshot, sales, send, commandState = { bu
 		};
 		return /* @__PURE__ */ React.createElement(SliceView, context);
 	};
-	return /* @__PURE__ */ React.createElement(React.Fragment, null, renderNode(renderedNode), modalBaseNodeId ? renderNode(activeNode) : null);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, renderNode(pageNode), overlayNodes.map((node) => /* @__PURE__ */ React.createElement(React.Fragment, { key: node.id }, renderNode(node))));
 }
 //#endregion
 export { ScreenRenderer };