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>