update frontend components and cargo config
This commit is contained in:
@@ -5,6 +5,13 @@
|
||||
export let side: "left" | "right" = "right";
|
||||
export let panelIndex = 0;
|
||||
export let locale: "zh-CN" | "en-US" = "zh-CN";
|
||||
export let panelCode = "TAN";
|
||||
export let panelTitle = "";
|
||||
export let badgeLabel = "";
|
||||
export let badgeTone: "cyan" | "lime" | "orange" = "cyan";
|
||||
export let showMetrics = true;
|
||||
export let requireMagnitude = true;
|
||||
export let compactMetaText = "";
|
||||
|
||||
function formatValue(value: number | null, digits = 1): string {
|
||||
if (value === null || !Number.isFinite(value)) {
|
||||
@@ -91,11 +98,15 @@
|
||||
strength: "Strength",
|
||||
confidence: "Confidence"
|
||||
};
|
||||
$: resolvedTitle = panelTitle || i18n.title;
|
||||
$: resolvedBadgeLabel = badgeLabel || i18n.angle;
|
||||
$: resolvedCompactMetaText =
|
||||
compactMetaText || (locale === "zh-CN" ? "仅使用角度流" : "Angle stream only");
|
||||
|
||||
$: hasData =
|
||||
spatialForce !== null &&
|
||||
Number.isFinite(spatialForce.angleDeg) &&
|
||||
Number.isFinite(spatialForce.magnitude);
|
||||
(!requireMagnitude || Number.isFinite(spatialForce.magnitude));
|
||||
$: angleDeg = hasData ? normalizeAngle(spatialForce?.angleDeg ?? 0) : 0;
|
||||
$: updateVisualAngle(angleDeg, hasData);
|
||||
$: magnitude = hasData ? spatialForce?.magnitude ?? 0 : null;
|
||||
@@ -110,12 +121,12 @@
|
||||
>
|
||||
<header class="panel-head">
|
||||
<div class="head-text">
|
||||
<p class="panel-code">TAN</p>
|
||||
<p class="panel-title">{i18n.title}</p>
|
||||
<p class="panel-code">{panelCode}</p>
|
||||
<p class="panel-title">{resolvedTitle}</p>
|
||||
</div>
|
||||
|
||||
<div class="icon-layer" aria-hidden="true">
|
||||
<span class="icon-chip tone-cyan">{i18n.angle}</span>
|
||||
<span class={`icon-chip tone-${badgeTone}`}>{resolvedBadgeLabel}</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -152,8 +163,13 @@
|
||||
|
||||
<div class="angle-stage">
|
||||
<p class="angle-label">{i18n.heading}</p>
|
||||
<p class="angle-meta">{i18n.strength}: {formatValue(magnitude, 2)}</p>
|
||||
<p class="angle-meta">{i18n.confidence}: {hasData ? `${formatValue(confidence, 0)}%` : "--"}</p>
|
||||
{#if showMetrics}
|
||||
<p class="angle-meta">{i18n.strength}: {formatValue(magnitude, 2)}</p>
|
||||
<p class="angle-meta">{i18n.confidence}: {hasData ? `${formatValue(confidence, 0)}%` : "--"}</p>
|
||||
{:else}
|
||||
<p class="angle-meta">{resolvedCompactMetaText}</p>
|
||||
<p class="angle-meta">{hasData ? (locale === "zh-CN" ? "实时对比中" : "Live comparison") : "--"}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
@@ -251,6 +267,14 @@
|
||||
border-color: rgb(var(--hud-cyan-rgb) / 0.54);
|
||||
}
|
||||
|
||||
.icon-chip.tone-lime {
|
||||
border-color: rgb(var(--hud-lime-rgb) / 0.54);
|
||||
}
|
||||
|
||||
.icon-chip.tone-orange {
|
||||
border-color: rgb(var(--hud-orange-rgb) / 0.54);
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(10rem, 0.9fr);
|
||||
|
||||
Reference in New Issue
Block a user