优化的前端UI

This commit is contained in:
minghanchen
2026-09-02 11:39:31 +08:00
parent 00c7d6b874
commit ccd64adcfe
10 changed files with 317 additions and 75 deletions
+7 -13
View File
@@ -618,12 +618,8 @@
const naturalPanel = $("#v2NaturalPanel");
if (panelHeading) {
panelHeading.classList.add("v2-operation-heading", "v2-module-heading");
const kicker = $(".section-kicker", panelHeading);
const title = $("h2", panelHeading);
const intro = $(".panel-intro", panelHeading);
if (kicker) kicker.textContent = "REMOTE ORCHESTRATION · LIVE SYNC";
if (title) title.textContent = "一句话远程编排";
if (intro) intro.textContent = "网页指令将通过同步链路发送至车机;车机任务与执行反馈在右侧实时更新";
naturalPanel.append(panelHeading);
}
@@ -643,9 +639,7 @@
const gesturePanel = $("#v2GesturePanel");
const gestureHeading = make("header", "v2-operation-heading v2-module-heading v2-gesture-operation-heading", `
<span class="section-kicker">SELF-ORCHESTRATION</span>
<h2>抬抬手,控制整车</h2>
<p class="panel-intro">通过摄像头识别手势,直观控制车舱功能</p>`);
<h2>抬抬手,控制整车</h2>`);
gesturePanel.append(gestureHeading);
if (gestureDrawer) {
gestureDrawer.classList.add("v2-inline-gesture");
@@ -693,7 +687,7 @@
switcher.innerHTML = `
<div class="v2-unified-brand">
<span class="v2-unified-brand-mark"><i data-lucide="waypoints"></i></span>
<div><small>COCKPIT REMOTE · LIVE MIRROR</small><h1>511工程-智能座舱</h1></div>
<div><h1>511工程-智能座舱</h1></div>
</div>
<div class="v2-remote-control-state"><i data-lucide="radio-tower"></i><span>网页控制链路</span><strong>已启用</strong></div>
<div class="v2-unified-live"><i></i><span>LIVE</span><b id="v2SyncClock">--:--:--</b></div>`;
@@ -706,7 +700,7 @@
<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><h2 id="v2PageTitle">整车联合数字孪生</h2></div>
</div>
<span class="v2-output-state"><i></i><span id="v2OutputState">LIVE STATE</span></span>
</header>
@@ -1168,7 +1162,7 @@
popover.dataset.device = deviceId;
popover.dataset.pinned = String(Boolean(displaySync.pinnedDevice));
popover.innerHTML = `
<header><span><i data-lucide="${device.icon}"></i></span><div><small>LIVE DEVICE FEEDBACK</small><strong>${escapeHtml(device.name)}</strong></div><b>${pinned ? "已固定" : "靠近查看"}</b><button class="v2-twin-popover-close" type="button" data-twin-popover-close aria-label="关闭${escapeHtml(device.name)}状态详情" title="关闭"><i data-lucide="x"></i></button></header>
<header><span><i data-lucide="${device.icon}"></i></span><div><strong>${escapeHtml(device.name)}</strong></div><b>${pinned ? "已固定" : "靠近查看"}</b><button class="v2-twin-popover-close" type="button" data-twin-popover-close aria-label="关闭${escapeHtml(device.name)}状态详情" title="关闭"><i data-lucide="x"></i></button></header>
<dl>${rows.map(([label, value]) => `<div><dt>${escapeHtml(label)}</dt><dd>${escapeHtml(value)}</dd></div>`).join("")}</dl>`;
$$("[data-twin-device]").forEach((button) => button.classList.toggle("active", button.dataset.twinDevice === deviceId));
$$(".v2-synced-device").forEach((button) => button.classList.toggle("active", button.dataset.device === deviceId));
@@ -1493,7 +1487,7 @@
const sidebarFooter = $(".v2-sidebar-footer", sidebar);
const syncSidebar = make("section", "v2-sync-sidebar", `
<div class="v2-sync-sidebar-overview">
<div class="v2-sync-sidebar-heading"><small>REMOTE CLIENT</small><h2>511工程-智能座舱</h2><p>网页可远程编排,车机任务、设备反馈与 USB 外设能力保持同步。</p></div>
<div class="v2-sync-sidebar-heading"><h2>511工程-智能座舱</h2></div>
<div class="v2-sync-link-stack">
<div class="v2-sync-link" id="v2HeadUnitState" data-state="checking"><i data-lucide="monitor-smartphone"></i><div><strong>车机链路</strong><span>连接检查中</span></div><b></b></div>
<div class="v2-sync-link" id="v2MirrorState" data-state="checking"><i data-lucide="refresh-cw"></i><div><strong>网页同步</strong><span>建立同步中</span></div><b></b></div>
@@ -1501,7 +1495,7 @@
</div>
</div>
<section class="v2-sync-log" aria-labelledby="v2SyncLogTitle">
<header><div><small>RUNTIME / SYNC</small><h3 id="v2SyncLogTitle">运行日志 / 同步记录</h3></div><select id="v2LogFilter" aria-label="筛选同步日志"><option value="all">全部</option><option value="task">任务</option><option value="sync">同步</option><option value="extension">外设</option><option value="device">设备</option></select></header>
<header><div><h3 id="v2SyncLogTitle">运行日志 / 同步记录</h3></div><select id="v2LogFilter" aria-label="筛选同步日志"><option value="all">全部</option><option value="task">任务</option><option value="sync">同步</option><option value="extension">外设</option><option value="device">设备</option></select></header>
<ol id="v2SyncLogList" aria-live="polite"></ol>
</section>`);
if (sidebar && sidebarFooter) {
@@ -1555,7 +1549,7 @@
if (jointShell && cabinBand) {
const rightRail = make("aside", "v2-unified-right-rail", `
<section class="v2-device-sync-board v2-side-status-panel" id="v2DevicePanel">
<header><div><small>LIVE VEHICLE DEVICES</small><h3>车端设备状态</h3></div><span><i></i>实时反馈</span><button type="button" data-panel-toggle="devices" aria-label="收起车端设备状态"><i data-lucide="panel-left-close"></i><span data-panel-action-label>收起</span></button></header>
<header><div><h3>车端设备状态</h3></div><span><i></i>实时反馈</span><button type="button" data-panel-toggle="devices" aria-label="收起车端设备状态"><i data-lucide="panel-left-close"></i><span data-panel-action-label>收起</span></button></header>
<div class="v2-device-sync-grid" id="v2DeviceSyncGrid"></div>
</section>
<section class="v2-extension-panel v2-side-status-panel" id="v2ExtensionPanel"><div class="v2-extension-sync-mount" id="vehicleExtensionSync" aria-live="polite"></div></section>`);