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

src/lib/components/HudPanel.svelte

@@ -5,6 +5,7 @@
     HudConfigLink,
     HudNoticeTone,
     LocaleCode,
+    MatrixDisplayMode,
     WindowControlAction
   } from "$lib/types/hud";
 
@@ -29,6 +30,10 @@
   export let refreshPortsLabel = "";
   export let configLinksLabel = "";
   export let configLinks: HudConfigLink[] = [];
+  export let matrixViewLabel = "";
+  export let matrixViewNumericLabel = "";
+  export let matrixViewDotsLabel = "";
+  export let matrixDisplayMode: MatrixDisplayMode = "dots";
   export let connectActionLabel = "";
   export let disconnectActionLabel = "";
   export let exportActionLabel = "";
@@ -46,6 +51,7 @@
     windowcontrol: WindowControlAction;
     localechange: LocaleCode;
     configlink: string;
+    matrixdisplaytoggle: boolean;
     portchange: string;
     serialrefresh: void;
     serialconnect: string;
@@ -89,6 +95,10 @@
     dispatch("configlink", linkId);
   }
 
+  function emitMatrixDisplayToggle(): void {
+    dispatch("matrixdisplaytoggle", matrixDisplayMode !== "dots");
+  }
+
   function emitPortChange(event: Event): void {
     const target = event.currentTarget as HTMLSelectElement;
     dispatch("portchange", target.value);
@@ -175,6 +185,24 @@
         {/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="state-card" aria-label={connectionLabel}>
         <span class="state-dot" class:ok={connectionTone === "ok"} class:warn={connectionTone === "warn"}></span>
         <span class="state-label">{connectionLabel}</span>
@@ -432,6 +460,108 @@
     background: var(--panel-surface);
   }
 
+  .matrix-switch-wrap {
+    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 {
+    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;
+  }
+
   .state-dot {
     inline-size: 0.55rem;
     block-size: 0.55rem;