feat: 去掉any

2026-03-26 09:26:35 +08:00
parent db359955ed
commit a269f8893f
19 changed files with 2192 additions and 628 deletions
@@ -0,0 +1,83 @@
+import React, { useState, useEffect } from 'react';
+import { Radio, Zap } from 'lucide-react';
+import { motion } from 'framer-motion';
+
+export const StudioHeader: React.FC = () => {
+  const [time, setTime] = useState(new Date());
+
+  useEffect(() => {
+    const timer = setInterval(() => setTime(new Date()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  const formatTime = (date: Date) => {
+    return date.toLocaleTimeString('en-US', { 
+      hour12: false, 
+      hour: '2-digit', 
+      minute: '2-digit', 
+      second: '2-digit' 
+    });
+  };
+
+  return (
+    <div className="radio-rack w-full py-6 px-8 rounded-xl flex flex-col md:flex-row items-center justify-between gap-6 overflow-hidden">
+      {/* Brand & Status */}
+      <div className="flex items-center gap-6">
+        <div className="relative">
+          <div className="w-16 h-16 rounded-full bg-studio-inset border border-studio-edge flex items-center justify-center shadow-lg">
+            <Radio className="w-8 h-8 glow-amber" />
+          </div>
+          <motion.div 
+            animate={{ opacity: [1, 0.5, 1] }} 
+            transition={{ duration: 2, repeat: Infinity }}
+            className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-studio-glow-red border-2 border-studio-panel shadow-[0_0_10px_var(--studio-glow-red)]" 
+          />
+        </div>
+        
+        <div className="flex flex-col">
+          <h1 className="text-3xl font-black tracking-tighter text-white font-mono uppercase">
+            Morning <span className="glow-amber">Radio</span>
+          </h1>
+          <div className="flex items-center gap-2 mt-1">
+            <span className="text-[10px] font-bold text-muted-foreground uppercase tracking-[0.2em]">Broadcast Studio 01</span>
+            <div className="h-1 w-1 rounded-full bg-studio-glow-green shadow-[0_0_5px_var(--studio-glow-green)]" />
+          </div>
+        </div>
+      </div>
+
+      {/* Center Display: Time & On Air */}
+      <div className="flex items-center gap-8 studio-inset py-3 px-10">
+        <div className="flex flex-col items-center">
+          <span className="text-[9px] font-black text-muted-foreground uppercase tracking-widest opacity-50 mb-1">Local Time</span>
+          <span className="text-3xl font-mono font-black glow-green tracking-widest">
+            {formatTime(time)}
+          </span>
+        </div>
+        
+        <div className="h-10 w-px bg-studio-edge" />
+
+        <div className="flex flex-col items-center">
+            <span className="text-[9px] font-black text-muted-foreground uppercase tracking-widest opacity-50 mb-1">Status</span>
+            <div className="px-4 py-1 rounded bg-studio-glow-red/10 border border-studio-glow-red/30">
+                <span className="text-sm font-black text-studio-glow-red uppercase tracking-widest animate-pulse">On Air</span>
+            </div>
+        </div>
+      </div>
+
+      {/* Metrics Mini-Readout */}
+      <div className="hidden xl:flex items-center gap-6">
+        <div className="flex flex-col items-end">
+            <span className="text-[10px] font-black text-muted-foreground uppercase tracking-widest opacity-50">Signal Strength</span>
+            <div className="flex gap-1 mt-1">
+                {[1, 2, 3, 4, 5].map((i) => (
+                    <div key={i} className={`w-1.5 h-4 rounded-full ${i <= 4 ? 'bg-studio-glow-green shadow-[0_0_5px_var(--studio-glow-green)]' : 'bg-studio-edge'}`} />
+                ))}
+            </div>
+        </div>
+        <div className="p-3 rounded-lg bg-studio-inset border border-studio-edge">
+            <Zap className="w-5 h-5 text-amber-500" />
+        </div>
+      </div>
+    </div>
+  );
+};