修改主页,添加机型

src/components/Navbar.js

@@ -1,12 +1,133 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 import './Navbar.css';
 
+const productMenu = [
+  {
+    key: 'smart',
+    label: '智能系列',
+    subs: [
+      {
+        key: 'N96',
+        label: 'N96',
+        products: [
+          { name: 'N96', desc: 'Android11，高性能，适配复杂场景', image: 'http://localhost:3001/uploads/menu/menu_n96.png ' }
+        ]
+      },
+      {
+        key: 'N96P',
+        label: 'N96P',
+        products: [
+          { name: 'N96P', desc: 'Android14，高性能，适配复杂场景', image: 'http://localhost:3001/uploads/menu/menu_n96p.png' }
+        ]
+      },
+      {
+        key: 'N92',
+        label: 'N92',
+        products: [
+          { name: 'N92', desc: 'Android14，高性能，适配复杂场景', image: 'http://localhost:3001/uploads/menu/menu_n92.png' }
+        ]
+      },
+      {
+        key: 'N86P',
+        label: 'N86P',
+        products: [
+          { name: 'N86P', desc: 'Android14，高性能，适配复杂场景', image: 'http://localhost:3001/uploads/menu/menu_n86p.png' }
+        ]
+      },
+      {
+        key: 'N86',
+        label: 'N86',
+        products: [
+          { name: 'N86', desc: 'Android14，高性能，适配复杂场景', image: 'http://localhost:3001/uploads/menu/menu_n86.png' }
+        ]
+      },
+      {
+        key: 'N82',
+        label: 'N82',
+        products: [
+          { name: 'N82', desc: 'Android14，高性能，适配复杂场景', image: 'http://localhost:3001/uploads/menu/menu_n82.png' }
+        ]
+      },
+      {
+        key: 'N80',
+        label: 'N80',
+        products: [
+          { name: 'N80', desc: 'Android14，高性能，适配复杂场景', image: 'http://localhost:3001/uploads/menu/menu_n80.png' }
+        ]
+      },
+      {
+        key: 'N62',
+        label: 'N62',
+        products: [
+          { name: 'N62', desc: 'Android14，高性能，适配复杂场景', image: 'http://localhost:3001/uploads/menu/menu_n62.png' }
+        ]
+      },
+      {
+        key: 'N6P',
+        label: 'N6P',
+        products: [
+          { name: 'N6P', desc: 'Android14，高性能，适配复杂场景', image: 'http://localhost:3001/uploads/menu/menu_n6p.png' }
+        ]
+      },
+      {
+        key: 'N6',
+        label: 'N6',
+        products: [
+          { name: 'N6', desc: 'Android14，高性能，适配复杂场景', image: 'http://localhost:3001/uploads/menu/menu_n6.png' }
+        ]
+      },
+    ]
+  },
+  {
+    key: 'traditional',
+    label: '传统系列',
+    subs: [
+      {
+        key: 'k300',
+        label: 'K300',
+        products: [
+          { name: 'K300', desc: '标准版，覆盖主流需求', image: 'http://localhost:3001/uploads/menu/menu_k300.png' }
+        ]
+      },
+    ]
+  },
+  {
+    key: 'basic',
+    label: '基础系列',
+    subs: [
+      {
+        key: 'kd69',
+        label: 'KD69',
+        products: [
+          { name: 'KD69', desc: '专业场景，扩展性强', image: 'http://localhost:3001/uploads/menu/menu_kd69.png' },
+        ]
+      },
+    ]
+  }
+];
+
 const Navbar = () => {
   const navigate = useNavigate();
   const { user, logout } = useAuth();
   const [search, setSearch] = useState('');
+  const [activeSeries, setActiveSeries] = useState(productMenu[0].key);
+  const [activeSub, setActiveSub] = useState(productMenu[0].subs[0].key);
+  const productsRef = useRef(null);
+  const [productsOpen, setProductsOpen] = useState(false);
+
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (productsRef.current && !productsRef.current.contains(e.target)) {
+        setProductsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
 
   const handleLoginClick = () => {
     navigate('/login');
@@ -33,18 +154,73 @@ const Navbar = () => {
         <div className="navbar-left">
           <Link to="/" className="logo">
             <img
-              src="http://localhost:3001/uploads/logo.svg"
+              src="http://localhost:3001/uploads/menu/logo.svg"
               alt="Logo"
               className="logo-img"
             />
           </Link>
 
-          <div className="nav-item">
-            <span className="nav-label">产品</span>
-            <div className="dropdown">
-              <Link to="/" className="dropdown-item">产品一</Link>
-              <Link to="/" className="dropdown-item">产品二</Link>
-              <Link to="/" className="dropdown-item">产品三</Link>
+          <div className={`nav-item ${productsOpen ? 'open' : ''}`} ref={productsRef}>
+            <span className="nav-label" onClick={() => setProductsOpen((v) => !v)}>产品</span>
+            <div className="dropdown mega">
+              <div className="mega-col">
+                <div className="mega-title">系列</div>
+                <div className="mega-list">
+                  {productMenu.map((series) => (
+                    <button
+                      key={series.key}
+                      className={`mega-item ${series.key === activeSeries ? 'active' : ''}`}
+                      onClick={() => {
+                        setActiveSeries(series.key);
+                        setActiveSub(series.subs[0]?.key || '');
+                      }}
+                    >
+                      {series.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+              <div className="mega-col">
+                <div className="mega-title">型号</div>
+                <div className="mega-list">
+                  {productMenu.find(s => s.key === activeSeries)?.subs.map((sub) => (
+                    <button
+                      key={sub.key}
+                      className={`mega-item ${sub.key === activeSub ? 'active' : ''}`}
+                      onClick={() => setActiveSub(sub.key)}
+                    >
+                      {sub.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+              <div className="mega-col mega-wide">
+                <div className="mega-title">介绍</div>
+                <div className="mega-products">
+                  {productMenu
+                    .find(s => s.key === activeSeries)
+                    ?.subs.find(sub => sub.key === activeSub)
+                    ?.products.map((p, idx) => (
+                      <div
+                        key={idx}
+                        className="mega-product"
+                        onClick={() => {
+                          setProductsOpen(false);
+                          navigate(`/product/${activeSeries}/${activeSub}/${idx}`, {
+                            state: { product: p, series: activeSeries, sub: activeSub }
+                          });
+                        }}
+                        style={{ cursor: 'pointer' }}
+                      >
+                        <img src={p.image} alt={p.name} />
+                        <div className="mega-product-info">
+                          <div className="name">{p.name}</div>
+                          <div className="desc">{p.desc}</div>
+                        </div>
+                      </div>
+                  ))}
+                </div>
+              </div>
             </div>
           </div>