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

Prepare sample delivery UI

Browse Source
This commit is contained in:
lenn
2026-06-09 11:05:18 +08:00
parent 79faa67dd8
commit 160ff54368
11 changed files with 970 additions and 826 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/lib/components/SpatialForcePanel.svelte
View File

@@ -94,37 +94,38 @@
$: hasData =
spatialForce !== null &&
Number.isFinite(spatialForce.angleDeg) &&
(!requireMagnitude || Number.isFinite(spatialForce.magnitude));
(!requireMagnitude || (Number.isFinite(spatialForce.magnitude) && Math.abs(spatialForce.magnitude) >= 0.0001));
$: angleDeg = hasData ? normalizeAngle(spatialForce?.angleDeg ?? 0) : 0;
$: updateVisualAngle(angleDeg, hasData);
</script>
{#if hasData}
<article
class="signal-panel spatial-panel side-{side}"
aria-label={resolvedTitle}
style="--panel-index: {panelIndex};"
>
<header class="panel-head">
<div class="head-text">
<p class="panel-code">{panelCode}</p>
<p class="panel-title">{resolvedTitle}</p>
<article
class="signal-panel spatial-panel side-{side}"
class:is-empty={!hasData}
aria-label={resolvedTitle}
style="--panel-index: {panelIndex};"
>
<header class="panel-head">
<div class="head-text">
<p class="panel-code">{panelCode}</p>
<p class="panel-title">{resolvedTitle}</p>
</div>
{#if resolvedBadgeLabel}
<div class="icon-layer" aria-hidden="true">
<span class={`icon-chip tone-${badgeTone}`}>{resolvedBadgeLabel}</span>
</div>
{/if}
</header>
{#if resolvedBadgeLabel}
<div class="icon-layer" aria-hidden="true">
<span class={`icon-chip tone-${badgeTone}`}>{resolvedBadgeLabel}</span>
</div>
{/if}
</header>
<div class="panel-body">
<div class="compass-stage">
<div class="compass-core">
<div class="compass-ring compass-ring-outer"></div>
<div class="compass-ring compass-ring-inner"></div>
<div class="compass-axis axis-horizontal"></div>
<div class="compass-axis axis-vertical"></div>
<div class="panel-body">
<div class="compass-stage">
<div class="compass-core">
<div class="compass-ring compass-ring-outer"></div>
<div class="compass-ring compass-ring-inner"></div>
<div class="compass-axis axis-horizontal"></div>
<div class="compass-axis axis-vertical"></div>
{#if hasData}
<div
class="compass-vector"
class:is-snap={snapVector}
@@ -133,16 +134,17 @@
<span class="vector-shaft"></span>
<span class="vector-head"></span>
</div>
<div class="compass-center"></div>
<span class="compass-label label-top">90</span>
<span class="compass-label label-right">0</span>
<span class="compass-label label-bottom">270</span>
<span class="compass-label label-left">180</span>
</div>
{/if}
<div class="compass-center"></div>
<span class="compass-label label-top">90</span>
<span class="compass-label label-right">0</span>
<span class="compass-label label-bottom">270</span>
<span class="compass-label label-left">180</span>
</div>
</div>
</article>
{/if}
</div>
</article>
<style>
.signal-panel {
--offset-x: 12%;
@@ -261,14 +263,16 @@
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.72rem;
block-size: clamp(12rem, 15.5vw, 15rem);
block-size: clamp(14rem, 17vw, 16.5rem);
min-block-size: 5rem;
}
.compass-stage {
position: relative;
min-block-size: 0;
box-sizing: border-box;
overflow: hidden;
padding: 1.35rem 1.7rem;
border: 1px solid rgb(var(--hud-border-strong-rgb) / 0.32);
border-radius: 0.62rem;
background:
@@ -280,7 +284,8 @@
.compass-core {
position: relative;
inline-size: min(72%, 13rem);
inline-size: min(72%, 12.2rem, calc(100% - 3.4rem));
min-inline-size: 6.2rem;
aspect-ratio: 1;
}
@@ -379,26 +384,26 @@
}
.label-top {
top: -0.9rem;
top: 0.35rem;
left: 50%;
transform: translateX(-50%);
}
.label-right {
top: 50%;
right: -1rem;
right: 0.42rem;
transform: translateY(-50%);
}
.label-bottom {
bottom: -0.9rem;
bottom: 0.35rem;
left: 50%;
transform: translateX(-50%);
}
.label-left {
top: 50%;
left: -1.35rem;
left: 0.42rem;
transform: translateY(-50%);
}
@@ -421,7 +426,11 @@
}
.panel-body {
block-size: clamp(10rem, 13vw, 12rem);
block-size: clamp(12rem, 14.5vw, 14rem);
}
.compass-core {
inline-size: min(64%, 10.4rem, calc(100% - 3.4rem));
}
}
@@ -432,7 +441,15 @@
}
.panel-body {
block-size: clamp(9.8rem, 12vw, 11.8rem);
block-size: clamp(11.2rem, 13.5vw, 13.2rem);
}
.compass-stage {
padding-block: 1.2rem;
}
.compass-core {
inline-size: min(62%, 10rem, calc(100% - 3.4rem));
}
}
@@ -444,7 +461,16 @@
}
.panel-body {
block-size: clamp(8rem, 9.5vw, 9.8rem);
block-size: clamp(9.4rem, 11vw, 10.8rem);
}
.compass-stage {
padding: 1rem 1.45rem;
}
.compass-core {
inline-size: min(58%, 8.2rem, calc(100% - 2.9rem));
min-inline-size: 5.6rem;
}
}
@@ -456,7 +482,16 @@
}
.panel-body {
block-size: clamp(6.5rem, 8vw, 7.5rem);
block-size: clamp(7.6rem, 9vw, 8.8rem);
}
.compass-stage {
padding: 0.82rem 1.25rem;
}
.compass-core {
inline-size: min(54%, 6.4rem, calc(100% - 2.5rem));
min-inline-size: 4.8rem;
}
}