feat: app 端 ui 设计完成

wei-ai-demo/components/Layout.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Hexagon } from 'lucide-react';
+import BottomNav from './BottomNav';
+import HardwareStatus from './HardwareStatus';
+import { UserTab, DeviceStatus } from '../types';
+
+interface LayoutProps {
+  children: React.ReactNode;
+  currentTab: UserTab;
+  onTabChange: (tab: UserTab) => void;
+  title: string;
+  subtitle?: string;
+  deviceStatus: DeviceStatus;
+  onDeviceClick: () => void;
+}
+
+const Layout: React.FC<LayoutProps> = ({ 
+    children, 
+    currentTab, 
+    onTabChange, 
+    title, 
+    subtitle, 
+    deviceStatus, 
+    onDeviceClick 
+}) => {
+  return (
+    <div className="h-screen w-screen bg-transparent text-[#F8FAFC] overflow-hidden flex flex-col relative">
+      
+      {/* 1. Top Template Header (Super Clean) */}
+      <div className="shrink-0 pt-safe-top z-20">
+        <div className="px-5 py-4 flex items-end justify-between">
+            {/* Left: Branding & Title */}
+            <div className="flex flex-col justify-end">
+                <div className="flex items-center gap-1.5 mb-1">
+                    <Hexagon size={12} className="text-white fill-white/20" strokeWidth={2.5} />
+                    <span className="text-[10px] font-bold tracking-[0.2em] text-white/80 uppercase shadow-sm">Wei AI</span>
+                </div>
+                <h1 className="text-2xl font-bold text-white leading-none tracking-tight drop-shadow-md">{title}</h1>
+            </div>
+            
+            {/* Right: Embedded Hardware Status */}
+            <div className="pb-0.5">
+                <HardwareStatus status={deviceStatus} onClick={onDeviceClick} />
+            </div>
+        </div>
+      </div>
+
+      {/* 2. Middle Content (Scrollable) */}
+      <main className="flex-1 overflow-y-auto no-scrollbar relative z-10 w-full">
+        {/* Top fade mask for content scrolling under header */}
+        <div className="absolute top-0 left-0 w-full h-8 bg-gradient-to-b from-[#2e1065]/20 to-transparent pointer-events-none z-10"></div>
+        {children}
+      </main>
+
+      {/* 3. Bottom Tab (Fixed) */}
+      <BottomNav currentTab={currentTab} onTabChange={onTabChange} />
+    </div>
+  );
+};
+
+export default Layout;