@pisell/private-materials 6.12.168 → 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,7 +3,7 @@ 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 读取同步组件；先渲染 Actor

package/es/components/HDLKiosk/ui/controllers/useHDLKioskActionDispatcher.js

@@ -0,0 +1,66 @@
+import { createWorkflowEvent } from "../workflowEvent.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/components/HDLKiosk/ui/controllers/useHDLKioskActionDispatcher.ts
+/**
+* 文件角色：把 Slice UI Action 适配为当前 Workflow Session 的 Event 或 Command。
+* 运行机制：统一生成 intent ID，并只投影当前节点发起的 Screen Command 状态。
+* 边界：不决定业务跳转、不解释 Operation 结果，也不拥有 Session 生命周期。
+*/
+function useHDLKioskActionDispatcher({ session, snapshot, activityId, resetSession }) {
+	const intentSequence = useRef(0);
+	const commandSequence = useRef(0);
+	const commandGeneration = useRef(0);
+	const pendingCommands = useRef(/* @__PURE__ */ new Map());
+	const [commandState, setCommandState] = useState({ busy: false });
+	useEffect(() => {
+		commandGeneration.current += 1;
+		pendingCommands.current.clear();
+		setCommandState({ busy: false });
+		return () => {
+			commandGeneration.current += 1;
+			pendingCommands.current.clear();
+		};
+	}, [session, snapshot.nodeId]);
+	return {
+		send: useCallback((action) => {
+			if (action.kind === "session") {
+				resetSession();
+				return;
+			}
+			intentSequence.current += 1;
+			const intentId = `ui:${snapshot.sessionEpoch}:${intentSequence.current}`;
+			if (action.kind === "intent" || action.kind === "navigation") {
+				const event = createWorkflowEvent(action, activityId, snapshot.nodeId, intentId);
+				if (event) session.dispatch(event);
+				return;
+			}
+			commandSequence.current += 1;
+			const execution = commandSequence.current;
+			const generation = commandGeneration.current;
+			pendingCommands.current.set(execution, action.command);
+			setCommandState({
+				busy: true,
+				commandId: action.command
+			});
+			session.executeCommand(action.command, action.input, intentId).then((result) => {
+				if (generation !== commandGeneration.current) return;
+				pendingCommands.current.delete(execution);
+				const remaining = [...pendingCommands.current.values()];
+				setCommandState({
+					busy: remaining.length > 0,
+					commandId: remaining[remaining.length - 1],
+					error: result.status === "failed" || result.status === "partialFailure" || result.status === "unknown" ? result.error : void 0
+				});
+			});
+		}, [
+			activityId,
+			resetSession,
+			session,
+			snapshot.nodeId,
+			snapshot.sessionEpoch
+		]),
+		commandState
+	};
+}
+//#endregion
+export { useHDLKioskActionDispatcher };

package/es/components/HDLKiosk/{runtime → ui}/controllers/useHDLKioskCustomerController.js

@@ -1,6 +1,6 @@
 import { _asyncToGenerator } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/asyncToGenerator.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-//#region src/components/HDLKiosk/runtime/controllers/useHDLKioskCustomerController.ts
+//#region src/components/HDLKiosk/ui/controllers/useHDLKioskCustomerController.ts
 /**
 * 文件角色：协调 Shell 全程可用的会员入口与插入式身份同步。
 * 运行机制：登录成功后通过 identity.sync 写入客户并触发订单一致性/重报价；再根据最新