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

Migrate updater LAN and devkit features from old repo

Browse Source
This commit is contained in:
lenn
2026-04-27 16:37:40 +08:00
parent b33c952eb6
commit 26533f6916
29 changed files with 5207 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

362
src/lib/components/DevKitConfigPanel.svelte Normal file
View File

@@ -0,0 +1,362 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
export let running = false;
export let port = 50051;
export let framesSent = 0;
export let filterLiftEnabled = true;
export let saveAsXlsx = false;
export let locale: "zh-CN" | "en-US" = "zh-CN";
export let lastProcessResult: {
outputPath: string;
groupsUsed: number;
meanValue: number;
threshold: number;
rowsTotal: number;
rowsKept: number;
} | null = null;
const dispatch = createEventDispatcher<{
close: void;
togglefilterlift: void;
togglexlsx: void;
}>();
$: labels = locale === "zh-CN"
? {
title: "DevKit 配置",
status: "状态",
connected: "已连接",
disconnected: "未连接",
port: "端口",
framesSent: "已发送帧",
filterLift: "导出过滤抬起",
filterLiftHint: "导出 CSV 后自动调用 Python 做梯度过滤，过滤掉抬起的小值数据",
saveXlsx: "以 xlsx 保存",
saveXlsxHint: "Python 处理后输出 xlsx 格式并删除源 CSV 文件",
lastResult: "最近一次处理",
output: "输出文件",
groups: "分组数",
mean: "均值",
threshold: "阈值",
rows: "行数",
kept: "保留行数",
}
: {
title: "DevKit Config",
status: "Status",
connected: "Connected",
disconnected: "Disconnected",
port: "Port",
framesSent: "Frames sent",
filterLift: "Filter lift on export",
filterLiftHint: "After CSV export, automatically call Python to filter out small values",
saveXlsx: "Save as xlsx",
saveXlsxHint: "Python outputs xlsx format and deletes the source CSV file",
lastResult: "Last process",
output: "Output",
groups: "Groups",
mean: "Mean",
threshold: "Threshold",
rows: "Rows",
kept: "Kept rows",
};
</script>
<div class="dk-panel">
<header class="dk-head">
<h3 class="dk-title">{labels.title}</h3>
<button type="button" class="dk-close" on:click={() => dispatch("close")} aria-label="Close">
<span></span><span></span>
</button>
</header>
<section class="dk-section">
<div class="dk-status-row">
<span class="dk-dot" class:active={running}></span>
<span class="dk-label">{labels.status}</span>
<span class="dk-value">{running ? labels.connected : labels.disconnected}</span>
</div>
{#if running}
<div class="dk-info-grid">
<div class="dk-info">
<span class="dk-info-label">{labels.port}</span>
<span class="dk-info-value">:{port}</span>
</div>
<div class="dk-info">
<span class="dk-info-label">{labels.framesSent}</span>
<span class="dk-info-value">{framesSent}</span>
</div>
</div>
{/if}
</section>
<section class="dk-section">
<button type="button" class="dk-toggle" class:active={filterLiftEnabled} on:click={() => dispatch("togglefilterlift")}>
<span class="dk-toggle-indicator"></span>
<div class="dk-toggle-text">
<span class="dk-toggle-label">{labels.filterLift}</span>
<span class="dk-toggle-hint">{labels.filterLiftHint}</span>
</div>
</button>
</section>
<section class="dk-section">
<button type="button" class="dk-toggle" class:active={saveAsXlsx} on:click={() => dispatch("togglexlsx")}>
<span class="dk-toggle-indicator"></span>
<div class="dk-toggle-text">
<span class="dk-toggle-label">{labels.saveXlsx}</span>
<span class="dk-toggle-hint">{labels.saveXlsxHint}</span>
</div>
</button>
</section>
{#if lastProcessResult}
<section class="dk-section dk-result">
<p class="dk-section-title">{labels.lastResult}</p>
<div class="dk-result-grid">
<div class="dk-result-item">
<span class="dk-result-label">{labels.output}</span>
<span class="dk-result-value">{lastProcessResult.outputPath}</span>
</div>
<div class="dk-result-item">
<span class="dk-result-label">{labels.groups}</span>
<span class="dk-result-value">{lastProcessResult.groupsUsed}</span>
</div>
<div class="dk-result-item">
<span class="dk-result-label">{labels.mean}</span>
<span class="dk-result-value">{lastProcessResult.meanValue.toFixed(3)}</span>
</div>
<div class="dk-result-item">
<span class="dk-result-label">{labels.threshold}</span>
<span class="dk-result-value">{lastProcessResult.threshold.toFixed(3)}</span>
</div>
<div class="dk-result-item">
<span class="dk-result-label">{labels.rows}</span>
<span class="dk-result-value">{lastProcessResult.rowsTotal} → {lastProcessResult.rowsKept}</span>
</div>
</div>
</section>
{/if}
</div>
<style>
.dk-panel {
display: grid;
gap: 0.7rem;
inline-size: min(22rem, 100%);
padding: 0.9rem 0.96rem 1rem;
border: 1px solid rgb(var(--hud-border-rgb) / 0.3);
border-radius: 0.82rem;
background:
linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.92), rgb(var(--hud-surface-deep-rgb) / 0.88)),
radial-gradient(circle at 100% 0, rgb(var(--hud-info-rgb) / 0.07), transparent 38%);
box-shadow:
inset 0 1px 0 rgb(var(--hud-border-strong-rgb) / 0.08),
0 18px 46px rgb(0 0 0 / 0.28);
backdrop-filter: blur(10px);
}
.dk-head {
display: flex;
justify-content: space-between;
align-items: center;
}
.dk-title {
margin: 0;
color: rgb(var(--hud-text-main-rgb) / 0.98);
font-size: 0.95rem;
font-weight: 600;
}
.dk-close {
position: relative;
inline-size: 1.8rem;
block-size: 1.8rem;
border: 1px solid rgb(var(--hud-border-rgb) / 0.32);
border-radius: 999px;
background: rgb(var(--hud-surface-deep-rgb) / 0.72);
cursor: pointer;
flex: 0 0 auto;
}
.dk-close span {
position: absolute;
top: 50%;
left: 50%;
inline-size: 0.7rem;
block-size: 1px;
background: rgb(var(--hud-text-main-rgb) / 0.9);
transform-origin: center;
}
.dk-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.dk-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
.dk-section {
display: grid;
gap: 0.5rem;
padding: 0.6rem 0.7rem;
border: 1px solid rgb(var(--hud-border-rgb) / 0.22);
border-radius: 0.68rem;
background: linear-gradient(180deg, rgb(var(--hud-surface-rgb) / 0.76), rgb(var(--hud-surface-deep-rgb) / 0.64));
}
.dk-status-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.dk-dot {
inline-size: 0.5rem;
block-size: 0.5rem;
border-radius: 50%;
background: rgb(var(--hud-text-dim-rgb) / 0.8);
transition: background 200ms ease;
}
.dk-dot.active {
background: rgb(var(--hud-lime-rgb) / 0.95);
box-shadow: 0 0 0 2px rgb(var(--hud-lime-rgb) / 0.14);
}
.dk-label {
color: rgb(var(--hud-text-dim-rgb) / 0.8);
font-size: 0.62rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.dk-value {
color: rgb(var(--hud-text-main-rgb) / 0.96);
font-size: 0.82rem;
font-weight: 500;
margin-inline-start: auto;
}
.dk-info-grid {
display: flex;
gap: 1rem;
}
.dk-info {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.dk-info-label {
color: rgb(var(--hud-text-dim-rgb) / 0.7);
font-size: 0.56rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.dk-info-value {
color: rgb(var(--hud-text-main-rgb) / 0.94);
font-size: 0.82rem;
font-weight: 500;
}
.dk-toggle {
display: flex;
align-items: flex-start;
gap: 0.6rem;
border: 1px solid rgb(var(--hud-border-rgb) / 0.24);
border-radius: 0.58rem;
padding: 0.55rem 0.65rem;
background: rgb(var(--hud-surface-rgb) / 0.82);
cursor: pointer;
text-align: left;
transition: border-color 180ms ease, box-shadow 180ms ease;
}
.dk-toggle:hover {
border-color: rgb(var(--hud-cyan-rgb) / 0.36);
}
.dk-toggle.active {
border-color: rgb(var(--hud-lime-rgb) / 0.48);
box-shadow: inset 0 1px 0 rgb(var(--hud-border-strong-rgb) / 0.08), 0 0 14px rgb(var(--hud-glow-alt-rgb) / 0.12);
}
.dk-toggle-indicator {
inline-size: 0.56rem;
block-size: 0.56rem;
min-inline-size: 0.56rem;
border-radius: 50%;
margin-block-start: 0.15rem;
background: rgb(var(--hud-text-dim-rgb) / 0.7);
transition: background 180ms ease;
}
.dk-toggle.active .dk-toggle-indicator {
background: rgb(var(--hud-lime-rgb) / 0.92);
box-shadow: 0 0 0 2px rgb(var(--hud-lime-rgb) / 0.14);
}
.dk-toggle-text {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.dk-toggle-label {
color: rgb(var(--hud-text-main-rgb) / 0.96);
font-size: 0.78rem;
font-weight: 500;
}
.dk-toggle-hint {
color: rgb(var(--hud-text-dim-rgb) / 0.7);
font-size: 0.64rem;
line-height: 1.35;
}
.dk-section-title {
margin: 0;
color: rgb(var(--hud-text-dim-rgb) / 0.8);
font-size: 0.58rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.dk-result {
display: grid;
gap: 0.45rem;
}
.dk-result-grid {
display: grid;
gap: 0.3rem;
}
.dk-result-item {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0.2rem 0;
border-bottom: 1px solid rgb(var(--hud-border-rgb) / 0.14);
}
.dk-result-item:last-child {
border-bottom: none;
}
.dk-result-label {
color: rgb(var(--hud-text-dim-rgb) / 0.72);
font-size: 0.64rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.dk-result-value {
color: rgb(var(--hud-text-main-rgb) / 0.94);
font-size: 0.76rem;
font-weight: 500;
text-align: right;
word-break: break-all;
}
</style>

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

@@ -41,6 +41,10 @@
export let importActionLabel = "";
export let connectionNotice = "";
export let connectionNoticeTone: HudNoticeTone = "info";
export let noticeConfirmLabel = "";
export let noticeCancelLabel = "";
export let noticeShowActions = false;
export let noticeActionBusy = false;
export let isRefreshingPorts = false;
export let isConnectDisabled = false;
export let isExporting = false;
@@ -58,6 +62,8 @@
serialexport: void;
csvimport: void;
noticeclear: void;
noticeconfirm: void;
noticecancel: void;
}>();
const connectionToneByState: Record<ConnectionState, "ok" | "warn" | "idle"> = {
@@ -123,6 +129,14 @@
function emitNoticeClear(): void {
dispatch("noticeclear");
}
function emitNoticeConfirm(): void {
dispatch("noticeconfirm");
}
function emitNoticeCancel(): void {
dispatch("noticecancel");
}
</script>
<section class="hud-panel" aria-label={controlAreaLabel}>
@@ -301,14 +315,25 @@
{#if connectionNotice}
<div class="connection-notice tone-{connectionNoticeTone}" role={connectionNoticeTone === "warn" ? "alert" : "status"}>
<p class="connection-notice-text">{connectionNotice}</p>
<button
type="button"
class="notice-close-btn"
aria-label={locale === "zh-CN" ? "关闭提示" : "Dismiss notice"}
on:click={emitNoticeClear}
>
×
</button>
{#if noticeShowActions}
<div class="notice-actions">
<button type="button" class="notice-action-btn is-primary" disabled={noticeActionBusy} on:click={emitNoticeConfirm}>
{noticeActionBusy ? (locale === "zh-CN" ? "处理中..." : "Working...") : noticeConfirmLabel}
</button>
<button type="button" class="notice-action-btn" disabled={noticeActionBusy} on:click={emitNoticeCancel}>
{noticeCancelLabel}
</button>
</div>
{:else}
<button
type="button"
class="notice-close-btn"
aria-label={locale === "zh-CN" ? "关闭提示" : "Dismiss notice"}
on:click={emitNoticeClear}
>
×
</button>
{/if}
</div>
{/if}
@@ -921,6 +946,58 @@
background: rgb(9 16 22 / 0.92);
}
.notice-actions {
display: inline-flex;
align-items: center;
gap: 0.42rem;
flex-shrink: 0;
}
.notice-action-btn {
min-block-size: 1.55rem;
border: 1px solid rgb(116 151 176 / 0.38);
border-radius: 999px;
padding: 0.24rem 0.72rem;
background: rgb(7 12 16 / 0.76);
color: rgb(194 225 245 / 0.94);
font-size: 0.68rem;
letter-spacing: 0.04em;
cursor: pointer;
transition:
border-color 180ms ease,
color 180ms ease,
background-color 180ms ease,
box-shadow 200ms ease,
opacity 180ms ease;
}
.notice-action-btn:hover:not(:disabled) {
border-color: rgb(62 232 255 / 0.46);
color: rgb(237 250 255 / 0.98);
background: rgb(9 16 22 / 0.92);
}
.notice-action-btn.is-primary {
border-color: rgb(var(--hud-lime-rgb) / 0.44);
background:
linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.94), rgb(var(--hud-surface-rgb) / 0.88)),
radial-gradient(circle at 50% 0, rgb(var(--hud-lime-rgb) / 0.14), transparent 58%);
color: rgb(var(--hud-text-main-rgb) / 0.98);
box-shadow: 0 0 10px rgb(var(--hud-lime-rgb) / 0.08);
}
.notice-action-btn.is-primary:hover:not(:disabled) {
border-color: rgb(var(--hud-lime-rgb) / 0.62);
box-shadow:
inset 0 0 0 1px rgb(var(--hud-text-main-rgb) / 0.08),
0 0 13px rgb(var(--hud-lime-rgb) / 0.14);
}
.notice-action-btn:disabled {
cursor: default;
opacity: 0.64;
}
.connection-notice.tone-warn .notice-close-btn:hover {
border-color: rgb(255 91 63 / 0.6);
color: rgb(255 227 220 / 0.98);
@@ -1139,4 +1216,4 @@
}
}
</style>
</style>

949
src/lib/components/NeonBreakoutArena.svelte
View File

File diff suppressed because it is too large Load Diff

2
src/lib/config/pressure-range.ts
View File

@@ -1,2 +1,2 @@
export const DEFAULT_PRESSURE_RANGE_MIN = 0;
export const DEFAULT_PRESSURE_RANGE_MAX = 6000;
export const DEFAULT_PRESSURE_RANGE_MAX = 7000;