feat: app 端 ui 设计完成

wei-ai-demo/components/HardwareStatus.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Zap, Bluetooth } from 'lucide-react';
+import { DeviceStatus } from '../types';
+
+interface HardwareStatusProps {
+  status: DeviceStatus;
+  onClick?: () => void;
+  className?: string;
+}
+
+const HardwareStatus: React.FC<HardwareStatusProps> = ({ status, onClick, className = '' }) => {
+  return (
+    <button 
+        onClick={onClick}
+        className={`flex items-center justify-end transition-all duration-500 shrink-0 ${className}`}
+    >
+        <div className={`
+            relative flex items-center h-7 pl-3 pr-3 rounded-full 
+            bg-[#1A1625]/80 backdrop-blur-md border border-white/10 shadow-sm
+            active:scale-95 transition-all duration-300 group hover:border-[#A855F7]/30
+        `}>
+            
+            {/* Connection Status Icon */}
+            <div className="relative flex items-center justify-center w-3 h-3 mr-2">
+              {status.connected ? (
+                 <>
+                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#10B981] opacity-20"></span>
+                    <Bluetooth size={12} className="text-[#10B981] relative z-10" />
+                 </>
+              ) : (
+                 <div className="w-1.5 h-1.5 rounded-full bg-gray-600"></div>
+              )}
+            </div>
+
+            {/* Divider */}
+            <div className="w-[1px] h-2.5 bg-white/10 mr-2"></div>
+
+            {/* Battery Status */}
+            {status.connected ? (
+                <div className="flex items-center gap-1">
+                     <span className={`text-[10px] font-mono font-bold tracking-wide tabular-nums ${status.battery < 20 ? 'text-[#F43F5E]' : 'text-[#E2E8F0]'}`}>
+                        {Math.floor(status.battery)}%
+                     </span>
+                     <Zap 
+                        size={9} 
+                        className={`${status.battery < 20 ? 'text-[#F43F5E]' : 'text-[#A855F7]'} ${status.battery < 20 ? 'animate-pulse' : ''}`} 
+                        fill={status.battery < 20 ? "currentColor" : "currentColor"} 
+                     />
+                </div>
+            ) : (
+                <span className="text-[9px] text-gray-500 font-medium tracking-wide">未连接</span>
+            )}
+            
+            {/* Subtle Inner Glow */}
+            <div className="absolute inset-0 rounded-full border border-white/5 pointer-events-none group-hover:border-[#A855F7]/20 transition-colors"></div>
+        </div>
+    </button>
+  );
+};
+
+export default HardwareStatus;