yanjie/JE-Skin
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

feat: customer demo - remove breakout game, numeric matrix, 3D module switcher

Browse Source 
- Remove NeonBreakoutArena split panel from CenterStage
- Remove numeric matrix display mode toggle (keep dot matrix only)
- Remove 3D module stage mode switcher from HudPanel
- Remove precision-test config link and related UI state
- Cargo check passes (1 warning: unused import in log.rs)
This commit is contained in:
Ubuntu
2026-05-25 15:17:48 +08:00
parent b581e310ed
commit 39840f469f
4 changed files with 551 additions and 1047 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1312
src-tauri/Cargo.lock generated
View File

File diff suppressed because it is too large Load Diff

50
src/lib/components/CenterStage.svelte
View File

@@ -61,7 +61,6 @@
export let replayProgress = 0;
export let replayFileName = "";
export let replayFrameInfo = "";
export let showPrecisionTestPanel = false;
export let sessionStartedAt: number = Date.now();
let stagePlaneEl: HTMLDivElement | undefined;
@@ -90,8 +89,6 @@
$: replayToggleButtonText = replayIsPlaying ? replayPauseLabel : replayPlayLabel;
$: replayProgressPercent = Math.round(Math.min(1, Math.max(0, replayProgress)) * 100);
$: summaryCurveVisible = summary.points.length > 0 && summary.points.some((value) => Number.isFinite(value) && Math.abs(value) >= 0.0001);
$: splitMatrixTitle = locale === "zh-CN" ? "数字矩阵" : "Matrix";
$: splitMatrixHint = locale === "zh-CN" ? "实时压力数据 / 数字矩阵" : "Live pressure matrix";
$: isModelStage = stageViewMode === "model3d";
function toPxNumber(rawValue: string): number {
@@ -117,7 +114,7 @@
return;
}
panelZoneTopPx = showPrecisionTestPanel ? 24 : 16;
panelZoneTopPx = 16;
const panelZoneBottomPx = panelZoneEl ? toPxNumber(getComputedStyle(panelZoneEl).bottom) : 0;
const zoneHeight = Math.max(0, stagePlaneEl.clientHeight - panelZoneTopPx - panelZoneBottomPx);
@@ -191,43 +188,6 @@
<ModelStage {locale} {modelUrl} />
{/key}
</div>
{:else if showPrecisionTestPanel}
<div class="split-game-wrap">
<section class="split-panel split-matrix-panel">
<header class="split-panel-head">
<p>{splitMatrixTitle}</p>
<span>{splitMatrixHint}</span>
</header>
<div class="split-panel-body">
{#key `${matrixRows}x${matrixCols}:${colorMapPreset}:split`}
<PressureMatrixViewer
{summary}
{pressureMatrix}
{matrixRows}
{matrixCols}
{rangeMin}
{rangeMax}
{colorMapPreset}
{matrixDisplayMode}
{locale}
showStatsPanel={true}
/>
{/key}
</div>
</section>
<section class="split-panel split-breakout-panel">
<NeonBreakoutArena
{locale}
{pressureMatrix}
{matrixRows}
{matrixCols}
{rangeMin}
{rangeMax}
{colorMapPreset}
/>
</section>
</div>
{:else}
<div class="canvas-wrap">
{#key `${matrixRows}x${matrixCols}:${colorMapPreset}`}
@@ -247,7 +207,7 @@
</div>
{/if}
{#if showConfigPanel && !showPrecisionTestPanel && !isModelStage}
{#if showConfigPanel && !isModelStage}
<div class="config-panel-wrap">
<ConfigPanel
bind:matrixRows
@@ -269,7 +229,7 @@
</div>
{/if}
{#if !showPrecisionTestPanel && !isModelStage}
{#if !isModelStage}
<div class="panel-zone" bind:this={panelZoneEl}>
<aside class="side-rail left-rail">
<div class="rail-stack" bind:this={leftStackEl}>
@@ -377,7 +337,7 @@
</div>
{/if}
{#if replayHasData && !showPrecisionTestPanel && !isModelStage}
{#if replayHasData && !isModelStage}
<aside class="replay-floating-panel" class:is-left={replaySide === "left"} class:is-right={replaySide === "right"}>
<div class="replay-panel-head">
<div class="replay-panel-title-group">
@@ -415,7 +375,7 @@
</aside>
{/if}
{#if !showPrecisionTestPanel && !isModelStage}
{#if !isModelStage}
<div class="stage-bottom-overlay">
<slot />
</div>

195
src/lib/components/HudPanel.svelte
View File

@@ -4,9 +4,6 @@
ConnectionState,
HudConfigLink,
HudNoticeTone,
LocaleCode,
MatrixDisplayMode,
StageViewMode,
WindowControlAction
} from "$lib/types/hud";
@@ -32,12 +29,7 @@
export let configLinksLabel = "";
export let configLinks: HudConfigLink[] = [];
export let matrixViewLabel = "";
export let matrixViewNumericLabel = "";
export let matrixViewDotsLabel = "";
export let matrixDisplayMode: MatrixDisplayMode = "dots";
export let stageModeLabel = "";
export let stageModeWebglLabel = "";
export let stageModeModelLabel = "";
export let stageViewMode: StageViewMode = "webgl";
export let connectActionLabel = "";
export let disconnectActionLabel = "";
@@ -107,10 +99,6 @@
dispatch("configlink", linkId);
}
function emitMatrixDisplayToggle(): void {
dispatch("matrixdisplaytoggle", matrixDisplayMode !== "dots");
}
function emitStageModeChange(nextMode: StageViewMode): void {
dispatch("stagemodechange", nextMode);
}
@@ -209,46 +197,6 @@
{/each}
</section>
<section class="matrix-switch-wrap" aria-label={matrixViewLabel}>
<span class="matrix-switch-label">{matrixViewLabel}</span>
<button
type="button"
class="matrix-switch-btn"
class:is-active={matrixDisplayMode === "dots"}
role="switch"
aria-checked={matrixDisplayMode === "dots"}
aria-label={matrixViewDotsLabel}
on:click={emitMatrixDisplayToggle}
>
<span class="matrix-switch-track" aria-hidden="true">
<span class="matrix-switch-thumb"></span>
</span>
<span class="matrix-switch-copy">{matrixDisplayMode === "dots" ? matrixViewDotsLabel : matrixViewNumericLabel}</span>
</button>
</section>
<section class="stage-mode-switch" aria-label={stageModeLabel}>
<span class="stage-mode-label">{stageModeLabel}</span>
<div class="stage-mode-options" role="group" aria-label={stageModeLabel}>
<button
type="button"
class="stage-mode-btn"
class:is-active={stageViewMode === "webgl"}
on:click={() => emitStageModeChange("webgl")}
>
{stageModeWebglLabel}
</button>
<button
type="button"
class="stage-mode-btn"
class:is-active={stageViewMode === "model3d"}
on:click={() => emitStageModeChange("model3d")}
>
{stageModeModelLabel}
</button>
</div>
</section>
<section class="state-card" aria-label={connectionLabel}>
<span class="state-dot" class:ok={connectionTone === "ok"} class:warn={connectionTone === "warn"}></span>
<span class="state-label">{connectionLabel}</span>
@@ -517,149 +465,6 @@
background: var(--panel-surface);
}
.matrix-switch-wrap,
.stage-mode-switch {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-block-size: 2rem;
border: 1px solid var(--panel-line);
border-radius: 999px;
padding: 0.16rem 0.22rem 0.16rem 0.56rem;
background: var(--panel-surface);
}
.matrix-switch-label,
.stage-mode-label {
color: var(--panel-text-dim);
font-size: 0.66rem;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
}
.matrix-switch-btn {
display: inline-flex;
align-items: center;
gap: 0.42rem;
min-block-size: 1.62rem;
border: 1px solid rgb(var(--hud-border-rgb) / 0.26);
border-radius: 999px;
padding: 0.18rem 0.28rem 0.18rem 0.22rem;
background: rgb(var(--hud-surface-deep-rgb) / 0.84);
color: rgb(var(--hud-text-main-rgb) / 0.92);
cursor: pointer;
transition:
border-color 180ms ease,
box-shadow 180ms ease,
background-color 180ms ease,
color 180ms ease;
}
.matrix-switch-btn:hover {
border-color: rgb(var(--hud-cyan-rgb) / 0.4);
}
.matrix-switch-btn.is-active {
border-color: rgb(var(--hud-cyan-rgb) / 0.5);
background:
linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.94), rgb(var(--hud-surface-rgb) / 0.9)),
radial-gradient(circle at 50% 0, rgb(var(--hud-cyan-rgb) / 0.12), transparent 60%);
box-shadow:
inset 0 0 0 1px rgb(var(--hud-text-main-rgb) / 0.05),
0 0 12px rgb(var(--hud-cyan-rgb) / 0.12);
}
.matrix-switch-track {
position: relative;
display: inline-flex;
align-items: center;
inline-size: 2.2rem;
block-size: 1.2rem;
border-radius: 999px;
padding: 0.14rem;
background: rgb(var(--hud-surface-rgb) / 0.9);
box-shadow: inset 0 0 0 1px rgb(var(--hud-border-rgb) / 0.24);
transition:
background-color 180ms ease,
box-shadow 180ms ease;
}
.matrix-switch-btn.is-active .matrix-switch-track {
background: rgb(var(--hud-cyan-rgb) / 0.18);
box-shadow: inset 0 0 0 1px rgb(var(--hud-cyan-rgb) / 0.18);
}
.matrix-switch-thumb {
inline-size: 0.92rem;
block-size: 0.92rem;
border-radius: 50%;
background: rgb(var(--hud-text-main-rgb) / 0.96);
box-shadow:
0 1px 4px rgb(0 0 0 / 0.26),
0 0 10px rgb(var(--hud-text-main-rgb) / 0.12);
transform: translateX(0);
transition:
transform 180ms ease,
background-color 180ms ease,
box-shadow 180ms ease;
}
.matrix-switch-btn.is-active .matrix-switch-thumb {
transform: translateX(0.96rem);
background: rgb(var(--hud-cyan-rgb) / 0.96);
box-shadow:
0 1px 4px rgb(0 0 0 / 0.26),
0 0 12px rgb(var(--hud-cyan-rgb) / 0.22);
}
.matrix-switch-copy {
font-size: 0.74rem;
letter-spacing: 0.04em;
white-space: nowrap;
line-height: 1;
}
.stage-mode-options {
display: inline-flex;
align-items: center;
gap: 0.18rem;
padding: 0.16rem;
border: 1px solid rgb(var(--hud-border-rgb) / 0.24);
border-radius: 999px;
background: rgb(var(--hud-surface-deep-rgb) / 0.8);
}
.stage-mode-btn {
min-block-size: 1.38rem;
border: 1px solid transparent;
border-radius: 999px;
padding: 0.18rem 0.54rem;
background: transparent;
color: rgb(var(--hud-text-dim-rgb) / 0.88);
font: inherit;
font-size: 0.7rem;
letter-spacing: 0.04em;
cursor: pointer;
transition:
border-color 180ms ease,
background-color 180ms ease,
color 180ms ease,
box-shadow 180ms ease;
}
.stage-mode-btn:hover {
color: rgb(var(--hud-text-main-rgb) / 0.96);
}
.stage-mode-btn.is-active {
border-color: rgb(var(--hud-cyan-rgb) / 0.42);
background: rgb(var(--hud-cyan-rgb) / 0.14);
color: rgb(var(--hud-text-main-rgb) / 0.98);
box-shadow: 0 0 12px rgb(var(--hud-cyan-rgb) / 0.1);
}
.state-dot {
inline-size: 0.55rem;
block-size: 0.55rem;

41
src/routes/+page.svelte
View File

@@ -28,7 +28,6 @@
HudSignalSeries,
HudSummary,
LocaleCode,
MatrixDisplayMode,
SerialConnectResult,
SerialExportResult,
SerialRecordStateResult,
@@ -69,7 +68,6 @@
rangeMaxLabel: "最大值",
colorMapLabel: "映射颜色",
matrixViewLabel: "矩阵模式",
matrixViewNumericLabel: "数字矩阵",
matrixViewDotsLabel: "点矩阵",
stageModeLabel: "渲染模式",
stageModeWebglLabel: "WebGL",
@@ -131,7 +129,6 @@
rangeMaxLabel: "Max",
colorMapLabel: "Color Map",
matrixViewLabel: "Matrix Mode",
matrixViewNumericLabel: "Numeric",
matrixViewDotsLabel: "Dots",
stageModeLabel: "Render Mode",
stageModeWebglLabel: "WebGL",
@@ -231,7 +228,6 @@
let isWindowMaximized = false;
let activeConfigLinkId = "stream-on";
let isConfigPanelOpen = false;
let isPrecisionTestOpen = false;
let hasSignalData = false;
let signalPanels: HudSignalPanel[] = buildInactivePanels();
let summary: HudSummary = buildEmptySummary();
@@ -243,7 +239,6 @@
let rangeMin = DEFAULT_PRESSURE_RANGE_MIN;
let rangeMax = DEFAULT_PRESSURE_RANGE_MAX;
let colorMapPreset: PressureColorMapPreset = "emerald";
let matrixDisplayMode: MatrixDisplayMode = "dots";
let stageViewMode: StageViewMode = "webgl";
let replayFrames: ReplayFrame[] = [];
let replayCurrentIndex = 0;
@@ -286,7 +281,6 @@
locale,
activeConfigLinkId,
isConfigPanelOpen,
isPrecisionTestOpen,
devkitEnabled,
isDevKitConfigOpen
);
@@ -1089,7 +1083,6 @@
currentLocale: LocaleCode,
activeId: string,
isSettingsOpen: boolean,
isPrecisionOpen: boolean,
isDevKitEnabled: boolean,
isDevKitOpen: boolean
): HudConfigLink[] {
@@ -1098,13 +1091,11 @@
? {
streamOn: "打开",
streamOff: "关闭",
precisionTest: "游戏",
settings: "参数"
}
: {
streamOn: "Open",
streamOff: "Close",
precisionTest: "Game",
settings: "Setup"
};
const devkitLabel = currentLocale === "zh-CN" ? "开发工具" : "DevKit";
@@ -1122,12 +1113,6 @@
tone: "orange",
active: activeId === "stream-off"
},
{
id: "precision-test",
label: labels.precisionTest,
tone: "lime",
active: isPrecisionOpen
},
{
id: "settings",
label: labels.settings,
@@ -1698,30 +1683,19 @@
}
function handleConfigLink(event: CustomEvent<string>): void {
if (event.detail === "precision-test") {
stageViewMode = "webgl";
isPrecisionTestOpen = !isPrecisionTestOpen;
isConfigPanelOpen = false;
isDevKitConfigOpen = false;
return;
}
if (event.detail === "settings") {
stageViewMode = "webgl";
isPrecisionTestOpen = false;
isConfigPanelOpen = !isConfigPanelOpen;
isDevKitConfigOpen = false;
return;
}
if (event.detail === "devkit") {
isPrecisionTestOpen = false;
isConfigPanelOpen = false;
isDevKitConfigOpen = !isDevKitConfigOpen;
return;
}
isPrecisionTestOpen = false;
isConfigPanelOpen = false;
isDevKitConfigOpen = false;
activeConfigLinkId = event.detail;
@@ -1796,14 +1770,9 @@
}
}
function handleMatrixDisplayToggle(event: CustomEvent<boolean>): void {
matrixDisplayMode = event.detail ? "dots" : "numeric";
}
function handleStageModeChange(event: CustomEvent<StageViewMode>): void {
stageViewMode = event.detail;
if (stageViewMode === "model3d") {
isPrecisionTestOpen = false;
isConfigPanelOpen = false;
}
}
@@ -1914,12 +1883,7 @@
configLinksLabel={uiCopy.configLinksLabel}
refreshPortsLabel={uiCopy.refreshPortsLabel}
matrixViewLabel={uiCopy.matrixViewLabel}
matrixViewNumericLabel={uiCopy.matrixViewNumericLabel}
matrixViewDotsLabel={uiCopy.matrixViewDotsLabel}
{matrixDisplayMode}
stageModeLabel={uiCopy.stageModeLabel}
stageModeWebglLabel={uiCopy.stageModeWebglLabel}
stageModeModelLabel={uiCopy.stageModeModelLabel}
{stageViewMode}
connectActionLabel={uiCopy.connectActionLabel}
disconnectActionLabel={uiCopy.disconnectActionLabel}
@@ -1942,7 +1906,6 @@
on:localechange={handleLocaleChange}
on:portchange={handlePortChange}
on:configlink={handleConfigLink}
on:matrixdisplaytoggle={handleMatrixDisplayToggle}
on:stagemodechange={handleStageModeChange}
on:serialrefresh={handleSerialRefresh}
on:serialconnect={handleSerialConnect}
@@ -1963,7 +1926,6 @@
bind:rangeMin
bind:rangeMax
bind:colorMapPreset
bind:matrixDisplayMode
{stageViewMode}
configPanelTitle={uiCopy.configPanelTitle}
configPanelHint={uiCopy.configPanelHint}
@@ -1994,7 +1956,6 @@
{spatialForce}
{devkitSpatialForce}
showConfigPanel={isConfigPanelOpen}
showPrecisionTestPanel={isPrecisionTestOpen}
{summary}
on:replaytoggle={handleReplayToggle}
on:replaystop={handleReplayStop}
@@ -2003,7 +1964,7 @@
on:replayclose={handleReplayClose}
on:configclose={() => (isConfigPanelOpen = false)}
>
{#if !isPrecisionTestOpen && stageViewMode === "webgl"}
{#if stageViewMode === "webgl"}
<section class="range-scale" aria-label="Signal Range">
<p class="range-label">{locale === "zh-CN" ? "范围" : "Range"}</p>
<div class="range-track">