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/VUPage.tsx

@@ -14,62 +14,7 @@ interface VUStyle {
   index: number;
   name: string;
   description: string;
-  preview: React.ReactNode;
-}
-
-// Classic analog VU meter preview
-function ClassicVUPreview() {
-  return (
-    <div className="w-full h-28 rounded-xl overflow-hidden flex gap-1 p-2" style={{ background: "#1a1208" }}>
-      {["L", "R"].map((ch) => (
-        <div key={ch} className="flex-1 rounded-lg overflow-hidden relative" style={{ background: "#2a1e08" }}>
-          {/* Amber gradient arc area */}
-          <div className="absolute inset-0 flex items-end justify-center pb-2">
-            <div className="w-full h-full relative">
-              {/* Scale marks */}
-              <div className="absolute top-1 left-0 right-0 flex justify-around px-2">
-                {["-20","-10","-7","-5","-3","0","+3"].map((v) => (
-                  <span key={v} className="text-[6px] text-amber-300/70">{v}</span>
-                ))}
-              </div>
-              {/* Needle */}
-              <div className="absolute bottom-3 left-1/2 w-0.5 h-14 origin-bottom"
-                style={{ background: "linear-gradient(to top, #dc2626, #ef4444)", transform: "translateX(-50%) rotate(-15deg)", borderRadius: "1px" }} />
-              {/* VU label */}
-              <div className="absolute bottom-1 left-1/2 -translate-x-1/2 text-[8px] font-bold text-amber-400">VU</div>
-              {/* dB label */}
-              <div className="absolute bottom-1 right-2 text-[7px] text-amber-300/60">dB</div>
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-// Modern flat LED bar preview
-function ModernVUPreview() {
-  const bars = [0.9, 0.8, 0.75, 0.65, 0.55, 0.45, 0.35, 0.25];
-  return (
-    <div className="w-full h-28 rounded-xl overflow-hidden flex gap-1 p-3" style={{ background: "#0f1a1a" }}>
-      {["L", "R"].map((ch) => (
-        <div key={ch} className="flex-1 flex flex-col gap-1 justify-end">
-          <div className="text-[8px] text-white/40 mb-1">{ch}</div>
-          <div className="flex gap-0.5 items-end h-16">
-            {bars.map((h, i) => (
-              <div key={i} className="flex-1 rounded-sm"
-                style={{
-                  height: `${h * 100}%`,
-                  background: i < 6 ? "#00FFF6" : i === 6 ? "#f59e0b" : "#ef4444",
-                  opacity: 0.8,
-                }} />
-            ))}
-          </div>
-          <div className="text-[8px] text-white/40 text-right">dB</div>
-        </div>
-      ))}
-    </div>
-  );
+  preview: string;
 }
 
 const VU_STYLES: VUStyle[] = [
@@ -77,13 +22,37 @@ const VU_STYLES: VUStyle[] = [
     index: 0,
     name: "经典复古",
     description: "琥珀色指针表盘，经典模拟风格",
-    preview: <ClassicVUPreview />,
+    preview: "/vu/vu1.png",
   },
   {
     index: 1,
     name: "现代平面",
     description: "LED 电平条，简洁现代风格",
-    preview: <ModernVUPreview />,
+    preview: "/vu/vu2.png",
+  },
+  {
+    index: 2,
+    name: "数字显示",
+    description: "数字电平显示，精准直观",
+    preview: "/vu/vu3.png",
+  },
+  {
+    index: 3,
+    name: "条形图",
+    description: "垂直条形图，专业风格",
+    preview: "/vu/vu4.png",
+  },
+  {
+    index: 4,
+    name: "渐变光谱",
+    description: "彩虹渐变光谱，炫酷动感",
+    preview: "/vu/vu5.png",
+  },
+  {
+    index: 5,
+    name: "频谱分析",
+    description: "实时频谱分析，专业监测",
+    preview: "/vu/vu6.png",
   },
 ];
 
@@ -116,7 +85,11 @@ export default function VUPage() {
                 style={isActive ? { borderColor: "rgba(0,255,246,0.3)", boxShadow: "0 0 20px rgba(0,255,246,0.08)" } : {}}
                 onClick={() => updateSetting({ vu: style.index })}
               >
-                {style.preview}
+                <img 
+                  src={style.preview} 
+                  alt={style.name}
+                  className="w-full h-28 object-contain rounded-xl bg-black/20"
+                />
               </div>
 
               {/* Selection indicator */}