Enhance audio settings: Added loudness controls and headphone model synchronization. Updated PeqState interface to include peq filters. Improved EQPage to dynamically load headphone models based on device state.

client/src/pages/EffectsPage.tsx

@@ -66,6 +66,9 @@ export default function EffectsPage() {
   const colorMidGain = (ds?.color_mid_gain ?? 0) / 10;
   const colorTrebleGain = (ds?.color_treble_gain ?? 0) / 10;
   const loudnessOn = (ds?.loudness_enable ?? 0) === 1;
+  const loudnessThreshold = ds?.loudness_threshold_gain ?? 0;
+  const loudnessBassGain = (ds?.loudness_bass_gain ?? 0) / 10;
+  const loudnessTrebleGain = (ds?.loudness_treble_gain ?? 0) / 10;
 
   const [localBass, setLocalBass] = useState(colorBassGain);
   const [localMid, setLocalMid] = useState(colorMidGain);
@@ -74,11 +77,21 @@ export default function EffectsPage() {
   const isDraggingMid = useRef(false);
   const isDraggingTreble = useRef(false);
 
+  const [localLoudnessThreshold, setLocalLoudnessThreshold] = useState(loudnessThreshold);
+  const [localLoudnessBass, setLocalLoudnessBass] = useState(loudnessBassGain);
+  const [localLoudnessTreble, setLocalLoudnessTreble] = useState(loudnessTrebleGain);
+  const isDraggingLoudnessThreshold = useRef(false);
+  const isDraggingLoudnessBass = useRef(false);
+  const isDraggingLoudnessTreble = useRef(false);
+
   useEffect(() => {
     if (!isDraggingBass.current) setLocalBass(colorBassGain);
     if (!isDraggingMid.current) setLocalMid(colorMidGain);
     if (!isDraggingTreble.current) setLocalTreble(colorTrebleGain);
-  }, [colorBassGain, colorMidGain, colorTrebleGain]);
+    if (!isDraggingLoudnessThreshold.current) setLocalLoudnessThreshold(loudnessThreshold);
+    if (!isDraggingLoudnessBass.current) setLocalLoudnessBass(loudnessBassGain);
+    if (!isDraggingLoudnessTreble.current) setLocalLoudnessTreble(loudnessTrebleGain);
+  }, [colorBassGain, colorMidGain, colorTrebleGain, loudnessThreshold, loudnessBassGain, loudnessTrebleGain]);
 
   const [localWidth, setLocalWidth] = useState(widthVal);
   const isDragging = useRef(false);
@@ -234,6 +247,76 @@ export default function EffectsPage() {
             <span className="text-[16px] font-medium text-white">响度</span>
             <IOSToggle checked={loudnessOn} onChange={(v) => updateSetting({ loudness_enable: v ? 1 : 0 })} />
           </div>
+          
+          {loudnessOn && (
+            <div className="space-y-4 mt-4">
+              {/* 阈值 */}
+              <div>
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-[14px] text-white/60">阈值</span>
+                  <span className="text-[14px] font-bold" style={{ color: "#00FFF6" }}>{localLoudnessThreshold}</span>
+                </div>
+                <CyanSlider 
+                  value={localLoudnessThreshold} 
+                  min={-30} 
+                  max={0} 
+                  step={1}
+                  onChange={(v) => {
+                    isDraggingLoudnessThreshold.current = true;
+                    setLocalLoudnessThreshold(v);
+                  }}
+                  onMouseUp={() => {
+                    isDraggingLoudnessThreshold.current = false;
+                    updateSetting({ loudness_threshold_gain: Math.round(localLoudnessThreshold) });
+                  }}
+                />
+              </div>
+              
+              {/* 低音 */}
+              <div>
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-[14px] text-white/60">低音</span>
+                  <span className="text-[14px] font-bold" style={{ color: "#00FFF6" }}>{localLoudnessBass.toFixed(1)}</span>
+                </div>
+                <CyanSlider 
+                  value={localLoudnessBass} 
+                  min={0} 
+                  max={10} 
+                  step={0.1}
+                  onChange={(v) => {
+                    isDraggingLoudnessBass.current = true;
+                    setLocalLoudnessBass(v);
+                  }}
+                  onMouseUp={() => {
+                    isDraggingLoudnessBass.current = false;
+                    updateSetting({ loudness_bass_gain: Math.round(localLoudnessBass * 10) });
+                  }}
+                />
+              </div>
+              
+              {/* 高音 */}
+              <div>
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-[14px] text-white/60">高音</span>
+                  <span className="text-[14px] font-bold" style={{ color: "#00FFF6" }}>{localLoudnessTreble.toFixed(1)}</span>
+                </div>
+                <CyanSlider 
+                  value={localLoudnessTreble} 
+                  min={0} 
+                  max={10} 
+                  step={0.1}
+                  onChange={(v) => {
+                    isDraggingLoudnessTreble.current = true;
+                    setLocalLoudnessTreble(v);
+                  }}
+                  onMouseUp={() => {
+                    isDraggingLoudnessTreble.current = false;
+                    updateSetting({ loudness_treble_gain: Math.round(localLoudnessTreble * 10) });
+                  }}
+                />
+              </div>
+            </div>
+          )}
         </div>
       </div>
       </div>