新增氛围灯功能，对 EQ 名称长度做限制

client/src/pages/SystemPage.tsx

@@ -11,10 +11,15 @@
 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 { navigateToSelect } from "./SelectPage";
-import { formatFirmwareVersionDisplay } from "@/lib/luxsinApi";
+import {
+  clampLedChannel,
+  formatFirmwareVersionDisplay,
+  parseFirmwareVersion,
+  supportsAmbientLed,
+} from "@/lib/luxsinApi";
 import localeZh from "@/locales/data-zh.json";
 import localeZhHK from "@/locales/data-zh-HK.json";
 import localeEn from "@/locales/data-en.json";
@@ -36,6 +41,60 @@ function SectionHeader({ title }: { title: string }) {
   );
 }
 
+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;
@@ -92,6 +151,11 @@ type LocaleSettings = {
       firmwareVersion: string;
       macAddress: string;
       deviceIp: string;
+      sectionAmbientLight?: string;
+      ambientLight?: string;
+      ledRed?: string;
+      ledGreen?: string;
+      ledBlue?: string;
     };
   };
 };
@@ -140,6 +204,29 @@ export default function SystemPage() {
   const rawLangIdx = ds?.language ?? 2;
   const langIdx = SUPPORTED_LANGUAGE_INDICES.has(rawLangIdx) ? rawLangIdx : 2;
   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 = LOCALE_BY_LANG[langIdx] ?? localeZh;
   const settingsText = localeData.settings;
   const ui = settingsText.systemPage;
@@ -193,6 +280,91 @@ export default function SystemPage() {
             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">