feat:增加点和数字切换，减小点最大尺寸，增加range配色方案

src/routes/+page.svelte

@@ -23,12 +23,12 @@
     HudSignalSeries,
     HudSummary,
     LocaleCode,
+    MatrixDisplayMode,
     SerialConnectResult,
     SerialExportResult,
     SerialRecordStateResult,
     SerialImportResult,
     SignalTone,
-    StageStatusTone,
     WindowControlAction
   } from "$lib/types/hud";
 
@@ -43,7 +43,7 @@
   const copyByLocale: Record<LocaleCode, HudCopy> = {
     "zh-CN": {
       appName: "JE-Skin",
-      suiteName: "v0.1.0",
+      suiteName: "v0.3.0",
       stageTitle: "WebGL2 主渲染区",
       stageHint: "底图与三维操作将在此区域加载",
       configPanelTitle: "参数配置",
@@ -55,6 +55,9 @@
       rangeMinLabel: "最小值",
       rangeMaxLabel: "最大值",
       colorMapLabel: "映射颜色",
+      matrixViewLabel: "矩阵模式",
+      matrixViewNumericLabel: "数字矩阵",
+      matrixViewDotsLabel: "点矩阵",
       resetConfigLabel: "恢复默认",
       applyLiveHint: "实时生效 / 矩阵尺寸变更将重建 viewer",
       runtimeReady: "WEBGL2 READY",
@@ -99,7 +102,7 @@
     },
     "en-US": {
       appName: "JE-Skin",
-      suiteName: "v0.1.0",
+      suiteName: "v0.3.0",
       stageTitle: "WebGL2 Main Surface",
       stageHint: "Map texture and 3D interactions will render here",
       configPanelTitle: "Config Panel",
@@ -111,6 +114,9 @@
       rangeMinLabel: "Min",
       rangeMaxLabel: "Max",
       colorMapLabel: "Color Map",
+      matrixViewLabel: "Matrix Mode",
+      matrixViewNumericLabel: "Numeric",
+      matrixViewDotsLabel: "Dots",
       resetConfigLabel: "Reset",
       applyLiveHint: "Live apply / size changes recreate the viewer",
       runtimeReady: "WEBGL2 READY",
@@ -200,7 +206,6 @@
   let deviceValue = "JE-Skin-F";
   let sampleRateValue = "100Hz";
   let channelsValue = "84";
-  let webglStatusTone: StageStatusTone = "warn";
   let isWindowMaximized = false;
   let activeConfigLinkId = "stream-on";
   let isConfigPanelOpen = false;
@@ -214,6 +219,7 @@
   let rangeMin = 0;
   let rangeMax = 16000;
   let colorMapPreset: PressureColorMapPreset = "emerald";
+  let matrixDisplayMode: MatrixDisplayMode = "dots";
   let replayFrames: ReplayFrame[] = [];
   let replayCurrentIndex = 0;
   let replayHasDisplayedFrame = false;
@@ -234,7 +240,6 @@
 
   $: uiCopy = copyByLocale[locale];
   $: configLinks = buildConfigLinks(locale, activeConfigLinkId, isConfigPanelOpen, isPrecisionTestOpen);
-  $: stageStatusText = webglStatusTone === "ok" ? uiCopy.runtimeReady : uiCopy.runtimeFallback;
   $: leftSignalPanels = signalPanels.filter((panel) => panel.side === "left");
   $: rightSignalPanels = signalPanels.filter((panel) => panel.side === "right");
   $: rangeTicks = buildRangeTicks(rangeMin, rangeMax);
@@ -866,7 +871,7 @@
 
   function buildEmptySummary(): HudSummary {
     return {
-      label: "TOTAL",
+      label: "Resultant Force",
       xValues: [],
       points: [],
       latest: null,
@@ -875,6 +880,18 @@
     };
   }
 
+  function isZeroLikeValue(value: number): boolean {
+    return !Number.isFinite(value) || Math.abs(value) < 0.0001;
+  }
+
+  function shouldHideSummary(points: number[]): boolean {
+    return points.length === 0 || points.every((value) => isZeroLikeValue(value));
+  }
+
+  function normalizeSummary(summaryValue: HudSummary): HudSummary {
+    return shouldHideSummary(summaryValue.points) ? buildEmptySummary() : summaryValue;
+  }
+
   function buildSummary(points: number[], xValues: number[] = []): HudSummary {
     if (points.length === 0) {
       return buildEmptySummary();
@@ -886,7 +903,7 @@
     });
 
     return {
-      label: "TOTAL",
+      label: "Resultant Force",
       xValues: resolvedXValues,
       points,
       latest: points[points.length - 1],
@@ -1077,7 +1094,6 @@
 
     const canvas = document.createElement("canvas");
     const context = canvas.getContext("webgl2");
-    webglStatusTone = context ? "ok" : "warn";
   }
 
   function handleLocaleChange(event: CustomEvent<LocaleCode>): void {
@@ -1494,6 +1510,10 @@
     }
   }
 
+  function handleMatrixDisplayToggle(event: CustomEvent<boolean>): void {
+    matrixDisplayMode = event.detail ? "dots" : "numeric";
+  }
+
   onMount(() => {
     let disposed = false;
     let unlistenHudStream: UnlistenFn | null = null;
@@ -1559,6 +1579,10 @@
       channelsValue={channelsValue}
       configLinksLabel={uiCopy.configLinksLabel}
       refreshPortsLabel={uiCopy.refreshPortsLabel}
+      matrixViewLabel={uiCopy.matrixViewLabel}
+      matrixViewNumericLabel={uiCopy.matrixViewNumericLabel}
+      matrixViewDotsLabel={uiCopy.matrixViewDotsLabel}
+      {matrixDisplayMode}
       connectActionLabel={uiCopy.connectActionLabel}
       disconnectActionLabel={uiCopy.disconnectActionLabel}
       exportActionLabel={uiCopy.exportActionLabel}
@@ -1576,6 +1600,7 @@
       on:localechange={handleLocaleChange}
       on:portchange={handlePortChange}
       on:configlink={handleConfigLink}
+      on:matrixdisplaytoggle={handleMatrixDisplayToggle}
       on:serialrefresh={handleSerialRefresh}
       on:serialconnect={handleSerialConnect}
       on:serialexport={handleSerialExportRequest}
@@ -1590,8 +1615,7 @@
       bind:rangeMin
       bind:rangeMax
       bind:colorMapPreset
-      title={uiCopy.stageTitle}
-      hint={uiCopy.stageHint}
+      bind:matrixDisplayMode
       configPanelTitle={uiCopy.configPanelTitle}
       configPanelHint={uiCopy.configPanelHint}
       matrixSizeLabel={uiCopy.matrixSizeLabel}
@@ -1616,8 +1640,6 @@
       {replayFrameInfo}
       resetConfigLabel={uiCopy.resetConfigLabel}
       applyLiveHint={uiCopy.applyLiveHint}
-      statusText={stageStatusText}
-      statusTone={webglStatusTone}
       leftPanels={leftSignalPanels}
       rightPanels={rightSignalPanels}
       {pressureMatrix}
@@ -1786,10 +1808,13 @@
       linear-gradient(
         90deg,
         color-mix(in srgb, var(--hud-range-0) 92%, black) 0%,
-        color-mix(in srgb, var(--hud-range-1) 94%, black) 18%,
-        color-mix(in srgb, var(--hud-range-2) 96%, black) 40%,
-        color-mix(in srgb, var(--hud-range-3) 98%, black) 66%,
-        color-mix(in srgb, var(--hud-range-4) 96%, black) 84%,
+        color-mix(in srgb, var(--hud-range-1) 96%, black) 12.5%,
+        color-mix(in srgb, var(--hud-range-1) 92%, black) 25%,
+        color-mix(in srgb, var(--hud-range-2) 96%, black) 37.5%,
+        color-mix(in srgb, var(--hud-range-2) 92%, black) 50%,
+        color-mix(in srgb, var(--hud-range-3) 96%, black) 62.5%,
+        color-mix(in srgb, var(--hud-range-3) 92%, black) 75%,
+        color-mix(in srgb, var(--hud-range-4) 96%, black) 87.5%,
         color-mix(in srgb, var(--hud-range-5) 94%, black) 100%
       ),
       linear-gradient(180deg, rgb(var(--hud-text-main-rgb) / 0.06), transparent 42%);