Initial commit: 提交控制器版本2核心代码

2026-03-31 18:52:37 +08:00
commit 30db710093
111 changed files with 21875 additions and 0 deletions
@@ -0,0 +1,139 @@
+/* ============================================================
+   SIDEBAR — Luxsin X9 Controller
+   Design: Dark glass sidebar with cyan active states
+   ============================================================ */
+import { useDevice } from "@/contexts/DeviceContext";
+import { cn } from "@/lib/utils";
+import {
+  Activity,
+  Bluetooth,
+  ChevronRight,
+  Cpu,
+  Gauge,
+  Layers,
+  LayoutDashboard,
+  Settings,
+  Sliders,
+  Volume2,
+} from "lucide-react";
+import { Link, useLocation } from "wouter";
+
+interface NavItem {
+  path: string;
+  icon: React.ComponentType<{ size?: number; className?: string }>;
+  label: string;
+}
+
+const NAV_ITEMS: NavItem[] = [
+  { path: "/", icon: LayoutDashboard, label: "Dashboard" },
+  { path: "/audio", icon: Volume2, label: "Audio" },
+  { path: "/eq", icon: Sliders, label: "Parametric EQ" },
+  { path: "/effects", icon: Layers, label: "Effects" },
+  { path: "/bluetooth", icon: Bluetooth, label: "Bluetooth" },
+  { path: "/dsp", icon: Cpu, label: "DSP & DAC" },
+  { path: "/display", icon: Activity, label: "Display & Lights" },
+  { path: "/system", icon: Settings, label: "System" },
+];
+
+export default function Sidebar() {
+  const [location] = useLocation();
+  const { deviceState, isConnected, isDemoMode } = useDevice();
+
+  return (
+    <aside className="glass-sidebar fixed left-0 top-0 h-full w-[220px] z-40 flex flex-col">
+      {/* Logo */}
+      <div className="px-5 pt-6 pb-4">
+        <div className="flex items-center gap-3">
+          <div className="relative">
+            <div className="w-9 h-9 rounded-xl glass-cyan flex items-center justify-center">
+              <Gauge size={18} className="text-[#00FFF6]" />
+            </div>
+            <div className={cn(
+              "absolute -top-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-[#0d1117]",
+              isConnected ? "bg-[#00FFF6]" : "bg-white/20"
+            )} />
+          </div>
+          <div>
+            <div className="text-white font-bold text-sm leading-tight tracking-wide" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>
+              LUXSIN
+            </div>
+            <div className="text-[#00FFF6] text-[10px] font-semibold tracking-[0.2em] opacity-80">
+              X9 CTRL
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="divider-glass mx-4 mb-3" />
+
+      {/* Nav */}
+      <nav className="flex-1 px-3 space-y-0.5 overflow-y-auto">
+        {NAV_ITEMS.map((item) => {
+          const isActive = location === item.path;
+          const Icon = item.icon;
+          return (
+            <Link key={item.path} href={item.path}>
+              <div
+                className={cn(
+                  "flex items-center gap-3 px-3 py-2.5 rounded-[14px] transition-all duration-200 group relative",
+                  isActive
+                    ? "glass-cyan"
+                    : "hover:bg-white/5"
+                )}
+              >
+                {isActive && (
+                  <div className="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-5 bg-[#00FFF6] rounded-r-full shadow-[0_0_8px_#00FFF6]" />
+                )}
+                <Icon
+                  size={16}
+                  className={cn(
+                    "transition-colors duration-200 flex-shrink-0",
+                    isActive ? "text-[#00FFF6]" : "text-white/40 group-hover:text-white/70"
+                  )}
+                />
+                <span
+                  className={cn(
+                    "text-[13px] font-medium transition-colors duration-200",
+                    isActive ? "text-[#00FFF6]" : "text-white/50 group-hover:text-white/80"
+                  )}
+                  style={{ fontFamily: "'Space Grotesk', sans-serif" }}
+                >
+                  {item.label}
+                </span>
+                {isActive && (
+                  <ChevronRight size={12} className="ml-auto text-[#00FFF6] opacity-60" />
+                )}
+              </div>
+            </Link>
+          );
+        })}
+      </nav>
+
+      <div className="divider-glass mx-4 mt-3 mb-3" />
+
+      {/* Bottom status */}
+      <div className="px-4 pb-5">
+        <div className="glass-card p-3 rounded-[14px]">
+          <div className="flex items-center gap-2 mb-2">
+            <div className={cn("w-1.5 h-1.5 rounded-full", isConnected ? "bg-[#00FFF6] shadow-[0_0_6px_#00FFF6]" : "bg-white/20")} />
+            <span className="section-label text-[10px]">
+              {isConnected ? (isDemoMode ? "Demo Mode" : "Live") : "Offline"}
+            </span>
+          </div>
+          {deviceState ? (
+            <>
+              <div className="text-white/60 text-[11px] font-medium truncate" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>
+                {deviceState.device}
+              </div>
+              <div className="text-white/30 text-[10px] mt-0.5" style={{ fontFamily: "'JetBrains Mono', monospace" }}>
+                v{deviceState.version}
+              </div>
+            </>
+          ) : (
+            <div className="text-white/30 text-[11px]">Not connected</div>
+          )}
+        </div>
+      </div>
+    </aside>
+  );
+}