Horldsence
a93ae065cf
界面改动都在浏览器预览里逐条核对过（DOM 尺寸 + 视觉），截图留在 desktop/screenshots/ （该目录不进仓库）。 1. 客户端显示对手的血量 快照里两端都给两支队伍（顺序固定为队伍号 0/1），界面按 `team` 取那一格，不再靠 数组下标。顺带修掉一个真 bug：用户端"对手那一格"以前会走 `armor_id`——那是我自己 绑定的主板，于是右上角显示的是自己的血，比不显示更糟。现在只有"自己那一块"才用 `armor_id`；同理 `assigned_armor` 里的裁判端槽位指定对用户端不再生效。 2. 血条改到画面两个上角，平行四边形，一条分 5 格 左上角自己、右上角对手（裁判端两格各贴自己的角，读法一致）。整条 skewX(-15deg)， 右条再 scaleX(-1) 镜像，两条斜边朝外对称、**都从靠中心的一侧开始灭**。一格 20 点血。 条挂在绝对定位的一层上并 pointer-events:none（那一层盖着画面，而画面要能滚轮缩放、 拖动），倍率与复位徽标因此从上沿挪到下沿。未接入显示"装甲板未接入"而不是 0。 注意：不要在 JS 里再反转一次数组——那会和 CSS 的 scaleX(-1) 互相抵消，表现是右条 从外侧开始灭（代码里写了注释钉住这件事）。 3. 受击画面不抖动 删掉整幅图（含瞄准器）的位移与 shakeOffset。`HitFeedbackConfig::shake` 字段保留但 **不再生效**：配置文件是 deny_unknown_fields 的，删字段会让所有写过 shake = true 的 配置解析失败，而配置解析失败等于程序起不来。默认值改 false，设置面板去掉开关， 并有单测钉住"旧配置读得进来、默认不抖"。 4. 血量归零算击败，不显示"损毁" 血条上不再出现"已击毁/损毁"，归零的结论放到图传中央：胜利 / 击败 / 平局。结论在 Rust 侧算（snapshot::resolve_outcomes，4 条单测），规则有意不对称——**输只看自己** （自己归零就是输，哪怕对手主板掉线），**赢要看两边**（对手归零且自己还有血）， 两边同时归零是平局。它一直显示到血量被重置，不做几秒淡出，否则截图与回放里就再也 没有"这局结束了"的痕迹。 5. 裁判端可以改队伍名 两格画面各自下面一个输入框：回车/失焦生效、Esc 取消、超 12 字截断、留空回落到 「队伍一 / 队伍二」。命令是 `set_team_name(team, name)`，**一次只改一边**——传整个 两条的数组就成了"读两条、改一条、写两条"，而读来的那两条来自最多 200ms 前的快照， 紧接着改另一边会把上一次的改动覆盖回去。规范化统一在 `config::sanitize_team_name` （合并空白、按字符截断、留空回落），并同样过密码闸门（裁判端本来就没有密码）。 名字只有一个来源（快照的 `teamNames` / DTO 的 `name`）：装甲板表、槽位标签、设置 面板与"等待图传"的占位文字都跟着改，不再有第二处自己拼"队伍一/队伍二"。 测试：core 80（69→80）、src-tauri 30、protocol 15；`pnpm build`（tsc + vite）通过。
764 lines
25 KiB
TypeScript
764 lines
25 KiB
TypeScript
/**
|
||
* 设置抽屉。两端的"改东西"都收在这里，所以密码闸门也只有一个入口。
|
||
*
|
||
* # 打开面板 ≠ 解锁
|
||
*
|
||
* 面板本身由 `App` 在**解锁之后**才挂载，但面板里的每个改动仍然各自过一次后端闸门
|
||
* （`bind_camera` 等都会校验）。所以即使有人把这里改成"不需要密码"，配置也改不动。
|
||
*
|
||
* # 发现列表按需放开
|
||
*
|
||
* 挂载时调 `set_discovery_open(true)`，卸载时关掉。这是用户端唯一会列出别的图传板的
|
||
* 时候——**画面不会**因此进来，接收端那道闸门只管帧，不管发现（见 `cam_core::receiver`）。
|
||
*/
|
||
|
||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||
|
||
import { api } from "../lib/ipc";
|
||
import { teamName } from "../lib/format";
|
||
import type {
|
||
ConfigView,
|
||
CrosshairConfig,
|
||
HudView,
|
||
Snapshot,
|
||
} from "../lib/types";
|
||
import { Button, Field, Section, Select, Slider, Switch } from "./controls";
|
||
|
||
interface Props {
|
||
snapshot: Snapshot;
|
||
hud: HudView;
|
||
onHud: (hud: HudView) => void;
|
||
calibrating: boolean;
|
||
onCalibrating: (active: boolean) => void;
|
||
onClose: () => void;
|
||
onNeedsUnlock: (reason: string) => void;
|
||
onError: (message: string) => void;
|
||
onInfo: (message: string) => void;
|
||
/** 配置变了（身份/绑定）。App 用它立刻刷新顶层状态。 */
|
||
onConfig: (config: ConfigView) => void;
|
||
}
|
||
|
||
/** HUD 的滑杆每动一下都会触发保存，节流一下，免得写盘几十次。 */
|
||
const SAVE_DEBOUNCE_MS = 350;
|
||
|
||
export function SettingsPanel({
|
||
snapshot,
|
||
hud,
|
||
onHud,
|
||
calibrating,
|
||
onCalibrating,
|
||
onClose,
|
||
onNeedsUnlock,
|
||
onError,
|
||
onInfo,
|
||
onConfig,
|
||
}: Props) {
|
||
const config = snapshot.config;
|
||
const locked = !snapshot.unlocked && config.role !== "referee";
|
||
|
||
// 打开面板时放开发现列表（后端会校验是否已解锁）。
|
||
useEffect(() => {
|
||
if (locked) return;
|
||
|
||
void api.setDiscoveryOpen(true).catch((err) => {
|
||
onNeedsUnlock(err instanceof Error ? err.message : String(err));
|
||
});
|
||
|
||
return () => {
|
||
void api.setDiscoveryOpen(false).catch(() => undefined);
|
||
};
|
||
}, [locked, onNeedsUnlock]);
|
||
|
||
// HUD 的保存节流。滑杆一停就写。
|
||
const [pending, setPending] = useState<HudView | null>(null);
|
||
|
||
useEffect(() => {
|
||
if (!pending) return;
|
||
|
||
const timer = window.setTimeout(() => {
|
||
setPending(null);
|
||
void api.saveHud(pending).then(onConfig).catch((err) => {
|
||
onError(err instanceof Error ? err.message : String(err));
|
||
});
|
||
}, SAVE_DEBOUNCE_MS);
|
||
|
||
return () => window.clearTimeout(timer);
|
||
}, [pending, onConfig, onError]);
|
||
|
||
const update = useCallback(
|
||
(change: (draft: HudView) => void) => {
|
||
const next = structuredClone(hud);
|
||
change(next);
|
||
onHud(next);
|
||
setPending(next);
|
||
},
|
||
[hud, onHud],
|
||
);
|
||
|
||
const run = async (action: () => Promise<ConfigView>) => {
|
||
try {
|
||
onConfig(await action());
|
||
await api.refresh();
|
||
} catch (err) {
|
||
const message = err instanceof Error ? err.message : String(err);
|
||
|
||
if (message.includes("密码")) {
|
||
onNeedsUnlock(message);
|
||
return;
|
||
}
|
||
|
||
onError(message);
|
||
}
|
||
};
|
||
|
||
const cameraOptions = useMemo(
|
||
() =>
|
||
snapshot.cameras.map((camera) => ({
|
||
value: camera.id,
|
||
label: camera.idText,
|
||
hint: `${camera.addr} · ${camera.online ? "在线" : "离线"}${
|
||
snapshot.stats.find((s) => s.camera === camera.id)?.hasFrames ? "" : " · 无画面"
|
||
}`,
|
||
})),
|
||
[snapshot.cameras, snapshot.stats],
|
||
);
|
||
|
||
const armorOptions = useMemo(
|
||
() =>
|
||
snapshot.armorBoards.map((board) => ({
|
||
value: board.id,
|
||
label: board.idText,
|
||
hint: `${board.addr} · ${teamName(board.team, snapshot.config.teamNames)} · ${board.hp} 血 · ${
|
||
board.online ? "在线" : "离线"
|
||
}`,
|
||
})),
|
||
[snapshot.armorBoards, snapshot.config.teamNames],
|
||
);
|
||
|
||
return (
|
||
<aside className="drawer">
|
||
<header className="drawer__head">
|
||
<h2 className="drawer__title">设置</h2>
|
||
<div className="drawer__head-actions">
|
||
{config.role === "team" && (
|
||
<Button
|
||
variant="ghost"
|
||
onClick={() => {
|
||
void api.lock().then(() => {
|
||
onInfo("已重新上锁。");
|
||
onClose();
|
||
});
|
||
}}
|
||
>
|
||
上锁
|
||
</Button>
|
||
)}
|
||
<Button variant="ghost" onClick={onClose}>
|
||
关闭
|
||
</Button>
|
||
</div>
|
||
</header>
|
||
|
||
{locked && (
|
||
<p className="drawer__locked">
|
||
这个面板的改动需要密码。<button onClick={() => onNeedsUnlock("改动设置需要密码")}>立即解锁</button>
|
||
</p>
|
||
)}
|
||
|
||
<div className="drawer__body">
|
||
<Section title="身份">
|
||
<Field label="这台机器是哪一端">
|
||
<Select
|
||
value={config.role}
|
||
options={[
|
||
{ value: "team", label: "用户端", hint: "一路画面 + 血条 + 瞄准器" },
|
||
{ value: "referee", label: "裁判端", hint: "两路 + 双方血量 + 录制" },
|
||
]}
|
||
onChange={(role) => void run(() => api.setRole(role))}
|
||
/>
|
||
</Field>
|
||
<p className="section__note">
|
||
离开用户端要密码：否则切到裁判端就能看两路画面、也能随便改配置。
|
||
</p>
|
||
</Section>
|
||
|
||
{config.role === "team" && (
|
||
<>
|
||
<Section
|
||
title="绑定"
|
||
hint="图传板与装甲板都用 MAC 派生的 id 标识，重启不变，所以绑定是稳的。改动需要密码。"
|
||
>
|
||
<Field label="摄像头（图传板）">
|
||
<Select
|
||
value={config.cameraId}
|
||
options={cameraOptions}
|
||
onChange={(id) => void run(() => api.bindCamera(id))}
|
||
/>
|
||
</Field>
|
||
|
||
<Field label="装甲板主板" hint="决定血条读谁的血量。下拉里是场上正在广播的板子。">
|
||
<Select
|
||
value={config.armorId}
|
||
options={armorOptions}
|
||
onChange={(id) => void run(() => api.bindArmor(id))}
|
||
/>
|
||
</Field>
|
||
|
||
<Field
|
||
label="自己属于哪一边"
|
||
hint="改错队号会把对手的血条当成自己的：画面左上角那一条就会是对手的血。"
|
||
>
|
||
<Select
|
||
value={config.team}
|
||
options={[
|
||
{ value: 0, label: `${teamName(0, config.teamNames)}（红）` },
|
||
{ value: 1, label: `${teamName(1, config.teamNames)}（蓝）` },
|
||
]}
|
||
onChange={(team) => void run(() => api.setTeam(team))}
|
||
/>
|
||
</Field>
|
||
|
||
<Switch
|
||
checked={config.mirror}
|
||
label="左右镜像画面（摄像头装反了）"
|
||
onChange={(mirror) => void run(() => api.setMirror(mirror))}
|
||
/>
|
||
|
||
{cameraOptions.length === 0 && (
|
||
<p className="section__note section__note--warn">
|
||
现在没有发现任何图传板。板子每 2 秒广播一次，确认它已上电、和这台机器在同一个
|
||
网络里，然后稍等。
|
||
</p>
|
||
)}
|
||
</Section>
|
||
|
||
<Section title="瞄准器" hint="位置跟着画面走，大小不跟着缩放走——放大后准星更精确。">
|
||
<Switch
|
||
checked={hud.crosshair.visible}
|
||
label="显示瞄准器"
|
||
onChange={(visible) =>
|
||
update((draft) => {
|
||
draft.crosshair.visible = visible;
|
||
})
|
||
}
|
||
/>
|
||
|
||
<Field label="样式">
|
||
<Select
|
||
value={hud.crosshair.style}
|
||
options={[
|
||
{ value: "cross", label: "四臂十字" },
|
||
{ value: "cross-dot", label: "十字 + 中心点" },
|
||
{ value: "circle-dot", label: "圆环 + 中心点" },
|
||
{ value: "dot", label: "只有点" },
|
||
]}
|
||
onChange={(style) =>
|
||
update((draft) => {
|
||
draft.crosshair.style = style;
|
||
})
|
||
}
|
||
/>
|
||
</Field>
|
||
|
||
<Field label="大小" hint="画面短边的比例">
|
||
<Slider
|
||
value={hud.crosshair.size}
|
||
min={0.01}
|
||
max={0.2}
|
||
step={0.005}
|
||
format={(value) => `${(value * 100).toFixed(1)}%`}
|
||
onChange={(size) =>
|
||
update((draft) => {
|
||
draft.crosshair.size = size;
|
||
})
|
||
}
|
||
/>
|
||
</Field>
|
||
|
||
<Field label="线宽">
|
||
<Slider
|
||
value={hud.crosshair.thickness}
|
||
min={0.001}
|
||
max={0.02}
|
||
step={0.0005}
|
||
format={(value) => value.toFixed(4)}
|
||
onChange={(thickness) =>
|
||
update((draft) => {
|
||
draft.crosshair.thickness = thickness;
|
||
})
|
||
}
|
||
/>
|
||
</Field>
|
||
|
||
<Field label="中心空隙">
|
||
<Slider
|
||
value={hud.crosshair.gap}
|
||
min={0}
|
||
max={0.1}
|
||
step={0.002}
|
||
format={(value) => `${(value * 100).toFixed(1)}%`}
|
||
onChange={(gap) =>
|
||
update((draft) => {
|
||
draft.crosshair.gap = gap;
|
||
})
|
||
}
|
||
/>
|
||
</Field>
|
||
|
||
<Field label="颜色">
|
||
<input
|
||
className="color"
|
||
type="color"
|
||
value={hud.crosshair.color}
|
||
onChange={(event) =>
|
||
update((draft) => {
|
||
draft.crosshair.color = event.target.value;
|
||
})
|
||
}
|
||
/>
|
||
</Field>
|
||
|
||
<Calibration
|
||
crosshair={hud.crosshair}
|
||
calibrating={calibrating}
|
||
onCalibrating={onCalibrating}
|
||
onChange={(offsetX, offsetY) =>
|
||
update((draft) => {
|
||
draft.crosshair.offsetX = offsetX;
|
||
draft.crosshair.offsetY = offsetY;
|
||
})
|
||
}
|
||
/>
|
||
</Section>
|
||
|
||
<Section title="叠加与提示">
|
||
<Switch
|
||
checked={hud.grid.visible}
|
||
label="显示网格"
|
||
onChange={(visible) =>
|
||
update((draft) => {
|
||
draft.grid.visible = visible;
|
||
})
|
||
}
|
||
/>
|
||
|
||
{hud.grid.visible && (
|
||
<>
|
||
<Field label="网格样式">
|
||
<Select
|
||
value={hud.grid.style}
|
||
options={[
|
||
{ value: "thirds", label: "三分线" },
|
||
{ value: "squares", label: "等分方格" },
|
||
{ value: "cross", label: "中心十字" },
|
||
]}
|
||
onChange={(style) =>
|
||
update((draft) => {
|
||
draft.grid.style = style;
|
||
})
|
||
}
|
||
/>
|
||
</Field>
|
||
|
||
{hud.grid.style === "squares" && (
|
||
<Field label="等分数">
|
||
<Slider
|
||
value={hud.grid.divisions}
|
||
min={2}
|
||
max={16}
|
||
step={1}
|
||
format={(value) => `${value} 格`}
|
||
onChange={(divisions) =>
|
||
update((draft) => {
|
||
draft.grid.divisions = divisions;
|
||
})
|
||
}
|
||
/>
|
||
</Field>
|
||
)}
|
||
|
||
<Field label="网格明显程度">
|
||
<Slider
|
||
value={hud.grid.opacity}
|
||
min={0.05}
|
||
max={1}
|
||
step={0.01}
|
||
format={(value) => value.toFixed(2)}
|
||
onChange={(opacity) =>
|
||
update((draft) => {
|
||
draft.grid.opacity = opacity;
|
||
})
|
||
}
|
||
/>
|
||
</Field>
|
||
</>
|
||
)}
|
||
|
||
<Switch
|
||
checked={hud.showZoom}
|
||
label="显示放大倍率"
|
||
onChange={(showZoom) =>
|
||
update((draft) => {
|
||
draft.showZoom = showZoom;
|
||
})
|
||
}
|
||
/>
|
||
|
||
<Switch
|
||
checked={hud.hitFeedback.flash}
|
||
label="被打中时闪红"
|
||
onChange={(flash) =>
|
||
update((draft) => {
|
||
draft.hitFeedback.flash = flash;
|
||
})
|
||
}
|
||
/>
|
||
|
||
<Switch
|
||
checked={hud.hitFeedback.marker}
|
||
label="在瞄点旁显示伤害数字"
|
||
onChange={(marker) =>
|
||
update((draft) => {
|
||
draft.hitFeedback.marker = marker;
|
||
})
|
||
}
|
||
/>
|
||
|
||
<Field label="闪红强度">
|
||
<Slider
|
||
value={hud.hitFeedback.intensity}
|
||
min={0.2}
|
||
max={2}
|
||
step={0.1}
|
||
format={(value) => `${value.toFixed(1)}×`}
|
||
onChange={(intensity) =>
|
||
update((draft) => {
|
||
draft.hitFeedback.intensity = intensity;
|
||
})
|
||
}
|
||
/>
|
||
</Field>
|
||
</Section>
|
||
|
||
<Section
|
||
title="血条"
|
||
hint="条挂在画面两个上角：左上角是自己、右上角是对手。一条分 5 格，一格 20 点血。"
|
||
>
|
||
<Switch
|
||
checked={hud.health.visible}
|
||
label="显示血条"
|
||
onChange={(visible) =>
|
||
update((draft) => {
|
||
draft.health.visible = visible;
|
||
})
|
||
}
|
||
/>
|
||
<Switch
|
||
checked={hud.health.showNumbers}
|
||
label="显示血量数字"
|
||
onChange={(showNumbers) =>
|
||
update((draft) => {
|
||
draft.health.showNumbers = showNumbers;
|
||
})
|
||
}
|
||
/>
|
||
<Switch
|
||
checked={hud.health.showTeamName}
|
||
label="显示队伍名"
|
||
onChange={(showTeamName) =>
|
||
update((draft) => {
|
||
draft.health.showTeamName = showTeamName;
|
||
})
|
||
}
|
||
/>
|
||
<Switch
|
||
checked={hud.health.pulse}
|
||
label="低血时脉动"
|
||
onChange={(pulse) =>
|
||
update((draft) => {
|
||
draft.health.pulse = pulse;
|
||
})
|
||
}
|
||
/>
|
||
<Field label="低血阈值">
|
||
<Slider
|
||
value={hud.health.lowThreshold}
|
||
min={5}
|
||
max={100}
|
||
step={5}
|
||
format={(value) => `${value} 血`}
|
||
onChange={(lowThreshold) =>
|
||
update((draft) => {
|
||
draft.health.lowThreshold = lowThreshold;
|
||
})
|
||
}
|
||
/>
|
||
</Field>
|
||
<Field label="血条宽度" hint="占画面宽度的比例">
|
||
<Slider
|
||
value={hud.health.width}
|
||
min={0.15}
|
||
max={0.9}
|
||
step={0.01}
|
||
format={(value) => `${(value * 100).toFixed(0)}%`}
|
||
onChange={(width) =>
|
||
update((draft) => {
|
||
draft.health.width = width;
|
||
})
|
||
}
|
||
/>
|
||
</Field>
|
||
</Section>
|
||
</>
|
||
)}
|
||
|
||
{config.role === "referee" && (
|
||
<Section
|
||
title="裁判端槽位"
|
||
hint="默认按装甲板自报的队伍自动分左右。有烧错固件的板子时打开手动指定。"
|
||
>
|
||
<Switch
|
||
checked={snapshot.slots.manual}
|
||
label="手动指定槽位"
|
||
onChange={(manual) =>
|
||
void run(() =>
|
||
api.setRefereeSlots({
|
||
cameraA: snapshot.slots.cameraA,
|
||
cameraB: snapshot.slots.cameraB,
|
||
armorA: snapshot.slots.armorA,
|
||
armorB: snapshot.slots.armorB,
|
||
manual,
|
||
}),
|
||
)
|
||
}
|
||
/>
|
||
|
||
{snapshot.slots.manual && (
|
||
<>
|
||
<Field label={`左格：${teamName(0, config.teamNames)}摄像头`}>
|
||
<Select
|
||
value={snapshot.slots.cameraA}
|
||
options={cameraOptions}
|
||
onChange={(cameraA) =>
|
||
void run(() =>
|
||
api.setRefereeSlots({ ...snapshot.slots, cameraA, manual: true }),
|
||
)
|
||
}
|
||
/>
|
||
</Field>
|
||
<Field label={`左格：${teamName(0, config.teamNames)}装甲板`}>
|
||
<Select
|
||
value={snapshot.slots.armorA}
|
||
options={armorOptions}
|
||
onChange={(armorA) =>
|
||
void run(() =>
|
||
api.setRefereeSlots({ ...snapshot.slots, armorA, manual: true }),
|
||
)
|
||
}
|
||
/>
|
||
</Field>
|
||
<Field label={`右格：${teamName(1, config.teamNames)}摄像头`}>
|
||
<Select
|
||
value={snapshot.slots.cameraB}
|
||
options={cameraOptions}
|
||
onChange={(cameraB) =>
|
||
void run(() =>
|
||
api.setRefereeSlots({ ...snapshot.slots, cameraB, manual: true }),
|
||
)
|
||
}
|
||
/>
|
||
</Field>
|
||
<Field label={`右格：${teamName(1, config.teamNames)}装甲板`}>
|
||
<Select
|
||
value={snapshot.slots.armorB}
|
||
options={armorOptions}
|
||
onChange={(armorB) =>
|
||
void run(() =>
|
||
api.setRefereeSlots({ ...snapshot.slots, armorB, manual: true }),
|
||
)
|
||
}
|
||
/>
|
||
</Field>
|
||
</>
|
||
)}
|
||
</Section>
|
||
)}
|
||
|
||
<Section title="录制与截图" hint="截图存 PNG，录制存 mp4（需要 ffmpeg）。">
|
||
<Field label="输出目录">
|
||
<input
|
||
className="input"
|
||
type="text"
|
||
defaultValue={config.recordingDir}
|
||
onBlur={(event) => {
|
||
const value = event.target.value.trim();
|
||
if (value !== config.recordingDir) {
|
||
void run(() => api.setRecordingOptions({ dir: value, ffmpeg: null, crf: null, preset: null }));
|
||
}
|
||
}}
|
||
/>
|
||
</Field>
|
||
<Field label="ffmpeg 路径" hint="默认从 PATH 找。找不到就录不了，但界面照常用。">
|
||
<input
|
||
className="input"
|
||
type="text"
|
||
defaultValue={config.ffmpeg}
|
||
onBlur={(event) => {
|
||
const value = event.target.value.trim();
|
||
if (value && value !== config.ffmpeg) {
|
||
void run(() => api.setRecordingOptions({ dir: null, ffmpeg: value, crf: null, preset: null }));
|
||
}
|
||
}}
|
||
/>
|
||
</Field>
|
||
<p className="section__note">
|
||
界面内回放要目录在资源协议的白名单里（默认的 ~/Movies/cam-desktop 就在）。
|
||
改到别处时回放会失败，界面上会给出"用系统播放器打开"的退路。
|
||
</p>
|
||
</Section>
|
||
|
||
<Section title="安全" hint="密码只挡现场随手改绑；配置文件与程序都在本机，愿意改的人绕得过去。">
|
||
<ChangePassword onDone={onInfo} onError={onError} />
|
||
<div className="row">
|
||
<Button
|
||
variant="danger"
|
||
onClick={() => {
|
||
if (!window.confirm("清空配置？旧文件会被改名成 .bak，然后需要重启程序。")) return;
|
||
void api.clearConfig().then(
|
||
(message) => onInfo(message),
|
||
(err) => {
|
||
const text = err instanceof Error ? err.message : String(err);
|
||
if (text.includes("密码")) onNeedsUnlock(text);
|
||
else onError(text);
|
||
},
|
||
);
|
||
}}
|
||
>
|
||
清空配置
|
||
</Button>
|
||
|
||
<Button
|
||
variant="danger"
|
||
onClick={() => {
|
||
if (!window.confirm("退出程序？正在进行的录制会先收尾。")) return;
|
||
void api.quit().catch((err) => {
|
||
const text = err instanceof Error ? err.message : String(err);
|
||
if (text.includes("密码")) onNeedsUnlock(text);
|
||
else onError(text);
|
||
});
|
||
}}
|
||
>
|
||
退出程序
|
||
</Button>
|
||
</div>
|
||
</Section>
|
||
</div>
|
||
</aside>
|
||
);
|
||
}
|
||
|
||
/** 瞄准器偏移：拖画面校准 + 数值微调 + 归零。 */
|
||
function Calibration({
|
||
crosshair,
|
||
calibrating,
|
||
onCalibrating,
|
||
onChange,
|
||
}: {
|
||
crosshair: CrosshairConfig;
|
||
calibrating: boolean;
|
||
onCalibrating: (active: boolean) => void;
|
||
onChange: (offsetX: number, offsetY: number) => void;
|
||
}) {
|
||
return (
|
||
<div className="calibration">
|
||
<Switch
|
||
checked={calibrating}
|
||
label="拖动画面校准瞄准点"
|
||
onChange={onCalibrating}
|
||
/>
|
||
|
||
<p className="section__note">
|
||
摄像头与枪管不同轴时用这里把瞄点挪到弹着点上。偏移存的是<span className="em">画面比例</span>
|
||
，所以换分辨率、换窗口大小都不影响它。
|
||
</p>
|
||
|
||
<Field label="水平偏移" hint={`${(crosshair.offsetX * 100).toFixed(2)}%`}>
|
||
<Slider
|
||
value={crosshair.offsetX}
|
||
min={-0.3}
|
||
max={0.3}
|
||
step={0.001}
|
||
format={(value) => `${(value * 100).toFixed(2)}%`}
|
||
onChange={(value) => onChange(value, crosshair.offsetY)}
|
||
/>
|
||
</Field>
|
||
|
||
<Field label="垂直偏移" hint={`${(crosshair.offsetY * 100).toFixed(2)}%`}>
|
||
<Slider
|
||
value={crosshair.offsetY}
|
||
min={-0.3}
|
||
max={0.3}
|
||
step={0.001}
|
||
format={(value) => `${(value * 100).toFixed(2)}%`}
|
||
onChange={(value) => onChange(crosshair.offsetX, value)}
|
||
/>
|
||
</Field>
|
||
|
||
<Button variant="ghost" onClick={() => onChange(0, 0)}>
|
||
偏移归零
|
||
</Button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/** 改密码。 */
|
||
function ChangePassword({
|
||
onDone,
|
||
onError,
|
||
}: {
|
||
onDone: (message: string) => void;
|
||
onError: (message: string) => void;
|
||
}) {
|
||
const [current, setCurrent] = useState("");
|
||
const [fresh, setFresh] = useState("");
|
||
const [busy, setBusy] = useState(false);
|
||
|
||
return (
|
||
<div className="password-change">
|
||
<input
|
||
className="input"
|
||
type="password"
|
||
placeholder="当前密码"
|
||
autoComplete="off"
|
||
value={current}
|
||
onChange={(event) => setCurrent(event.target.value)}
|
||
/>
|
||
<input
|
||
className="input"
|
||
type="password"
|
||
placeholder="新密码（≥4 位）"
|
||
autoComplete="new-password"
|
||
value={fresh}
|
||
onChange={(event) => setFresh(event.target.value)}
|
||
/>
|
||
<Button
|
||
disabled={busy || fresh.length < 4}
|
||
onClick={() => {
|
||
setBusy(true);
|
||
void api
|
||
.setPassword(fresh, current)
|
||
.then(() => {
|
||
onDone("密码已更新。");
|
||
setCurrent("");
|
||
setFresh("");
|
||
})
|
||
.catch((err) => onError(err instanceof Error ? err.message : String(err)))
|
||
.finally(() => setBusy(false));
|
||
}}
|
||
>
|
||
{busy ? "保存中…" : "修改密码"}
|
||
</Button>
|
||
</div>
|
||
);
|
||
}
|