zhangzf пре 1 дан
родитељ
комит
b0d69ce291

+ 8 - 3
src/app/(public)/_components/HomeBestSellers.tsx

@@ -4,6 +4,7 @@ import { Navigation, Pagination } from "swiper/modules";
 import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/OpenAddToCartModalButton";
 import type { HomeProduct } from "@/types/home/type";
 import Link from "next/link";
+import Image from "next/image";
 interface HomeBestSellersProps {
   bestSellers: HomeProduct[];
 }
@@ -45,13 +46,17 @@ const HomeBestSellers = ({ bestSellers }: HomeBestSellersProps) => {
             {/* 每个块:6个产品,2列布局 */}
             <div className="grid grid-cols-2 gap-4">
               {block.map((product) => (
-                <div key={product.id} className="flex flex-col gap-2">
+                <div key={product.id}  className="flex flex-col gap-2">
+                  <Link  href={`/${product.urlKey}.html`} className="relative  aspect-[3/4] w-full overflow-hidden rounded-sm block">
                   {/* 产品图片 */}
-                  <img
+                  <Image
                     src={product.image_url}
                     alt={product.name}
-                    className="w-full h-auto object-cover rounded-sm"
+                    fill
+                    sizes="50vw"
+                    className="object-cover"
                   />
+                  </Link>
                   {/* 产品标题 */}
                   <Link href={`/${product.urlKey}.html`} className="text-sm text-gray-800 truncate">
                     {product.name}

+ 10 - 5
src/app/(public)/_components/HomeNewArrival.tsx

@@ -3,6 +3,7 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import { Navigation, Pagination } from "swiper/modules";
 import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/OpenAddToCartModalButton";
 import Link from "next/link";
+import Image from "next/image";
 import type {HomeProduct} from "@/types/home/type"
 interface NewArrivalProps {
   newArrival: HomeProduct[];
@@ -45,11 +46,15 @@ const HomeNewArrival = ({ newArrival }: NewArrivalProps) => {
               {block.map((product) => (
                 <div key={product.id} className="flex flex-col gap-2">
                   {/* 产品图片 */}
-                  <img
-                    src={product.image_url}
-                    alt={product.name}
-                    className="w-full h-auto object-cover rounded-sm"
-                  />
+                  <Link  href={`/${product.urlKey}.html`} className="relative  aspect-[3/4] w-full overflow-hidden rounded-sm block">
+                    <Image
+                      src={product.image_url}
+                      alt={product.name}
+                      fill
+                      sizes="50vw"
+                      className="object-cover"
+                    />
+                  </Link>
                   {/* 产品标题 */}
                    <Link href={`/${product.urlKey}.html`} className="text-sm text-gray-800 truncate">
                     {product.name}

+ 9 - 5
src/app/(public)/_components/MiddleImageSwiper.tsx

@@ -2,6 +2,7 @@
 import { Swiper, SwiperSlide } from "swiper/react";
 import {  Pagination  } from "swiper/modules";
 import Link from "next/link";
+import Image from "next/image";
 import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/OpenAddToCartModalButton";
 import type {HomeProduct,HomeSectionImage} from "@/types/home/type"
 interface zeroWearProps {
@@ -67,12 +68,15 @@ const MiddleImageSwiper = ({ zeroWear,zeroWearImage }: zeroWearProps) => {
             {productList.map((item) => (
               <SwiperSlide key={item.id}>
                 <div className="bg-white rounded overflow-hidden  flex flex-col">
-                  <img
-                    src={item.image_url}
-                    alt={item.name}
-                    className="w-full aspect-[3/4] object-cover"
-                  />
+                  <Link  href={`/${item.urlKey}.html`} className="relative  aspect-[3/4] w-full overflow-hidden rounded-sm block">
+                    <Image
+                      src={item.image_url}
+                      alt={item.name}
+                      fill
 
+                      className="object-cover"
+                    />
+                  </Link>
                   <div className="p-2 flex flex-col gap-2">
                     <Link href={`/${item.urlKey}.html`} className="text-sm text-gray-800 truncate">
                       {item.name}

+ 2 - 2
src/app/(public)/_components/RecommendedProducts.tsx

@@ -128,7 +128,7 @@ export default function RecommendedProducts({ recommended }: recommendedProps) {
         {productList.map((item) => (
           <div key={item.id} className="flex flex-col gap-3">
             {/* Next.Image 商品图容器 */}
-            <div className="relative w-full aspect-[3/4] overflow-hidden rounded-md">
+            <Link href={`/${item.urlKey}.html`} className="relative w-full aspect-[3/4] overflow-hidden rounded-md block">
               <Image
                 src={item.image_url}
                 alt={item.name}
@@ -136,7 +136,7 @@ export default function RecommendedProducts({ recommended }: recommendedProps) {
                 sizes="(max-width:768px) 50vw, 33vw"
                 className="object-cover"
               />
-            </div>
+            </Link>
 
             {/* 标题 */}
             <Link href={`/${item.urlKey}.html`} className="text-sm text-gray-800 truncate">

+ 2 - 2
src/app/(public)/_components/Trending.tsx

@@ -139,7 +139,7 @@ const Trending = ({ trending }: trendingProps) => {
                 {/* 单个商品卡片 */}
                 <div className=" overflow-hidden  flex flex-col">
                   {/* 图片区域 + 中间播放按钮 */}
-                  <div className="relative  w-full aspect-[4/5] overflow-hidden rounded-xl">
+                  <Link  href={`/${item.urlKey}.html`} className="relative  w-full aspect-[4/5] overflow-hidden rounded-xl block">
                    <Image
                        src={item.image_url}
                        alt={item.name}
@@ -164,7 +164,7 @@ const Trending = ({ trending }: trendingProps) => {
                         <polygon points="5 3 19 12 5 21 5 3" />
                       </svg>
                     </button>
-                  </div>
+                  </Link>
 
                   {/* 底部文字价格区域 */}
                   <div className="p-3 flex flex-col rounded-xl mt-3 bg-[#f0f8f5] gap-3">

+ 71 - 26
src/components/layout/navbar/MobileMenu.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { AnimatePresence, motion } from "framer-motion";
-// import Link from "next/link";
+import Link from "next/link";
 
 // import { MobileSearchBar } from "./MobileSearch";
 import { useBodyScrollLock } from "@utils/hooks/useBodyScrollLock";
@@ -32,7 +32,8 @@ export default function MobileMenu({ menu, isOpen, onClose,isGuest }: MobileMenu
   const activeMainMenu = menu.find((item) => item._id === activeMainId);
   // 当前一级下面全部二级菜单列表
   const subMenuList = activeMainMenu?.children?.edges?.map((e) => e.node) ?? [];
-
+  console.log("menu------------cscscs",menu);
+  
   // 切换右侧二级菜单展开/收起
   const toggleSubExpand = (subId: number) => {
     setExpandedSubIds((prev) => ({
@@ -165,27 +166,63 @@ export default function MobileMenu({ menu, isOpen, onClose,isGuest }: MobileMenu
                <div className="flex flex-1 overflow-hidden">
                
                  <aside className="w-23 border-r border-gray-200 overflow-y-auto">
-                   {menu.map((mainItem) => (
-                     <div
-                       key={mainItem._id}
-                       onClick={() => setActiveMainId(mainItem._id)}
-                       className={`py-3 pl-4 pr-3   text-xs cursor-pointer border-r-2 border-b border-[#E1E1E1FF]
-                         ${
-                           activeMainId === mainItem._id
-                             ? "border-r-emerald-700 text-emerald-700 font-bold"
-                             : " text-gray-700 font-normal"
-                         }
-                       `}
-                     >
-                       {mainItem.name} {mainItem.showIcon&&(<Image
-                                     className=" block"
-                                     src="/image/theme/image_flame.webp"
-                                     alt={"userphoto"}
-                                     width={16}
-                                     height={16}
-                                   />)}
-                     </div>
-                   ))}
+                   {menu.map((mainItem) => {
+                      // 判断条件:没有子菜单 并且 配置了url
+                      const isLinkItem = mainItem.children.edges.length === 0 && !!mainItem.url;
+
+                      if (isLinkItem) {
+                        return (
+                          <Link
+                            key={mainItem._id}
+                            href={mainItem.url}
+                            className={`relative block py-3 pl-4 pr-3 text-xs cursor-pointer border-r-2 border-b border-[#E1E1E1FF]
+                              ${
+                                activeMainId === mainItem._id
+                                  ? "border-r-emerald-700 text-emerald-700 font-bold"
+                                  : "text-gray-700 font-normal"
+                              }
+                            `}
+                          >
+                            {mainItem.name}
+                            {mainItem.showIcon && (
+                              <Image
+                                className="block"
+                                src="/image/theme/image_flame.webp"
+                                alt="userphoto"
+                                width={16}
+                                height={16}
+                              />
+                            )}
+                          </Link>
+                        );
+                      }
+                    
+                      // 不满足条件:走原来点击切换active的div逻辑
+                      return (
+                        <div
+                          key={mainItem._id}
+                          onClick={() => setActiveMainId(mainItem._id)}
+                          className={`py-3 pl-4 pr-3 text-xs cursor-pointer border-r-2 border-b border-[#E1E1E1FF]
+                            ${
+                              activeMainId === mainItem._id
+                                ? "border-r-emerald-700 text-emerald-700 font-bold"
+                                : "text-gray-700 font-normal"
+                            }
+                          `}
+                        >
+                          {mainItem.name}
+                          {mainItem.showIcon && (
+                            <Image
+                              className="block"
+                              src="/image/theme/image_flame.webp"
+                              alt="userphoto"
+                              width={16}
+                              height={16}
+                            />
+                          )}
+                        </div>
+                      );
+                    })}
                  </aside>
                  
           
@@ -219,7 +256,14 @@ export default function MobileMenu({ menu, isOpen, onClose,isGuest }: MobileMenu
                              onClick={() => toggleSubExpand(subItem._id)}
                              className="flex justify-between items-center cursor-pointer py-2  px-3 h-10 bg-[#F9F9F9FF]"
                            >
-                           <h3 className="text-2xl font-medium">{subItem.name}</h3>
+                           <h3 className="text-2xl font-medium">{subItem.url ? (
+                               <Link href={subItem.url} className="inline-block">
+                                 {subItem.name}
+                               </Link>
+                             ) : (
+                               subItem.name
+                             )}
+                           </h3>
                             <svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="none" 
                             className={`transition-transform duration-300 ${isOpen ? "rotate-0" : "rotate-180"}`}
                             >
@@ -233,7 +277,8 @@ export default function MobileMenu({ menu, isOpen, onClose,isGuest }: MobileMenu
                                {cardEdges.map((edge) => {
                                  const cardItem = edge.node;
                                  return (
-                                   <div
+                                   <Link
+                                    href={cardItem.url}
                                      key={cardItem._id}
                                      className="flex flex-col items-center cursor-pointer"
                                    >
@@ -259,7 +304,7 @@ export default function MobileMenu({ menu, isOpen, onClose,isGuest }: MobileMenu
                                          }
                                      </div>
                                      <span className="text-xs font-normal text-center">{cardItem.name}</span>
-                                   </div>
+                                   </Link>
                                  );
                                })}
                              </div>