eafonyang
404 lines
16 KiB
TypeScript
404 lines
16 KiB
TypeScript
/* ============================================================
|
|
SYSTEM PAGE — Settings
|
|
Design: Reference luxsin_x8_设置.png
|
|
Sections:
|
|
- 显示: 屏幕亮度, 自动锁屏, 旋钮亮度, 旋钮熄屏呼吸灯
|
|
- 通用: 语言, 自动返回首页, 休眠
|
|
- 声音: 开机提示音
|
|
- 关于: 设备名, 固件版本, MAC
|
|
All list rows with options → navigate to /select page
|
|
============================================================ */
|
|
import { useDevice } from "@/contexts/DeviceContext";
|
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
import { useLocation } from "wouter";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import BottomNav from "@/components/BottomNav";
|
|
import { navigateToSelect } from "./SelectPage";
|
|
import {
|
|
clampLedChannel,
|
|
formatFirmwareVersionDisplay,
|
|
parseFirmwareVersion,
|
|
supportsAmbientLed,
|
|
} from "@/lib/luxsinApi";
|
|
import localeEn from "@/locales/data-en.json";
|
|
import { DEFAULT_DEVICE_LANGUAGE, resolveDeviceLanguage, resolveLocalePack } from "@/locales/resolveLocale";
|
|
import { usePageTitleWithConnection } from "@/hooks/usePageTitleWithConnection";
|
|
|
|
function IOSToggle({ checked, onChange }: { checked: boolean; onChange: (v: boolean) => void }) {
|
|
return (
|
|
<label className="ios-toggle" onClick={(e) => e.stopPropagation()}>
|
|
<input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} />
|
|
<span className="ios-toggle-track"><span className="ios-toggle-thumb" /></span>
|
|
</label>
|
|
);
|
|
}
|
|
|
|
function SectionHeader({ title }: { title: string }) {
|
|
return (
|
|
<div className="px-1 pt-5 pb-2">
|
|
<span className="text-[14px] font-semibold" style={{ color: "#00FFF6" }}>{title}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CyanSlider({
|
|
value,
|
|
min,
|
|
max,
|
|
step = 1,
|
|
onChange,
|
|
onRelease,
|
|
}: {
|
|
value: number;
|
|
min: number;
|
|
max: number;
|
|
step?: number;
|
|
onChange: (v: number) => void;
|
|
onRelease?: (v: number) => void;
|
|
}) {
|
|
const fillPct = ((value - min) / (max - min)) * 100;
|
|
const emitRelease = (el: EventTarget | null) => {
|
|
if (!(el instanceof HTMLInputElement)) return;
|
|
onRelease?.(Number(el.value));
|
|
};
|
|
return (
|
|
<div className="relative flex items-center w-full mt-2">
|
|
<div
|
|
className="absolute left-0 h-[4px] rounded-full pointer-events-none"
|
|
style={{
|
|
width: `${fillPct}%`,
|
|
background: "#00FFF6",
|
|
boxShadow: "0 0 6px rgba(0,255,246,0.5)",
|
|
}}
|
|
/>
|
|
<input
|
|
type="range"
|
|
min={min}
|
|
max={max}
|
|
step={step}
|
|
value={value}
|
|
className="cyan-slider relative z-10"
|
|
onChange={(e) => onChange(Number(e.target.value))}
|
|
onPointerUp={(e) => emitRelease(e.currentTarget)}
|
|
onPointerCancel={(e) => emitRelease(e.currentTarget)}
|
|
onKeyUp={(e) => {
|
|
if (
|
|
["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "PageUp", "PageDown"].includes(
|
|
e.key,
|
|
)
|
|
) {
|
|
emitRelease(e.currentTarget);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ListRow({ label, description, value, onClick, toggle, checked, onToggle }: {
|
|
label: string; description?: string; value?: string;
|
|
onClick?: () => void; toggle?: boolean; checked?: boolean; onToggle?: (v: boolean) => void;
|
|
}) {
|
|
if (toggle) {
|
|
return (
|
|
<div className="ios-list-row">
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-[16px] text-white">{label}</div>
|
|
{description && <div className="text-[12px] text-white/35 mt-0.5">{description}</div>}
|
|
</div>
|
|
<IOSToggle checked={!!checked} onChange={onToggle ?? (() => {})} />
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<button className="ios-list-row w-full text-left active:bg-white/5 transition-colors" onClick={onClick}>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-[16px] text-white">{label}</div>
|
|
{description && <div className="text-[12px] text-white/35 mt-0.5">{description}</div>}
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
{value && <span className="ios-row-value">{value}</span>}
|
|
<ChevronRight size={16} className="ios-chevron ml-1" />
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
type LocaleSettings = {
|
|
settings: {
|
|
vu: string;
|
|
vuMeter?: string;
|
|
screenBrightness: { label: string; options: Array<{ index: number; label: string }> };
|
|
turnOffScreen: { label: string; options: Array<{ index: number; label: string }> };
|
|
knobBrightness: { label: string; options: Array<{ index: number; label: string }> };
|
|
buttonLight: { label: string; options: Array<{ index: number; label: string }> };
|
|
language: { label: string; options: Array<{ index: number; label: string }> };
|
|
Automatic: { label: string; options: Array<{ index: number; label: string }> };
|
|
sleepTime?: { label: string; options: Array<{ index: number; label: string }> };
|
|
sleep?: { label: string; options: Array<{ index: number; label: string }> };
|
|
systemPage: {
|
|
sectionDisplay: string;
|
|
sectionGeneral: string;
|
|
sectionAbout: string;
|
|
screenBrightnessDesc: string;
|
|
turnOffScreenDesc: string;
|
|
knobBrightnessDesc: string;
|
|
buttonLightDesc: string;
|
|
languageDesc: string;
|
|
automaticDesc: string;
|
|
sleepDesc: string;
|
|
deviceName: string;
|
|
firmwareVersion: string;
|
|
macAddress: string;
|
|
deviceIp: string;
|
|
sectionAmbientLight?: string;
|
|
ambientLight?: string;
|
|
ledRed?: string;
|
|
ledGreen?: string;
|
|
ledBlue?: string;
|
|
};
|
|
};
|
|
};
|
|
|
|
function optionLabels(items: Array<{ index: number; label: string }> | undefined, fallback: string[]) {
|
|
if (!items || items.length === 0) return fallback;
|
|
const sorted = [...items].sort((a, b) => a.index - b.index);
|
|
return sorted.map((item) => item.label);
|
|
}
|
|
|
|
/** Device language index: 0=en, 1=zh-HK, 2=zh-CN */
|
|
const SUPPORTED_LANGUAGE_INDICES = new Set([0, 1, 2]);
|
|
|
|
function languageLabels(
|
|
items: Array<{ index: number; label: string }> | undefined,
|
|
fallback: string[],
|
|
) {
|
|
const filtered = (items ?? []).filter((o) => SUPPORTED_LANGUAGE_INDICES.has(o.index));
|
|
if (filtered.length === 0) return fallback;
|
|
return [...filtered].sort((a, b) => a.index - b.index).map((o) => o.label);
|
|
}
|
|
|
|
export default function SystemPage() {
|
|
const [, setLocation] = useLocation();
|
|
const { deviceState, updateSetting, refresh, isConnected, api, ip } = useDevice();
|
|
const ds = deviceState;
|
|
|
|
// 页面加载且已连接时刷新数据
|
|
useEffect(() => {
|
|
if (isConnected || api) {
|
|
refresh();
|
|
}
|
|
}, [isConnected, api]);
|
|
|
|
const screenLightIdx = ds?.screenLight ?? 1;
|
|
const buttonLightIdx = ds?.buttonLight ?? 1;
|
|
const screenOffIdx = ds?.screenOff ?? 2;
|
|
const sleepIdx = ds?.sleep ?? 0;
|
|
const autoHomeIdx = ds?.autoHome ?? 1;
|
|
const rawLangIdx = resolveDeviceLanguage(ds?.language);
|
|
const langIdx = SUPPORTED_LANGUAGE_INDICES.has(rawLangIdx) ? rawLangIdx : DEFAULT_DEVICE_LANGUAGE;
|
|
const knobBreathLightOn = (ds?.knob_breathlight ?? 1) === 0;
|
|
const firmwareVersion = parseFirmwareVersion(ds?.version);
|
|
const showAmbientLed = supportsAmbientLed(firmwareVersion);
|
|
const ledOn = (ds?.led_enable ?? 0) === 1;
|
|
|
|
const [localLedRed, setLocalLedRed] = useState(() => clampLedChannel(ds?.led_red));
|
|
const [localLedGreen, setLocalLedGreen] = useState(() => clampLedChannel(ds?.led_green));
|
|
const [localLedBlue, setLocalLedBlue] = useState(() => clampLedChannel(ds?.led_blue));
|
|
const draggingLedRed = useRef(false);
|
|
const draggingLedGreen = useRef(false);
|
|
const draggingLedBlue = useRef(false);
|
|
|
|
useEffect(() => {
|
|
if (!draggingLedRed.current) setLocalLedRed(clampLedChannel(ds?.led_red));
|
|
}, [ds?.led_red]);
|
|
|
|
useEffect(() => {
|
|
if (!draggingLedGreen.current) setLocalLedGreen(clampLedChannel(ds?.led_green));
|
|
}, [ds?.led_green]);
|
|
|
|
useEffect(() => {
|
|
if (!draggingLedBlue.current) setLocalLedBlue(clampLedChannel(ds?.led_blue));
|
|
}, [ds?.led_blue]);
|
|
|
|
const localeData = resolveLocalePack(ds?.language) as LocaleSettings;
|
|
const settingsText = localeData.settings;
|
|
const ui = settingsText.systemPage;
|
|
const SCREEN_LIGHT_OPTIONS = optionLabels(settingsText.screenBrightness?.options, ["亮", "中等", "暗"]);
|
|
const KNOB_LIGHT_OPTIONS = optionLabels(settingsText.knobBrightness?.options, ["关闭", "亮", "中等", "暗"]);
|
|
const SCREEN_OFF_OPTIONS = optionLabels(settingsText.turnOffScreen?.options, ["常亮", "30秒", "1分钟", "3分钟", "5分钟"]);
|
|
const SLEEP_OPTIONS = optionLabels(settingsText.sleepTime?.options ?? settingsText.sleep?.options, ["关闭", "1分钟", "5分钟", "10分钟"]);
|
|
const AUTO_HOME_OPTIONS = optionLabels(settingsText.Automatic?.options, ["关闭", "20秒", "40秒", "60秒"]);
|
|
const LANG_OPTIONS = languageLabels(settingsText.language?.options, [
|
|
"English",
|
|
"繁體中文",
|
|
"简体中文",
|
|
]);
|
|
|
|
const sleepRowLabel =
|
|
settingsText.sleepTime?.label ??
|
|
settingsText.sleep?.label ??
|
|
(localeEn as LocaleSettings).settings.sleep?.label ??
|
|
"Sleep";
|
|
|
|
const pageTitle = usePageTitleWithConnection(settingsText.vu);
|
|
|
|
const goSelect = (title: string, options: string[], selected: number, key: string) => {
|
|
navigateToSelect(title, options, selected, "/system", key);
|
|
setLocation("/select");
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-black">
|
|
<div className="page-header">
|
|
<button onClick={() => setLocation("/")} className="mr-4 text-white/60 active:text-white transition-colors">
|
|
<ChevronLeft size={24} />
|
|
</button>
|
|
<h1 className="flex-1 text-center text-[17px] font-semibold text-white">{pageTitle}</h1>
|
|
<div className="w-8" />
|
|
</div>
|
|
|
|
<div className="px-4 pb-32">
|
|
{/* ── 显示 ── */}
|
|
<SectionHeader title={ui.sectionDisplay} />
|
|
<div className="ios-list-group">
|
|
<ListRow label={settingsText.screenBrightness.label} description={ui.screenBrightnessDesc}
|
|
value={SCREEN_LIGHT_OPTIONS[screenLightIdx]}
|
|
onClick={() => goSelect(settingsText.screenBrightness.label, SCREEN_LIGHT_OPTIONS, screenLightIdx, "screenLight")} />
|
|
<ListRow label={settingsText.turnOffScreen.label} description={ui.turnOffScreenDesc}
|
|
value={SCREEN_OFF_OPTIONS[screenOffIdx]}
|
|
onClick={() => goSelect(settingsText.turnOffScreen.label, SCREEN_OFF_OPTIONS, screenOffIdx, "screenOff")} />
|
|
<ListRow label={settingsText.knobBrightness.label} description={ui.knobBrightnessDesc}
|
|
value={KNOB_LIGHT_OPTIONS[buttonLightIdx]}
|
|
onClick={() => goSelect(settingsText.knobBrightness.label, KNOB_LIGHT_OPTIONS, buttonLightIdx, "buttonLight")} />
|
|
<ListRow label={settingsText.buttonLight.label} description={ui.buttonLightDesc}
|
|
toggle checked={knobBreathLightOn}
|
|
onToggle={(v) => updateSetting({ knob_breathlight: v ? 0 : 1 })} />
|
|
</div>
|
|
|
|
{showAmbientLed && (
|
|
<>
|
|
<SectionHeader title={ui.sectionAmbientLight ?? "氛围灯"} />
|
|
<div className="ios-list-group">
|
|
<div className="ios-list-row">
|
|
<div className="flex-1" />
|
|
<IOSToggle
|
|
checked={ledOn}
|
|
onChange={(v) => updateSetting({ led_enable: v ? 1 : 0 })}
|
|
/>
|
|
</div>
|
|
|
|
{ledOn && (
|
|
<div className="p-4 pt-0 space-y-4">
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-[14px] text-white/60">{ui.ledRed ?? "红"}</span>
|
|
<span className="text-[14px] font-bold" style={{ color: "#00FFF6" }}>
|
|
{localLedRed}
|
|
</span>
|
|
</div>
|
|
<CyanSlider
|
|
value={localLedRed}
|
|
min={0}
|
|
max={255}
|
|
onChange={(v) => {
|
|
draggingLedRed.current = true;
|
|
setLocalLedRed(v);
|
|
}}
|
|
onRelease={(v) => {
|
|
draggingLedRed.current = false;
|
|
updateSetting({ led_red: clampLedChannel(v) });
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-[14px] text-white/60">{ui.ledGreen ?? "绿"}</span>
|
|
<span className="text-[14px] font-bold" style={{ color: "#00FFF6" }}>
|
|
{localLedGreen}
|
|
</span>
|
|
</div>
|
|
<CyanSlider
|
|
value={localLedGreen}
|
|
min={0}
|
|
max={255}
|
|
onChange={(v) => {
|
|
draggingLedGreen.current = true;
|
|
setLocalLedGreen(v);
|
|
}}
|
|
onRelease={(v) => {
|
|
draggingLedGreen.current = false;
|
|
updateSetting({ led_green: clampLedChannel(v) });
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-[14px] text-white/60">{ui.ledBlue ?? "蓝"}</span>
|
|
<span className="text-[14px] font-bold" style={{ color: "#00FFF6" }}>
|
|
{localLedBlue}
|
|
</span>
|
|
</div>
|
|
<CyanSlider
|
|
value={localLedBlue}
|
|
min={0}
|
|
max={255}
|
|
onChange={(v) => {
|
|
draggingLedBlue.current = true;
|
|
setLocalLedBlue(v);
|
|
}}
|
|
onRelease={(v) => {
|
|
draggingLedBlue.current = false;
|
|
updateSetting({ led_blue: clampLedChannel(v) });
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* ── 通用 ── */}
|
|
<SectionHeader title={ui.sectionGeneral} />
|
|
<div className="ios-list-group">
|
|
<ListRow label={settingsText.language.label} description={ui.languageDesc}
|
|
value={LANG_OPTIONS[langIdx]}
|
|
onClick={() => goSelect(settingsText.language.label, LANG_OPTIONS, langIdx, "language")} />
|
|
<ListRow label={settingsText.Automatic.label} description={ui.automaticDesc}
|
|
value={AUTO_HOME_OPTIONS[autoHomeIdx]}
|
|
onClick={() => goSelect(settingsText.Automatic.label, AUTO_HOME_OPTIONS, autoHomeIdx, "autoHome")} />
|
|
<ListRow label={sleepRowLabel} description={ui.sleepDesc}
|
|
value={SLEEP_OPTIONS[sleepIdx]}
|
|
onClick={() => goSelect(sleepRowLabel, SLEEP_OPTIONS, sleepIdx, "sleep")} />
|
|
</div>
|
|
|
|
{/* ── 关于 ── */}
|
|
<SectionHeader title={ui.sectionAbout} />
|
|
<div className="ios-list-group">
|
|
<div className="ios-list-row">
|
|
<span className="flex-1 text-[16px] text-white">{ui.deviceName}</span>
|
|
<span className="ios-row-value">{ds?.device ?? "Luxsin X9"}</span>
|
|
</div>
|
|
<div className="ios-list-row">
|
|
<span className="flex-1 text-[16px] text-white">{ui.firmwareVersion}</span>
|
|
<span className="ios-row-value">{formatFirmwareVersionDisplay(ds?.version)}</span>
|
|
</div>
|
|
<div className="ios-list-row">
|
|
<span className="flex-1 text-[16px] text-white">{ui.macAddress}</span>
|
|
<span className="ios-row-value text-[12px]">{ds?.mac ?? "—"}</span>
|
|
</div>
|
|
<div className="ios-list-row">
|
|
<span className="flex-1 text-[16px] text-white">{ui.deviceIp ?? "设备 IP"}</span>
|
|
<span className="ios-row-value text-[12px]">{ip || "—"}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<BottomNav />
|
|
</div>
|
|
);
|
|
}
|