desktop: 用户端与裁判端两套页面（Tauri v2 + React），删掉 Slint 客户端
界面部分。后端在前一个提交里，这一提交把它接上，并删掉 client/。 用户端： - 底部胶囊血条（宽度/数字/阈值/脉动可配），未接入时显示占位说明而不是 0； - 瞄准器画在 canvas 上并与画面共用同一次变换计算——位置跟着缩放走、大小不跟， 像真瞄具；偏移校准存的是画面比例而不是像素，换分辨率不会失效； - 命中反馈：整屏闪红 + 抖动 + 准星旁的伤害数字。大号数字刻意不放画面正中： 第一版放了，正好压住瞄准点。掉血事件由相邻两次读数之差派生（主板只报"现在多少血"）； - 摄像头/装甲板下拉绑定、队伍号、镜像；改动要密码，退出/关闭也要。 裁判端： - 两路等宽（flex: 1 1 0 + min-width: 0）各自独立缩放； - 装甲板发现列表：id、地址、自报队伍、血量、四条齐不齐、静默多久、分到哪个槽位； - 截图 PNG + ffmpeg 录 mp4，界面内回放（资源协议白名单外的目录给"用系统播放器打开"的退路）。 密码：Argon2id PHC，首启强制设置，会话内解锁一次。执行点在 Rust 侧命令里，界面上的 解锁对话框只是入口。故意不做 --camera-id 这类命令行覆盖：那是一条不用密码就能改绑的路。 其它： - 配置换成 serde + toml，字段名统一 camelCase（磁盘=IPC=TS），仍然拒绝未知键名， 原子写；旧客户端配置首次启动导入并备份成 .bak（只在默认路径下做）； - 演示模式（CAM_DEMO=1）合成协议数据报喂进真实接收路径，没有板子也能把整条链路跑起来； - 仅 dev 的浏览器预览（?preview=referee），两重门保证不进正式产物（已验证）； - CSP 收紧成白名单，验证方式是"前端能不能连上后端"：clients 从 0 变成 1 同时证明 JS 加载、IPC、WebSocket、React effect 四件事。 删掉 client/：它的功能全部被 desktop/ 覆盖，且其中有几处真 bug 在新实现里改掉了 （槽位分配会让两格显示同一块板子、帧率窗口基线、密码哈希截断被当成密码错、录制文件名 同秒互相覆盖）。注意 client/ 里那几处**未提交**的改动随之丢弃，历史里的版本还在。 测试：protocol 15、cam-core 69、src-tauri 30；前端 tsc + vite build 通过。
This commit is contained in:
@@ -0,0 +1,767 @@
|
||||
/**
|
||||
* 设置抽屉。两端的"改东西"都收在这里，所以密码闸门也只有一个入口。
|
||||
*
|
||||
* # 打开面板 ≠ 解锁
|
||||
*
|
||||
* 面板本身由 `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)} · ${board.hp} 血 · ${
|
||||
board.online ? "在线" : "离线"
|
||||
}`,
|
||||
})),
|
||||
[snapshot.armorBoards],
|
||||
);
|
||||
|
||||
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: "队伍一（红）" },
|
||||
{ value: 1, label: "队伍二（蓝）" },
|
||||
]}
|
||||
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.shake}
|
||||
label="被打中时画面抖动"
|
||||
onChange={(shake) =>
|
||||
update((draft) => {
|
||||
draft.hitFeedback.shake = shake;
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
<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="血条">
|
||||
<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="左格：队伍一摄像头">
|
||||
<Select
|
||||
value={snapshot.slots.cameraA}
|
||||
options={cameraOptions}
|
||||
onChange={(cameraA) =>
|
||||
void run(() =>
|
||||
api.setRefereeSlots({ ...snapshot.slots, cameraA, manual: true }),
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="左格：队伍一装甲板">
|
||||
<Select
|
||||
value={snapshot.slots.armorA}
|
||||
options={armorOptions}
|
||||
onChange={(armorA) =>
|
||||
void run(() =>
|
||||
api.setRefereeSlots({ ...snapshot.slots, armorA, manual: true }),
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="右格：队伍二摄像头">
|
||||
<Select
|
||||
value={snapshot.slots.cameraB}
|
||||
options={cameraOptions}
|
||||
onChange={(cameraB) =>
|
||||
void run(() =>
|
||||
api.setRefereeSlots({ ...snapshot.slots, cameraB, manual: true }),
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="右格：队伍二装甲板">
|
||||
<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">
|
||||
摄像头与枪管不同轴时用这里把瞄点挪到弹着点上。偏移存的是**画面比例**，所以换分辨率、
|
||||
换窗口大小都不影响它。
|
||||
</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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user