feat: refactor vehicle and gesture control console
This commit is contained in:
vee
@@ -0,0 +1,667 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
const pageDefinitions = [
|
||||
{ index: 0, label: "整车联合数字孪生", shortLabel: "数字孪生", target: ".joint-twin-shell" },
|
||||
{ index: 1, label: "决策轨迹与校验", shortLabel: "决策校验", target: "#panel-trace" },
|
||||
{ index: 2, label: "指令配置与硬件映射", shortLabel: "配置映射", target: "#panel-config" },
|
||||
{ index: 3, label: "CAN 编译计划", shortLabel: "CAN 计划", target: "#panel-plan" },
|
||||
{ index: 4, label: "执行结果与硬件回读", shortLabel: "执行回读", target: "#panel-result" },
|
||||
];
|
||||
|
||||
const $ = (selector, root = document) => root.querySelector(selector);
|
||||
const $$ = (selector, root = document) => [...root.querySelectorAll(selector)];
|
||||
|
||||
const ui = {
|
||||
role: sessionStorage.getItem("cognitive-agent.demo-role") === "admin" ? "admin" : "user",
|
||||
controlMode: sessionStorage.getItem("cognitive-agent.control-mode") === "gesture"
|
||||
? "gesture"
|
||||
: "natural",
|
||||
activePage: 0,
|
||||
sidebarCollapsed: sessionStorage.getItem("cognitive-agent.sidebar-collapsed") === "true",
|
||||
};
|
||||
|
||||
const dropdownControls = new Map();
|
||||
|
||||
function make(tag, className, html) {
|
||||
const node = document.createElement(tag);
|
||||
if (className) node.className = className;
|
||||
if (html != null) node.innerHTML = html;
|
||||
return node;
|
||||
}
|
||||
|
||||
function closeCustomDropdowns(except = null) {
|
||||
dropdownControls.forEach((control) => {
|
||||
if (control !== except) control.close();
|
||||
});
|
||||
}
|
||||
|
||||
function enhanceSelect(select) {
|
||||
if (!select || dropdownControls.has(select)) return;
|
||||
const shell = select.parentElement;
|
||||
if (!shell) return;
|
||||
|
||||
shell.classList.add("v2-custom-select");
|
||||
select.classList.add("v2-native-select");
|
||||
|
||||
const trigger = make("button", "v2-dropdown-trigger", `
|
||||
<span class="v2-dropdown-value"></span>
|
||||
<span class="v2-dropdown-caret" aria-hidden="true"></span>`);
|
||||
trigger.type = "button";
|
||||
trigger.setAttribute("aria-haspopup", "listbox");
|
||||
trigger.setAttribute("aria-expanded", "false");
|
||||
trigger.setAttribute("aria-label", select.getAttribute("aria-label") || "打开下拉菜单");
|
||||
|
||||
const menu = make("div", "v2-dropdown-menu", "");
|
||||
menu.id = `${select.id}Menu`;
|
||||
menu.hidden = true;
|
||||
menu.setAttribute("role", "listbox");
|
||||
menu.setAttribute("aria-label", select.getAttribute("aria-label") || "选项");
|
||||
trigger.setAttribute("aria-controls", menu.id);
|
||||
shell.append(trigger, menu);
|
||||
|
||||
const valueNode = $(".v2-dropdown-value", trigger);
|
||||
const render = () => {
|
||||
const selected = select.selectedOptions[0] || select.options[0];
|
||||
valueNode.textContent = selected?.textContent?.trim() || "请选择";
|
||||
trigger.disabled = select.disabled;
|
||||
menu.innerHTML = "";
|
||||
[...select.options].forEach((option) => {
|
||||
const item = make("button", "v2-dropdown-option", "");
|
||||
item.type = "button";
|
||||
item.dataset.value = option.value;
|
||||
item.textContent = option.textContent.trim();
|
||||
item.disabled = option.disabled;
|
||||
item.setAttribute("role", "option");
|
||||
item.setAttribute("aria-selected", String(option.value === select.value));
|
||||
menu.append(item);
|
||||
});
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
menu.hidden = true;
|
||||
shell.classList.remove("v2-dropdown-open");
|
||||
trigger.setAttribute("aria-expanded", "false");
|
||||
};
|
||||
|
||||
const open = () => {
|
||||
if (trigger.disabled) return;
|
||||
closeCustomDropdowns();
|
||||
render();
|
||||
menu.hidden = false;
|
||||
shell.classList.add("v2-dropdown-open");
|
||||
trigger.setAttribute("aria-expanded", "true");
|
||||
};
|
||||
|
||||
const control = { close, menu, open, select, shell, sync: render, trigger };
|
||||
dropdownControls.set(select, control);
|
||||
|
||||
trigger.addEventListener("click", (event) => {
|
||||
event.stopPropagation();
|
||||
if (menu.hidden) open();
|
||||
else close();
|
||||
});
|
||||
trigger.addEventListener("keydown", (event) => {
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
open();
|
||||
requestAnimationFrame(() => {
|
||||
$(".v2-dropdown-option[aria-selected=\"true\"]:not(:disabled)", menu)?.focus();
|
||||
});
|
||||
} else if (event.key === "Escape") {
|
||||
close();
|
||||
}
|
||||
});
|
||||
menu.addEventListener("click", (event) => {
|
||||
event.stopPropagation();
|
||||
const item = event.target.closest(".v2-dropdown-option");
|
||||
if (!item || item.disabled) return;
|
||||
select.value = item.dataset.value;
|
||||
select.dispatchEvent(new Event("change", { bubbles: true }));
|
||||
render();
|
||||
close();
|
||||
trigger.focus();
|
||||
});
|
||||
menu.addEventListener("keydown", (event) => {
|
||||
if (event.key !== "Escape") return;
|
||||
event.preventDefault();
|
||||
close();
|
||||
trigger.focus();
|
||||
});
|
||||
select.addEventListener("change", render);
|
||||
new MutationObserver(render).observe(select, {
|
||||
attributes: true,
|
||||
characterData: true,
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
render();
|
||||
}
|
||||
|
||||
function enhanceConfiguredDropdowns() {
|
||||
[$("#v2RoleSelect"), $("#vehicleSelect"), $("#v2ExecutionSelect")]
|
||||
.filter(Boolean)
|
||||
.forEach(enhanceSelect);
|
||||
}
|
||||
|
||||
function buildSidebar(commandPanel) {
|
||||
commandPanel.classList.add("v2-sidebar");
|
||||
commandPanel.innerHTML = "";
|
||||
|
||||
const profile = make("section", "v2-profile", `
|
||||
<div class="v2-avatar" aria-hidden="true"><span></span></div>
|
||||
<div class="v2-profile-copy">
|
||||
<small>WELCOME TO THE CABIN</small>
|
||||
<div class="v2-role-select">
|
||||
<span>Hi,</span>
|
||||
<select id="v2RoleSelect" aria-label="切换演示权限">
|
||||
<option value="user">user</option>
|
||||
<option value="admin">admin</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<button class="v2-sidebar-toggle" id="v2SidebarToggle" type="button" aria-label="折叠左侧控制台" aria-expanded="true">
|
||||
<i data-lucide="panel-left-close"></i>
|
||||
</button>`);
|
||||
|
||||
const control = make("section", "v2-sidebar-section v2-control-section", `
|
||||
<div class="v2-section-heading">
|
||||
<span>CONTROL DESK</span>
|
||||
<h2>控制台</h2>
|
||||
</div>
|
||||
<span class="v2-field-caption">控制方式</span>
|
||||
<div class="v2-control-switch" role="group" aria-label="控制方式">
|
||||
<button type="button" data-v2-control="natural"><i data-lucide="message-square-text"></i><span>自然语言控制</span></button>
|
||||
<button type="button" data-v2-control="gesture"><i data-lucide="scan-face"></i><span>手势控制</span></button>
|
||||
</div>`);
|
||||
|
||||
const config = make("section", "v2-sidebar-section v2-config-section", `
|
||||
<div class="v2-divider"></div>
|
||||
<span class="v2-field-caption">配置中心</span>
|
||||
<div class="v2-config-stack" id="v2ConfigStack"></div>`);
|
||||
|
||||
const footer = make("footer", "v2-sidebar-footer", `
|
||||
<span class="v2-live-dot"></span>
|
||||
<div><strong>智舱控制链路</strong><small id="v2ConnectionText">正在连接服务</small></div>
|
||||
<button type="button" id="v2LogoutButton" title="退出登录" aria-label="退出登录"><i data-lucide="log-out"></i></button>`);
|
||||
|
||||
commandPanel.append(profile, control, config, footer);
|
||||
$("#v2RoleSelect").value = ui.role;
|
||||
return $("#v2ConfigStack");
|
||||
}
|
||||
|
||||
function buildConfigFields(configStack, originalForm) {
|
||||
const vehicleField = $(".vehicle-field", originalForm);
|
||||
const providerField = $(".field-group:has(.segmented [data-provider])", originalForm);
|
||||
const executionField = $(".field-group:has(.execution-mode-options)", originalForm);
|
||||
const hardwareAccessField = $("#hardwareAccessField", originalForm);
|
||||
const simulationFaultField = $("#simulationFaultField", originalForm);
|
||||
const approvalField = $("#approvalField", originalForm);
|
||||
|
||||
if (vehicleField) {
|
||||
vehicleField.classList.add("v2-config-field", "v2-vehicle-field");
|
||||
configStack.append(vehicleField);
|
||||
}
|
||||
|
||||
const modelField = make("div", "v2-config-field v2-model-field", `
|
||||
<span class="field-label">推理模型</span>
|
||||
<div class="v2-static-select" id="v2ModelField">
|
||||
<i data-lucide="sparkles"></i>
|
||||
<strong id="v2ModelValue">模型检测中</strong>
|
||||
<span class="v2-field-state" id="v2ModelState">AUTO</span>
|
||||
</div>
|
||||
<p class="provider-note" id="v2ModelNote">模型由服务端安全配置</p>`);
|
||||
configStack.append(modelField);
|
||||
|
||||
const gestureModelField = make("div", "v2-config-field v2-gesture-model-field", `
|
||||
<span class="field-label">手势模型</span>
|
||||
<div class="v2-static-select" id="v2GestureModelField">
|
||||
<i data-lucide="scan-line"></i>
|
||||
<strong id="v2GestureModelValue">MediaPipe GR</strong>
|
||||
<span class="v2-field-state">VISION</span>
|
||||
</div>
|
||||
<small class="v2-gesture-model-note" id="v2GestureModelNote">Tasks Vision · 0.10.14</small>`);
|
||||
configStack.append(gestureModelField);
|
||||
|
||||
const userHardwareState = make("div", "v2-user-target-status", `
|
||||
<i></i><span id="v2UserTargetText">正在检查真实台架</span>`);
|
||||
configStack.append(userHardwareState);
|
||||
|
||||
if (providerField) {
|
||||
providerField.classList.add("v2-provider-field");
|
||||
providerField.hidden = true;
|
||||
configStack.append(providerField);
|
||||
}
|
||||
|
||||
const executionSelect = make("div", "v2-config-field v2-execution-field", `
|
||||
<label class="field-label" for="v2ExecutionSelect">执行目标</label>
|
||||
<div class="v2-select-shell">
|
||||
<i data-lucide="workflow"></i>
|
||||
<select id="v2ExecutionSelect" aria-label="选择执行目标">
|
||||
<option value="dry_run">虚拟 CAN</option>
|
||||
<option value="simulated_hardware">模拟台架</option>
|
||||
<option value="hardware">真实台架</option>
|
||||
</select>
|
||||
</div>
|
||||
<p class="provider-note" id="v2ExecutionNote">管理员可切换执行环境</p>`);
|
||||
configStack.append(executionSelect);
|
||||
|
||||
if (executionField) {
|
||||
executionField.classList.add("v2-native-execution-field");
|
||||
executionField.hidden = true;
|
||||
configStack.append(executionField);
|
||||
}
|
||||
|
||||
const advanced = make("div", "v2-advanced-stack", "");
|
||||
[hardwareAccessField, simulationFaultField, approvalField].forEach((field) => {
|
||||
if (!field) return;
|
||||
field.classList.add("v2-config-field", "v2-advanced-field");
|
||||
advanced.append(field);
|
||||
});
|
||||
configStack.append(advanced);
|
||||
}
|
||||
|
||||
function buildOperation(mainPanel, originalForm, panelHeading, modeRail, requestHeader, gestureDrawer) {
|
||||
const operation = make("section", "v2-operation-shell", `
|
||||
<div class="v2-operation-glow" aria-hidden="true"></div>
|
||||
<div class="v2-natural-panel" id="v2NaturalPanel"></div>
|
||||
<div class="v2-gesture-panel" id="v2GesturePanel"></div>`);
|
||||
mainPanel.prepend(operation);
|
||||
|
||||
const naturalPanel = $("#v2NaturalPanel");
|
||||
if (panelHeading) {
|
||||
panelHeading.classList.add("v2-operation-heading");
|
||||
const kicker = $(".section-kicker", panelHeading);
|
||||
const title = $("h2", panelHeading);
|
||||
const intro = $(".panel-intro", panelHeading);
|
||||
if (kicker) kicker.textContent = "自然语言控制";
|
||||
if (title) title.textContent = "一句话，调好整车";
|
||||
if (intro) intro.textContent = "座椅、空调、天幕与氛围灯，一句话联动完成";
|
||||
naturalPanel.append(panelHeading);
|
||||
}
|
||||
|
||||
const naturalGrid = make("div", "v2-natural-grid", "");
|
||||
originalForm.classList.add("v2-request-form");
|
||||
naturalGrid.append(originalForm);
|
||||
if (requestHeader) {
|
||||
requestHeader.classList.add("v2-request-status");
|
||||
naturalGrid.append(requestHeader);
|
||||
}
|
||||
naturalPanel.append(naturalGrid);
|
||||
if (modeRail) {
|
||||
modeRail.classList.add("v2-mode-rail");
|
||||
naturalPanel.append(modeRail);
|
||||
}
|
||||
|
||||
const gesturePanel = $("#v2GesturePanel");
|
||||
const gestureHeading = make("header", "v2-operation-heading v2-gesture-operation-heading", `
|
||||
<span class="section-kicker">手势控制</span>
|
||||
<h2>抬抬手，控制整车</h2>
|
||||
<p class="panel-intro">通过摄像头识别手势，直观控制车舱功能</p>`);
|
||||
gesturePanel.append(gestureHeading);
|
||||
if (gestureDrawer) {
|
||||
gestureDrawer.classList.add("v2-inline-gesture");
|
||||
const cameraStage = $(".gesture-camera-stage", gestureDrawer);
|
||||
const cameraToggle = $("#gestureStartButton", gestureDrawer);
|
||||
if (cameraStage && cameraToggle) {
|
||||
cameraToggle.classList.add("v2-camera-toggle");
|
||||
cameraToggle.setAttribute("aria-label", "开启摄像头");
|
||||
cameraToggle.setAttribute("title", "开启摄像头");
|
||||
cameraStage.append(cameraToggle);
|
||||
}
|
||||
gesturePanel.append(gestureDrawer);
|
||||
}
|
||||
return operation;
|
||||
}
|
||||
|
||||
function buildOutput(mainPanel) {
|
||||
const output = make("section", "v2-output-shell", `
|
||||
<header class="v2-output-heading">
|
||||
<div>
|
||||
<span class="v2-page-index" id="v2PageIndex">00</span>
|
||||
<div><small>INFORMATION OUTPUT</small><h2 id="v2PageTitle">整车联合数字孪生</h2></div>
|
||||
</div>
|
||||
<span class="v2-output-state"><i></i><span id="v2OutputState">LIVE STATE</span></span>
|
||||
</header>
|
||||
<div class="v2-output-content" id="v2OutputContent"></div>
|
||||
<nav class="v2-page-rail" id="v2PageRail" aria-label="管理员信息分页"></nav>`);
|
||||
mainPanel.append(output);
|
||||
|
||||
const content = $("#v2OutputContent");
|
||||
const twin = $(".joint-twin-shell", mainPanel);
|
||||
const resultWorkspace = $(".result-workspace", mainPanel);
|
||||
if (twin) content.append(twin);
|
||||
if (resultWorkspace) content.append(resultWorkspace);
|
||||
|
||||
pageDefinitions.forEach((page) => {
|
||||
const target = $(page.target, content);
|
||||
if (!target) return;
|
||||
target.dataset.v2Page = String(page.index);
|
||||
target.classList.add("v2-output-page");
|
||||
});
|
||||
|
||||
pageDefinitions.forEach((page) => {
|
||||
const button = make("button", "v2-page-button", `
|
||||
<span>${String(page.index).padStart(2, "0")}</span>
|
||||
<i></i>
|
||||
<strong>${page.shortLabel}</strong>`);
|
||||
button.type = "button";
|
||||
button.dataset.v2PageTarget = String(page.index);
|
||||
button.setAttribute("aria-label", `${String(page.index).padStart(2, "0")} ${page.label}`);
|
||||
$("#v2PageRail").append(button);
|
||||
});
|
||||
}
|
||||
|
||||
function setPage(pageIndex) {
|
||||
const maxPage = ui.role === "admin" ? pageDefinitions.length - 1 : 0;
|
||||
ui.activePage = Math.max(0, Math.min(Number(pageIndex) || 0, maxPage));
|
||||
const definition = pageDefinitions[ui.activePage];
|
||||
$(".v2-output-shell")?.classList.toggle("v2-twin-active", definition.index === 0);
|
||||
$$(".v2-output-page").forEach((page) => {
|
||||
const active = Number(page.dataset.v2Page) === ui.activePage;
|
||||
page.classList.toggle("v2-active-output", active);
|
||||
page.setAttribute("aria-hidden", active ? "false" : "true");
|
||||
});
|
||||
$$(".v2-page-button").forEach((button) => {
|
||||
const active = Number(button.dataset.v2PageTarget) === ui.activePage;
|
||||
button.classList.toggle("active", active);
|
||||
button.setAttribute("aria-current", active ? "page" : "false");
|
||||
});
|
||||
$("#v2PageIndex").textContent = String(definition.index).padStart(2, "0");
|
||||
$("#v2PageTitle").textContent = definition.label;
|
||||
$("#v2OutputState").textContent = definition.index === 0 ? "LIVE STATE" : "AUDIT VIEW";
|
||||
requestAnimationFrame(updateScrollCues);
|
||||
}
|
||||
|
||||
function updateScrollCues() {
|
||||
$$(".result-workspace .tab-panel").forEach((panel) => {
|
||||
const active = panel.classList.contains("v2-active-output");
|
||||
panel.classList.toggle(
|
||||
"v2-scrollable",
|
||||
active && panel.scrollHeight > panel.clientHeight + 6,
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function updateModeEdgeHints() {
|
||||
const chips = $(".v2-mode-rail .mode-chips");
|
||||
if (!chips) return;
|
||||
const buttons = $$('button', chips);
|
||||
buttons.forEach((button) => {
|
||||
button.classList.remove("v2-edge-fade-left", "v2-edge-fade-right");
|
||||
button.style.removeProperty("--v2-edge-fade-start");
|
||||
button.style.removeProperty("--v2-edge-fade-end");
|
||||
});
|
||||
if (buttons.length < 2 || chips.clientWidth <= 0) return;
|
||||
|
||||
const viewport = chips.getBoundingClientRect();
|
||||
const visible = buttons.map((button) => ({
|
||||
button,
|
||||
rect: button.getBoundingClientRect(),
|
||||
})).filter(({ rect }) => {
|
||||
return rect.right > viewport.left + 1 && rect.left < viewport.right - 1;
|
||||
});
|
||||
if (!visible.length) return;
|
||||
|
||||
const fadeSpan = 30;
|
||||
const firstVisible = visible[0];
|
||||
const lastVisible = visible[visible.length - 1];
|
||||
if (firstVisible.rect.left < viewport.left - 1) {
|
||||
const clippedAt = Math.min(100, Math.max(
|
||||
0,
|
||||
((viewport.left - firstVisible.rect.left) / firstVisible.rect.width) * 100,
|
||||
));
|
||||
firstVisible.button.style.setProperty("--v2-edge-fade-start", `${clippedAt}%`);
|
||||
firstVisible.button.style.setProperty(
|
||||
"--v2-edge-fade-end",
|
||||
`${Math.min(100, clippedAt + fadeSpan)}%`,
|
||||
);
|
||||
firstVisible.button.classList.add("v2-edge-fade-left");
|
||||
}
|
||||
if (lastVisible.rect.right > viewport.right + 1) {
|
||||
const clippedAt = Math.min(100, Math.max(
|
||||
0,
|
||||
((viewport.right - lastVisible.rect.left) / lastVisible.rect.width) * 100,
|
||||
));
|
||||
lastVisible.button.style.setProperty(
|
||||
"--v2-edge-fade-start",
|
||||
`${Math.max(0, clippedAt - fadeSpan)}%`,
|
||||
);
|
||||
lastVisible.button.style.setProperty("--v2-edge-fade-end", `${clippedAt}%`);
|
||||
lastVisible.button.classList.add("v2-edge-fade-right");
|
||||
}
|
||||
}
|
||||
|
||||
function setControlMode(mode, { triggerGesture = true } = {}) {
|
||||
ui.controlMode = mode === "gesture" ? "gesture" : "natural";
|
||||
sessionStorage.setItem("cognitive-agent.control-mode", ui.controlMode);
|
||||
document.body.dataset.controlMode = ui.controlMode;
|
||||
$$('[data-v2-control]').forEach((button) => {
|
||||
const active = button.dataset.v2Control === ui.controlMode;
|
||||
button.classList.toggle("active", active);
|
||||
button.setAttribute("aria-pressed", String(active));
|
||||
});
|
||||
requestAnimationFrame(updateModeEdgeHints);
|
||||
const drawer = $("#gestureDrawer");
|
||||
if (!triggerGesture) {
|
||||
const gestureVisible = ui.controlMode === "gesture";
|
||||
drawer?.setAttribute("aria-hidden", String(!gestureVisible));
|
||||
$("#gestureToggleButton")?.setAttribute("aria-expanded", String(gestureVisible));
|
||||
return;
|
||||
}
|
||||
if (ui.controlMode === "gesture") {
|
||||
if (!drawer?.classList.contains("open")) $("#gestureToggleButton")?.click();
|
||||
} else if (drawer?.classList.contains("open")) {
|
||||
$("#gestureCloseButton")?.click();
|
||||
}
|
||||
}
|
||||
|
||||
function setRole(role) {
|
||||
ui.role = role === "admin" ? "admin" : "user";
|
||||
sessionStorage.setItem("cognitive-agent.demo-role", ui.role);
|
||||
document.body.dataset.demoRole = ui.role;
|
||||
window.dispatchEvent(new CustomEvent("cognitive-agent:demo-role-change", {
|
||||
detail: { role: ui.role },
|
||||
}));
|
||||
$("#v2RoleSelect").value = ui.role;
|
||||
dropdownControls.get($("#v2RoleSelect"))?.sync();
|
||||
$("#v2PageRail").hidden = ui.role !== "admin";
|
||||
if (ui.role !== "admin") {
|
||||
setPage(0);
|
||||
requestUserHardwareMode();
|
||||
} else {
|
||||
const note = $("#v2ExecutionNote");
|
||||
if (note) note.textContent = "管理员可切换虚拟 CAN、模拟台架与真实台架";
|
||||
const runButton = $("#runButton");
|
||||
if (runButton && !runButton.classList.contains("loading")) runButton.disabled = false;
|
||||
syncExecutionSelector();
|
||||
}
|
||||
}
|
||||
|
||||
function setSidebarCollapsed(collapsed) {
|
||||
ui.sidebarCollapsed = Boolean(collapsed);
|
||||
sessionStorage.setItem(
|
||||
"cognitive-agent.sidebar-collapsed",
|
||||
String(ui.sidebarCollapsed),
|
||||
);
|
||||
document.body.classList.toggle("v2-sidebar-collapsed", ui.sidebarCollapsed);
|
||||
const button = $("#v2SidebarToggle");
|
||||
if (button) {
|
||||
button.setAttribute("aria-expanded", String(!ui.sidebarCollapsed));
|
||||
button.setAttribute(
|
||||
"aria-label",
|
||||
ui.sidebarCollapsed ? "展开左侧控制台" : "折叠左侧控制台",
|
||||
);
|
||||
button.innerHTML = `<i data-lucide="${ui.sidebarCollapsed ? "panel-left-open" : "panel-left-close"}"></i>`;
|
||||
}
|
||||
window.lucide?.createIcons({ attrs: { "aria-hidden": "true" } });
|
||||
window.setTimeout(() => window.dispatchEvent(new Event("resize")), 180);
|
||||
}
|
||||
|
||||
function requestUserHardwareMode() {
|
||||
const hardwareButton = $("#hardwareMode");
|
||||
const note = $("#v2ExecutionNote");
|
||||
const userTarget = $(".v2-user-target-status");
|
||||
const userTargetText = $("#v2UserTargetText");
|
||||
const runButton = $("#runButton");
|
||||
if (!hardwareButton) return;
|
||||
if (!hardwareButton.disabled) {
|
||||
if (!hardwareButton.classList.contains("active")) hardwareButton.click();
|
||||
if (note) note.textContent = "user 演示固定使用真实台架";
|
||||
if (userTarget) userTarget.dataset.state = "ready";
|
||||
if (userTargetText) userTargetText.textContent = "执行目标：真实台架";
|
||||
if (runButton && !runButton.classList.contains("loading")) runButton.disabled = false;
|
||||
} else if (note) {
|
||||
note.textContent = "真实台架尚未就绪，服务端安全门禁保持锁定";
|
||||
if (userTarget) userTarget.dataset.state = "locked";
|
||||
if (userTargetText) userTargetText.textContent = "真实台架尚未就绪";
|
||||
if (runButton) runButton.disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
function syncExecutionSelector() {
|
||||
const select = $("#v2ExecutionSelect");
|
||||
if (!select) return;
|
||||
const active = $('[data-execution-mode].active');
|
||||
if (active) select.value = active.dataset.executionMode;
|
||||
["dry_run", "simulated_hardware", "hardware"].forEach((value) => {
|
||||
const option = $(`option[value="${value}"]`, select);
|
||||
const button = $(`[data-execution-mode="${value}"]`);
|
||||
if (option && button) option.disabled = button.disabled;
|
||||
});
|
||||
dropdownControls.get(select)?.sync();
|
||||
}
|
||||
|
||||
function syncRuntimePresentation() {
|
||||
const modelBadge = $("#modelBadge");
|
||||
const connectionBadge = $("#connectionBadge");
|
||||
const modelValue = $("#v2ModelValue");
|
||||
const modelNote = $("#v2ModelNote");
|
||||
const connectionText = $("#v2ConnectionText");
|
||||
if (modelBadge && modelValue) {
|
||||
const text = modelBadge.textContent.trim() || "模型检测中";
|
||||
modelValue.textContent = text;
|
||||
const unavailable = modelBadge.classList.contains("danger");
|
||||
$("#v2ModelField")?.classList.toggle("unavailable", unavailable);
|
||||
$("#v2ModelState").textContent = unavailable ? "LOCAL" : "READY";
|
||||
if (modelNote) modelNote.textContent = unavailable
|
||||
? "GPT 不可用，自动使用本地规则"
|
||||
: "服务端安全托管 · 失败自动降级";
|
||||
}
|
||||
if (connectionBadge && connectionText) {
|
||||
connectionText.textContent = connectionBadge.textContent.trim() || "正在连接服务";
|
||||
const online = !connectionBadge.classList.contains("danger")
|
||||
&& !connectionBadge.classList.contains("warning");
|
||||
$(".v2-sidebar-footer")?.classList.toggle("offline", !online);
|
||||
}
|
||||
syncExecutionSelector();
|
||||
if (ui.role === "user") requestUserHardwareMode();
|
||||
}
|
||||
|
||||
function bindEvents() {
|
||||
$("#v2RoleSelect")?.addEventListener("change", (event) => setRole(event.target.value));
|
||||
$$('[data-v2-control]').forEach((button) => {
|
||||
button.addEventListener("click", () => setControlMode(button.dataset.v2Control));
|
||||
});
|
||||
$("#v2ExecutionSelect")?.addEventListener("change", (event) => {
|
||||
$(`[data-execution-mode="${event.target.value}"]`)?.click();
|
||||
syncExecutionSelector();
|
||||
});
|
||||
$$(".v2-page-button").forEach((button) => {
|
||||
button.addEventListener("click", () => setPage(button.dataset.v2PageTarget));
|
||||
});
|
||||
$("#v2LogoutButton")?.addEventListener("click", () => $("#logoutButton")?.click());
|
||||
$("#v2SidebarToggle")?.addEventListener(
|
||||
"click",
|
||||
() => setSidebarCollapsed(!ui.sidebarCollapsed),
|
||||
);
|
||||
document.addEventListener("click", () => closeCustomDropdowns());
|
||||
document.addEventListener("keydown", (event) => {
|
||||
if (event.key === "Escape") closeCustomDropdowns();
|
||||
});
|
||||
window.addEventListener("resize", updateScrollCues);
|
||||
window.addEventListener("resize", updateModeEdgeHints);
|
||||
window.addEventListener("cognitive-agent:result", () => requestAnimationFrame(updateScrollCues));
|
||||
const modeChips = $(".v2-mode-rail .mode-chips");
|
||||
modeChips?.addEventListener(
|
||||
"scroll",
|
||||
() => requestAnimationFrame(updateModeEdgeHints),
|
||||
{ passive: true },
|
||||
);
|
||||
if (modeChips) {
|
||||
new MutationObserver(() => requestAnimationFrame(updateModeEdgeHints))
|
||||
.observe(modeChips, { childList: true });
|
||||
}
|
||||
|
||||
const observer = new MutationObserver(syncRuntimePresentation);
|
||||
[$("#modelBadge"), $("#connectionBadge"), $("#hardwareMode"), $("#simulationMode")]
|
||||
.filter(Boolean)
|
||||
.forEach((node) => observer.observe(node, {
|
||||
attributes: true,
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
}));
|
||||
}
|
||||
|
||||
function init() {
|
||||
const workspace = $(".workspace");
|
||||
const commandPanel = $(".command-panel");
|
||||
const mainPanel = $(".main-panel");
|
||||
const originalForm = $("#requestForm");
|
||||
if (!workspace || !commandPanel || !mainPanel || !originalForm) return;
|
||||
|
||||
document.body.classList.add("console-v2");
|
||||
const panelHeading = $(".panel-heading", commandPanel);
|
||||
const modeRail = $(".mode-rail", commandPanel);
|
||||
const exampleGroup = $(".example-group", commandPanel);
|
||||
const safetyStrip = $("#safetyStrip", commandPanel);
|
||||
const requestHeader = $(".request-header", mainPanel);
|
||||
const gestureDrawer = $("#gestureDrawer");
|
||||
|
||||
const detached = {
|
||||
panelHeading,
|
||||
modeRail,
|
||||
requestHeader,
|
||||
gestureDrawer,
|
||||
originalForm,
|
||||
exampleGroup,
|
||||
safetyStrip,
|
||||
};
|
||||
Object.values(detached).filter(Boolean).forEach((node) => node.remove());
|
||||
|
||||
const legacyParking = make("div", "v2-legacy-parking v2-legacy-hidden", "");
|
||||
[exampleGroup, safetyStrip].filter(Boolean).forEach((node) => legacyParking.append(node));
|
||||
document.body.append(legacyParking);
|
||||
|
||||
const configStack = buildSidebar(commandPanel);
|
||||
buildConfigFields(configStack, originalForm);
|
||||
enhanceConfiguredDropdowns();
|
||||
buildOperation(
|
||||
mainPanel,
|
||||
originalForm,
|
||||
panelHeading,
|
||||
modeRail,
|
||||
requestHeader,
|
||||
gestureDrawer,
|
||||
);
|
||||
|
||||
$(".pipeline", mainPanel)?.classList.add("v2-legacy-hidden");
|
||||
$(".topbar")?.classList.add("v2-legacy-hidden");
|
||||
$(".gesture-backdrop")?.classList.add("v2-legacy-hidden");
|
||||
buildOutput(mainPanel);
|
||||
bindEvents();
|
||||
setControlMode(ui.controlMode, { triggerGesture: false });
|
||||
setRole(ui.role);
|
||||
setSidebarCollapsed(ui.sidebarCollapsed);
|
||||
setPage(0);
|
||||
syncRuntimePresentation();
|
||||
window.lucide?.createIcons({ attrs: { "aria-hidden": "true" } });
|
||||
requestAnimationFrame(() => {
|
||||
updateModeEdgeHints();
|
||||
document.body.classList.add("v2-ready");
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", init);
|
||||
}());
|
||||
Reference in New Issue
Block a user