zksy-website-front/src/app/products/page.tsx

import Image from "next/image"
import MainTitle from "@/components/MainTitle"
import ProductMenu from "@/components/products/ProductMenuClient"
import {serverGet} from "@/utils/request";
import AnimatedSection from "@/components/AnimatedSection";
import React, {Suspense} from "react";

export default async function ProductShowcase() {

    const res = await serverGet<ProductCategory[]>("/webSite/getProductCategoryAndType", null, {
        next: {
            revalidate: 180
        },
        cache: "force-cache"
    })
    if (res.code !== 200) {
        return <div>服务器错误</div>
    }
    const hardwareProductList: { key: string; label: string }[] = []
    for (let i = 0; i < res.data.length; i++) {
        const a = res.data[i].productTypes.map((item) => ({
            key: item.productTypeName,
            label: item.productTypeName,
            // children: item.productCenters.map((center) => ({
            //     key: center.productCenterName,
            //     label: center.productCenterName,
            // }))
        }))

        hardwareProductList.push(...a);
        hardwareProductList.reverse();
        // if (res.data[i].productCategoryName === "硬件产品") {
        //     hardwareProductList = res.data[i].productTypes.map((item) => ({
        //         key: item.productTypeName,
        //         label: item.productTypeName,
        //         // children: item.productCenters.map((center) => ({
        //         //     key: center.productCenterName,
        //         //     label: center.productCenterName,
        //         // }))
        //     }))
        // }else if(res.data[i].productCategoryName === "软件产品"){
        //     softwareProductList = res.data[i].productTypes.map((item) => ({
        //         key: item.productTypeName,
        //         label: item.productTypeName,
        //         // children: item.productCenters.map((center) => ({
        //         //     key: center.productCenterName,
        //         //     label: center.productCenterName,
        //         // }))
        //     }))
        // }
    }

    const products = res.data.flatMap((item) => item.productTypes.flatMap((type) => type.productCenters))

    return (
        <>
            <AnimatedSection effect="slide" direction="left">
                <div>
                    <div className="w-full h-full flex items-center justify-center text-white text-4xl font-bold">
                        <Image src={"/assets/productions/1.png"} alt={"产品中心"} width={1920} height={1080}/>
                    </div>
                </div>
            </AnimatedSection>

            <div className="py-6 sm:py-10">
                <MainTitle title={"产品中心"}/>
            </div>

            <AnimatedSection effect="slide" direction="right">
                <Suspense fallback={<div>加载中...</div>}>
                    <ProductMenu menuItems={hardwareProductList} products={products}/>
                </Suspense>
            </AnimatedSection>

            {/*<AnimatedSection effect="slide" direction="right">*/}
            {/*    <Suspense fallback={<div>加载中...</div>}>*/}
            {/*        <ProductMenu menuItems={softwareProductList} products={products}/>*/}
            {/*    </Suspense>*/}
            {/*</AnimatedSection>*/}

            {/*<AnimatedSection effect="slide" direction="right">*/}
            {/*    <ProductionNew/>*/}
            {/*</AnimatedSection>*/}
        </>
    )
}