Sfoglia il codice sorgente

feat(home): 添加页面动画和分页组件

- 引入 AnimatedSection 组件实现页面元素动画效果
- 使用 serverGet 获取网站基础信息并传递给子组件- 为 BannerCarousel、FeatureCard、ProductionSoft 等模块添加动画包装- 新增 PaginationClient 组件用于客户端分页功能
- 更新 Home 组件为异步函数以支持服务端数据获取
- 调整页面结构布局并优化响应式间距样式
nahida 7 mesi fa
parent
commit
286dba5c98
2 ha cambiato i file con 87 aggiunte e 17 eliminazioni
  1. 53 17
      src/app/page.tsx
  2. 34 0
      src/components/PaginationClient.tsx

+ 53 - 17
src/app/page.tsx

@@ -6,6 +6,8 @@ import ProductionSoft from "@/components/ProductionSoft";
 import ProductionHard from "@/components/ProductionHard";
 import {IntellectualPropertyStats} from "@/components/IntellectualPropertyStats";
 import ServerClient from "@/components/serverClient";
+import {serverGet} from "@/utils/request";
+import AnimatedSection from "@/components/AnimatedSection";
 
 const features: Feature[] = [
   {img: "/assets/home/8.png", title: "产品中心", subtitle: "PRODUCT_CENTER", href: "/products"},
@@ -15,32 +17,66 @@ const features: Feature[] = [
   {img: "/assets/home/12.png", title: "关于我们", subtitle: "ABOUT_US", href: "/about"},
 ]
 
-export default function Home() {
+export default async function Home() {
+  const basicInfoRes = await serverGet<BasicInfo[]>("/webSite/getBasicInfo",{
+    next: {
+      revalidate: 1800
+    },
+    cache: "force-cache"
+  })
+  const basicInfo = basicInfoRes.data[0] || {
+    address: "",
+    companyProfile: "",
+    companyProfileUrl: "",
+    consultationHotline: "",
+    email: "",
+    hardwareIntroduction: "",
+    id: "",
+    qrCodeUrl: "",
+    serviceHotline: "",
+    softwareIntroduction: "",
+    telephone: ""
+  };
   return (
     <>
-      <BannerCarousel/>
-
-      <div className="bg-[url('/assets/home/4.png')] w-full">
-        <div className="custom-scrollbar overflow-x-auto">
-          <div className="flex space-x-5 sm:space-x-6 md:space-x-8 min-w-max px-5 sm:px-6 md:px-10 mx-auto w-max">
-            {features.map((f, idx) => (
-              <FeatureCard key={idx} {...f} />
-            ))}
+      <AnimatedSection effect="fade">
+        <BannerCarousel/>
+      </AnimatedSection>
+
+
+      <AnimatedSection effect="slide" direction="left">
+        <div className="bg-[url('/assets/home/4.png')] w-full">
+          <div className="custom-scrollbar overflow-x-auto">
+            <div className="flex space-x-5 sm:space-x-6 md:space-x-8 min-w-max px-5 sm:px-6 md:px-10 mx-auto w-max">
+              {features.map((f, idx) => (
+                <FeatureCard key={idx} {...f} />
+              ))}
+            </div>
           </div>
         </div>
-      </div>
+      </AnimatedSection>
 
-      <div className={"mt-20"}>
-        <MainTitle title="产品中心" titleLetter="PRODUCT_CENTER"/>
-      </div>
+      <AnimatedSection effect="fade">
+        <div className='my-6 sm:my-10'>
+          <MainTitle title="产品中心" titleLetter="PRODUCT_CENTER"/>
+        </div>
+      </AnimatedSection>
 
-      <ProductionSoft/>
+      <AnimatedSection effect="slide" direction="left">
+        <ProductionSoft softIntroduction={basicInfo.softwareIntroduction || ""}/>
+      </AnimatedSection>
 
-      <ProductionHard/>
+      <AnimatedSection effect="slide" direction="right">
+        <ProductionHard hardIntroduction={basicInfo.hardwareIntroduction || ""} />
+      </AnimatedSection>
 
-      <IntellectualPropertyStats/>
+      <AnimatedSection effect="scale">
+        <IntellectualPropertyStats/>
+      </AnimatedSection>
 
-      <ServerClient/>
+      <AnimatedSection effect="scale">
+        <ServerClient/>
+      </AnimatedSection>
     </>
   )
 }

+ 34 - 0
src/components/PaginationClient.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import {Pagination} from "antd"
+import {useRouter} from "next/navigation"
+
+interface PaginationClientProps {
+  current: number
+  total: number
+  pageSize: number
+}
+
+export default function PaginationClient({
+                                           current,
+                                           total,
+                                           pageSize,
+                                         }: PaginationClientProps) {
+  const router = useRouter()
+
+  const handlePageChange = (page: number) => {
+    const url = new URL(window.location.href)
+    url.searchParams.set("page", page.toString())
+    router.push(url.pathname + url.search)
+  }
+
+  return (
+    <Pagination
+      current={current}
+      pageSize={pageSize}
+      total={total}
+      onChange={handlePageChange}
+      showSizeChanger={false}
+    />
+  )
+}