diff --git a/client/src/pages/SystemPage.tsx b/client/src/pages/SystemPage.tsx
index a84dbd7..5e1d383 100644
--- a/client/src/pages/SystemPage.tsx
+++ b/client/src/pages/SystemPage.tsx
@@ -2,7 +2,8 @@
SYSTEM PAGE — Settings
Design: Reference luxsin_x8_设置.png
Sections:
- - 显示: 屏幕亮度, 自动锁屏, 旋钮亮度, 旋钮熄屏呼吸灯
+ - 显示: 屏幕亮度, 自动锁屏
+ - 氛围灯: 总开关, RGB 通道调节
- 通用: 语言, 自动返回首页, 休眠
- 声音: 开机提示音
- 关于: 设备名, 固件版本, MAC
@@ -11,18 +12,18 @@
import { useDevice } from "@/contexts/DeviceContext";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { useLocation } from "wouter";
-import { useEffect } from "react";
+import { useEffect, useRef, useState } from "react";
import BottomNav from "@/components/BottomNav";
-import { formatFirmwareVersionDisplay } from "@/lib/luxsinApi";
+import { clampLedChannel, formatFirmwareVersionDisplay } from "@/lib/luxsinApi";
import { navigateToSelect } from "./SelectPage";
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 }) {
+function IOSToggle({ checked, onChange, label }: { checked: boolean; onChange: (v: boolean) => void; label: string }) {
return (
);
@@ -36,21 +37,55 @@ function SectionHeader({ title }: { title: string }) {
);
}
-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;
+function CyanSlider({ value, min, max, step = 1, label, onChange, onRelease }: {
+ value: number;
+ min: number;
+ max: number;
+ step?: number;
+ label: string;
+ 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 (
+
+
+
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);
+ }
+ }}
+ />
+
+ );
+}
+
+function ListRow({ label, description, value, onClick }: {
+ label: string; description?: string; value?: string;
+ onClick?: () => void;
}) {
- if (toggle) {
- return (
-
-
-
{label}
- {description &&
{description}
}
-
-
{})} />
-
- );
- }
return (