first commit

frontend/src/components/Layout.jsx

@@ -0,0 +1,161 @@
+import React, { useState } from 'react';
+import { Layout as AntLayout, Menu, ConfigProvider, theme, Drawer, Button } from 'antd';
+import { RobotOutlined, MenuOutlined, AppstoreOutlined, EyeOutlined } from '@ant-design/icons';
+import { useNavigate, useLocation } from 'react-router-dom';
+import ParticleBackground from './ParticleBackground';
+import { motion, AnimatePresence } from 'framer-motion';
+
+const { Header, Content, Footer } = AntLayout;
+
+const Layout = ({ children }) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  const items = [
+    {
+      key: '/',
+      icon: <RobotOutlined />,
+      label: 'AI 硬件',
+    },
+    {
+      key: '/services',
+      icon: <AppstoreOutlined />,
+      label: 'AI 服务',
+    },
+    {
+      key: '/ar',
+      icon: <EyeOutlined />,
+      label: 'AR 体验',
+    },
+  ];
+
+  const handleMenuClick = (key) => {
+    navigate(key);
+    setMobileMenuOpen(false);
+  };
+
+  return (
+    <ConfigProvider
+      theme={{
+        algorithm: theme.darkAlgorithm,
+        token: {
+          colorPrimary: '#00b96b',
+          colorBgContainer: 'transparent',
+          colorBgLayout: 'transparent',
+          fontFamily: "'Orbitron', sans-serif",
+        },
+      }}
+    >
+      <ParticleBackground />
+      <AntLayout style={{ minHeight: '100vh', background: 'transparent' }}>
+        <Header 
+          style={{ 
+            position: 'fixed', 
+            top: 0,
+            left: 0,
+            zIndex: 1000, 
+            width: '100%', 
+            padding: 0,
+            background: 'rgba(0, 0, 0, 0.5)',
+            backdropFilter: 'blur(10px)',
+            borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
+            display: 'flex',
+            justifyContent: 'center'
+          }}
+        >
+          <div style={{ 
+            width: '100%', 
+            maxWidth: '1440px', 
+            padding: '0 20px', 
+            display: 'flex', 
+            alignItems: 'center', 
+            justifyContent: 'space-between',
+            height: '100%'
+          }}>
+          <motion.div 
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.5 }}
+            style={{ 
+              color: '#fff', 
+              fontSize: '20px', 
+              fontWeight: 'bold', 
+              display: 'flex', 
+              alignItems: 'center', 
+              cursor: 'pointer' 
+            }}
+            onClick={() => navigate('/')}
+          >
+            <img src="/liangji_white.png" alt="Quant-Speed Logo" style={{ height: '32px' }} />
+          </motion.div>
+
+          {/* Desktop Menu */}
+          <div className="desktop-menu" style={{ display: 'none' }}>
+            <Menu
+              theme="dark"
+              mode="horizontal"
+              selectedKeys={[location.pathname]}
+              items={items}
+              onClick={(e) => handleMenuClick(e.key)}
+              style={{ background: 'transparent', borderBottom: 'none', minWidth: 300 }}
+            />
+          </div>
+          <style>{`
+            @media (min-width: 768px) {
+              .desktop-menu { display: block !important; }
+              .mobile-menu-btn { display: none !important; }
+            }
+          `}</style>
+
+          {/* Mobile Menu Button */}
+          <Button 
+            className="mobile-menu-btn"
+            type="text" 
+            icon={<MenuOutlined style={{ color: '#fff', fontSize: 20 }} />} 
+            onClick={() => setMobileMenuOpen(true)}
+          />
+          </div>
+        </Header>
+
+        {/* Mobile Drawer Menu */}
+        <Drawer
+          title={<span style={{ color: '#00b96b' }}>导航菜单</span>}
+          placement="right"
+          onClose={() => setMobileMenuOpen(false)}
+          open={mobileMenuOpen}
+          styles={{ body: { padding: 0, background: '#111' }, header: { background: '#111', borderBottom: '1px solid #333' }, wrapper: { width: 250 } }}
+        >
+          <Menu
+            theme="dark"
+            mode="vertical"
+            selectedKeys={[location.pathname]}
+            items={items}
+            onClick={(e) => handleMenuClick(e.key)}
+            style={{ background: 'transparent', borderRight: 'none' }}
+          />
+        </Drawer>
+
+        <Content style={{ marginTop: 64, padding: '24px', overflowX: 'hidden' }}>
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={location.pathname}
+              initial={{ opacity: 0, y: 20, filter: 'blur(10px)' }}
+              animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
+              exit={{ opacity: 0, y: -20, filter: 'blur(10px)' }}
+              transition={{ duration: 0.3 }}
+            >
+              {children}
+            </motion.div>
+          </AnimatePresence>
+        </Content>
+
+        <Footer style={{ textAlign: 'center', background: 'rgba(0,0,0,0.5)', color: '#666', backdropFilter: 'blur(5px)' }}>
+          Quant-Speed AI Hardware ©{new Date().getFullYear()} Created by Quant-Speed Tech
+        </Footer>
+      </AntLayout>
+    </ConfigProvider>
+  );
+};
+
+export default Layout;