feat(pages): 实现解决方案与支持页面服务端渲染

- 将解决方案页面改造为服务端渲染，支持分页功能
- 从服务端获取解决方案数据并展示- 添加动画组件提升页面交互体验
- 支持页面缓存与数据重新验证
- 优化支持页面内容展示与联系方式渲染- 使用服务端获取基础信息动态展示联系信息
- 统一页面标题与内容展示样式
- 添加渐变背景与装饰元素提升视觉效果

src/app/solutions/page.tsx

@@ -1,162 +1,111 @@
-"use client"
+import {Button} from "antd"
+import {ArrowRightOutlined} from "@ant-design/icons"
+import MainTitle from "@/components/MainTitle"
+import Image from "next/image"
+import PaginationClient from "@/components/PaginationClient"
+import {serverGet} from "@/utils/request"
+import {removeHTMLTags} from "@/utils/removeHTMLTags"
+import AnimatedSection from "@/components/AnimatedSection";
 
-import { useState } from "react"
-import { Card, Pagination, Button } from "antd"
-import { ArrowRightOutlined } from "@ant-design/icons"
-import MainTitle from "@/components/MainTitle";
-import Image from "next/image";
-
-const { Meta } = Card
-
-// 模拟数据
-const solutionsData = [
-  {
-    id: 1,
-    title: "公路基础设施智能监测与预警平台建设方案",
-    date: "2024-05-27",
-    description:
-      "本项目为省高速公路基础设施智能监测与预警平台，桥隧设施的基础数据、电子档案等；应用本平台开展巡养护工作，系统自动生成各类巡检、养护维修文档、合格测量定位应用本平台开展城市桥梁隧道定期检测工作，针对边坡的监测...",
-  },
-  {
-    id: 2,
-    title: "数字城市新基建解决方案",
-    date: "2024-05-24",
-    description:
-      '"数字城市"，是在新一代信息技术加速发展的背景下，充分运用物联网、云计算、光网络、移动互联网等技术手段，对公共服务、社会管理、产业运作等活动的各种需求做出智能的响应，将政务、商业、运输、通信、医疗、能源等城市运...',
-  },
-  {
-    id: 3,
-    title: "数字孪生可视化平台解决方案",
-    date: "2024-05-20",
-    description:
-      "数字孪生可视化通过高起点规划、高质量建设、高品质管理运维的原则，为用户提供一种身临其境的现场信息体验模式。通过实景摄影制作模型，直观且真实地还原现场风貌；通过模型加载和漫游，使用户沉浸于现场体验；同时，通过...",
-  },
-  {
-    id: 4,
-    title: "水库大坝智慧监测解决方案-产品页",
-    date: "2024-05-24",
-    description:
-      "中科盛阳雨水情测报与大坝安全监测系统由水库智能感知、物联网信息通信、云端智慧监控管理平台组成。小型水库的在线监控具有库位、雨量、视频、渗流渗压、应力应变、裂缝监测等数据自动采集、分析、上报功能，自动预警...",
-  },
-  {
-    id: 5,
-    title: "智慧环保监测系统解决方案20240513",
-    date: "2024-05-16",
-    description:
-      "智慧环保监测系统由数据采集、传输、存储、显示、控制及应用五大模块组成。数据采集：主要由各类环保检测传感器、摄像机、动环主机、显示屏、支架组成，可选择一体化集成设备，也可以根据现场实际需求灵活配置。本次园区建设...",
-  },
-  {
-    id: 6,
-    title: "智慧园区解决方案",
-    date: "2024-05-16",
-    description:
-      "在城市化进程不断加速的同时，传统园区建设也逐渐面临着各种挑战和困境。为适应新的发展需求，智慧园区应运而生。智慧园区是指互联网和物联网等新一代信息化技术在园区管理、服务等方面的应用，通过数字化转型，建立智能化的...",
-  },
-  {
-    id: 7,
-    title: "智能交通管理系统解决方案",
-    date: "2024-05-15",
-    description:
-      "智能交通管理系统通过先进的信息技术、数据通信传输技术、电子传感技术、控制技术及计算机技术等有效地集成运用于整个地面交通管理系统而建立的一种在大范围内、全方位发挥作用的，实时、准确、高效的综合交通运输管理系统...",
-  },
-  {
-    id: 8,
-    title: "智慧医疗信息化平台",
-    date: "2024-05-12",
-    description:
-      "智慧医疗信息化平台是运用物联网、云计算、大数据、人工智能等新兴技术，构建覆盖诊前、诊中、诊后的线上线下一体化医疗服务模式，实现医疗资源的优化配置和医疗服务的智能化升级，为患者提供更加便民、高效的医疗健康服务...",
-  },
-  {
-    id: 9,
-    title: "工业互联网平台解决方案",
-    date: "2024-05-10",
-    description:
-      "工业互联网平台是面向制造业数字化、网络化、智能化需求，构建基于海量数据采集、汇聚、分析的服务体系，支撑制造资源泛在连接、弹性供给、高效配置的工业云平台，包括边缘、平台（工业PaaS）、应用三大核心层级...",
-  },
-]
-
-const ITEMS_PER_PAGE = 6
-
-export default function Home() {
-  const [currentPage, setCurrentPage] = useState(1)
-
-  const totalPages = Math.ceil(solutionsData.length / ITEMS_PER_PAGE)
-  const startIndex = (currentPage - 1) * ITEMS_PER_PAGE
-  const currentItems = solutionsData.slice(startIndex, startIndex + ITEMS_PER_PAGE)
-
-  const handlePageChange = (page: number) => {
-    setCurrentPage(page)
-  }
+export default async function SolutionsPage({
+                                              searchParams,
+                                            }: {
+  searchParams: Promise<{ page?: string }>
+}) {
+  // 等待 searchParams 解析
+  const params = await searchParams
+  const pageNum = Number.parseInt(params.page || "1", 10)
+  const pageSize = 6
+  const res = await serverGet<Page<Solution>>("/webSite/getSolution", {
+    pageNum: pageNum,
+    pageSize: pageSize,
+  },{
+    next: {
+      revalidate: 180
+    },
+    cache: "force-cache"
+  })
+  const solutionsData = res.data.records
 
   return (
-
-
     <>
-      <div>
-        <Image src={"/assets/solutions/1.jpg"} alt={"banner"} width={1920} height={1080}/>
-      </div>
+      <AnimatedSection effect="slide" direction="left">
+        <div>
+          <Image src={"/assets/solutions/1.jpg"} alt={"banner"} width={1920} height={1080}/>
+        </div>
+      </AnimatedSection>
 
       <div className={"py-6 sm:py-10"}>
-        <MainTitle title={"解决方案"}/>
+        <MainTitle title={"解决方案"} titleLetter={"SOLUTIONS"}/>
       </div>
 
-      <div className="" style={{background: "linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%)"}}>
-        <div className="container mx-auto px-3 sm:px-4 py-4 sm:py-8">
+      <AnimatedSection effect="scale">
+      <div className="" style={{ background: "linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%)" }}>
+        <div className="w-9/10 sm:w-7/10 mx-auto px-3 sm:px-4 py-4 sm:py-8">
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-6 mb-4 sm:mb-8">
-            {currentItems.map((solution) => (
-              <Card
+            {solutionsData.map((solution, index) => (
+              <div
                 key={solution.id}
-                className="h-full shadow-md hover:shadow-lg transition-shadow duration-300"
-                style={{borderRadius: "12px"}}
-                actions={[
-                  <Button
-                    type="link"
-                    icon={<ArrowRightOutlined/>}
-                    className="text-blue-600 hover:text-blue-800"
-                    key="more"
-                  >
-                    了解更多
-                  </Button>,
-                ]}
+                className="h-full shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 rounded-xl overflow-hidden bg-white relative"
+                style={{
+                  backgroundImage: `url("/assets/solutions/2.png")`,
+                  backgroundSize: "cover",
+                }}
               >
-                <div className="h-full flex flex-col">
+                {/* 内容容器 */}
+                <div className="p-4 sm:p-6 h-full flex flex-col relative z-10">
                   <div className="mb-2 sm:mb-3">
                     <h3
-                      className="text-base sm:text-lg font-semibold text-gray-800 mb-1 sm:mb-2 line-clamp-2 leading-tight sm:leading-normal">
-                      {solution.title}
+                      className="text-base sm:text-lg font-semibold text-black mb-1 sm:mb-2 line-clamp-2 leading-tight sm:leading-normal drop-shadow-sm">
+                      {solution.programName}
                     </h3>
-                    <p className="text-xs sm:text-sm text-gray-500 mb-2 sm:mb-3">{solution.date}</p>
+                    <p className="text-xs sm:text-sm text-black/80 mb-2 sm:mb-3 drop-shadow-sm">
+                      {solution.releaseTime}
+                    </p>
                   </div>
-                  <div className="flex-1">
-                    <p className="text-gray-600 text-xs sm:text-sm leading-relaxed line-clamp-3 sm:line-clamp-4">
-                      {solution.description}
+
+                  <div className="flex-1 mb-4">
+                    <p
+                      className="text-black/90 text-xs sm:text-sm leading-relaxed line-clamp-3 sm:line-clamp-4 drop-shadow-sm">
+                      {removeHTMLTags(solution.programDetails)}
                     </p>
                   </div>
+
+                  {/* 按钮区域 */}
+                  <div className="mt-auto pt-3 border-t border-white/20">
+                    <Button
+                      href={`/solutions/${solution.id}`}
+                      type="link"
+                      icon={<ArrowRightOutlined/>}
+                      className="text-white hover:text-white/80 p-0 h-auto font-medium transition-colors duration-200"
+                      style={{
+                        color: "black",
+                        textShadow: "0 1px 2px rgba(0,0,0,0.3)",
+                      }}
+                    >
+                      了解更多
+                    </Button>
+                  </div>
                 </div>
-              </Card>
+
+                {/* 装饰性元素 */}
+                <div
+                  className="absolute top-0 right-0 w-20 h-20 opacity-10"
+                  style={{
+                    background: "radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%)",
+                    transform: "translate(25%, -25%)",
+                  }}
+                />
+              </div>
             ))}
           </div>
 
           <div className="flex justify-center">
-            <Pagination
-              current={currentPage}
-              total={solutionsData.length}
-              pageSize={ITEMS_PER_PAGE}
-              onChange={handlePageChange}
-              showSizeChanger={false}
-              showQuickJumper={false}
-              showTotal={(total, range) => (
-                <span className="hidden sm:inline">
-                第 {range[0]}-{range[1]} 条，共 {total} 条
-              </span>
-              )}
-              className="mt-2 sm:mt-4"
-              size="small"
-              responsive
-            />
+            <PaginationClient current={pageNum} total={solutionsData.length} pageSize={pageSize}/>
           </div>
         </div>
       </div>
+      </AnimatedSection>
     </>
   )
 }

src/app/support/page.tsx

@@ -1,101 +1,126 @@
 import SubTitle from "@/components/subTitle";
 import Image from "next/image";
+import {serverGet} from "@/utils/request";
+import AnimatedSection from "@/components/AnimatedSection";
 
-export default function ServicePage() {
+export default async function ServicePage() {
+  const res = await serverGet("/webSite/getBasicInfo");
+  const basicInfo = res.data[0] || {
+    address: "",
+    companyProfile: "",
+    companyProfileUrl: "",
+    consultationHotline: "",
+    email: "",
+    hardwareIntroduction: "",
+    id: "",
+    qrCodeUrl: "",
+    serviceHotline: "",
+    softwareIntroduction: "",
+    telephone: ""
+  };
   return (
     <>
-      <div>
-        <Image src={"/assets/support/1.png"} alt={"banner"} width={1920} height={1080} />
-      </div>
+      <AnimatedSection effect="slide" direction="left">
+        <div>
+          <Image src={"/assets/support/1.png"} alt={"banner"} width={1920} height={1080}/>
+        </div>
+      </AnimatedSection>
       {/* After-sales Service Section */}
-      <section className="py-16 px-4 bg-[#EFF5FB]">
-        <div className="max-w-4/5 mx-auto">
-          {/* Section Title */}
-          <div className="mb-12 sm:text-left text-center">
-            <SubTitle title={"售后服务"}/>
-          </div>
+      <AnimatedSection effect="slide" direction="right">
+        <section className="py-16 px-4 bg-[#EFF5FB]">
+          <div className="max-w-4/5 mx-auto">
+            {/* Section Title */}
+            <div className="mb-12 sm:text-left text-center">
+              <SubTitle title={"售后服务"}/>
+            </div>
 
-          {/* Service Cards Grid */}
-          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
-            {/* Card 1 */}
-            <div className="text-center">
-              <div className="w-24 h-24 bg-blue-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-                <Image src={"/assets/support/2.png"} alt={"提供专属保障"} width={500} height={500} />
+            {/* Service Cards Grid */}
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
+              {/* Card 1 */}
+              <div className="text-center">
+                <div className="w-24 h-24 bg-blue-500 rounded-full mx-auto mb-4 flex items-center justify-center">
+                  <Image src={"/assets/support/2.png"} alt={"提供专属保障"} width={500} height={500}/>
+                </div>
+                <h3 className="text-2xl font-semibold mb-2 text-[#0F397B]">提供专属保障</h3>
+                <p className="text-gray-600 text-sm leading-relaxed">单独安排技术专家，保障快速响应</p>
               </div>
-              <h3 className="text-2xl font-semibold mb-2 text-[#0F397B]">提供专属保障</h3>
-              <p className="text-gray-600 text-sm leading-relaxed">单独安排技术专家，保障快速响应</p>
-            </div>
 
-            {/* Card 2 */}
-            <div className="text-center">
-              <div className="w-24 h-24 bg-blue-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-                <Image src={"/assets/support/2.png"} alt={"提供专属保障"} width={500} height={500} />
+              {/* Card 2 */}
+              <div className="text-center">
+                <div className="w-24 h-24 bg-blue-500 rounded-full mx-auto mb-4 flex items-center justify-center">
+                  <Image src={"/assets/support/2.png"} alt={"提供专属保障"} width={500} height={500}/>
+                </div>
+                <h3 className="text-2xl font-semibold mb-2 text-[#0F397B]">7*24*365远程运维</h3>
+                <p className="text-gray-600 text-sm leading-relaxed">远程线上维护，服务不间断</p>
               </div>
-              <h3 className="text-2xl font-semibold mb-2 text-[#0F397B]">7*24*365远程运维</h3>
-              <p className="text-gray-600 text-sm leading-relaxed">远程线上维护，服务不间断</p>
-            </div>
 
-            {/* Card 3 */}
-            <div className="text-center">
-              <div className="w-24 h-24 bg-blue-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-                <Image src={"/assets/support/2.png"} alt={"提供专属保障"} width={500} height={500} />
+              {/* Card 3 */}
+              <div className="text-center">
+                <div className="w-24 h-24 bg-blue-500 rounded-full mx-auto mb-4 flex items-center justify-center">
+                  <Image src={"/assets/support/2.png"} alt={"提供专属保障"} width={500} height={500}/>
+                </div>
+                <h3 className="text-2xl font-semibold mb-2 text-[#0F397B]">透明公开</h3>
+                <p className="text-gray-600 text-sm leading-relaxed">服务过程进度，线上公开透明化</p>
               </div>
-              <h3 className="text-2xl font-semibold mb-2 text-[#0F397B]">透明公开</h3>
-              <p className="text-gray-600 text-sm leading-relaxed">服务过程进度，线上公开透明化</p>
-            </div>
 
-            {/* Card 4 */}
-            <div className="text-center">
-              <div className="w-24 h-24 bg-blue-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-                <Image src={"/assets/support/2.png"} alt={"提供专属保障"} width={500} height={500} />
+              {/* Card 4 */}
+              <div className="text-center">
+                <div className="w-24 h-24 bg-blue-500 rounded-full mx-auto mb-4 flex items-center justify-center">
+                  <Image src={"/assets/support/2.png"} alt={"提供专属保障"} width={500} height={500}/>
+                </div>
+                <h3 className="text-2xl font-semibold mb-2 text-[#0F397B]">主动排除故障</h3>
+                <p
+                  className="text-gray-600 text-sm leading-relaxed">实现&#34;救火式&#34;向&#34;预防式&#34;产品运维转型</p>
               </div>
-              <h3 className="text-2xl font-semibold mb-2 text-[#0F397B]">主动排除故障</h3>
-              <p className="text-gray-600 text-sm leading-relaxed">实现&#34;救火式&#34;向&#34;预防式&#34;产品运维转型</p>
             </div>
           </div>
-        </div>
-      </section>
+        </section>
+      </AnimatedSection>
 
       {/* Service Consultation Section */}
-      <section className="bg-[url('/assets/support/3.png')] bg-cover py-16 px-4 relative overflow-hidden">
-        {/* Background Light Effects */}
-        <div className="absolute right-0 top-1/2 transform -translate-y-1/2 w-96 h-96 opacity-30">
-          <div className="w-full h-full bg-gradient-radial from-blue-400 via-blue-600 to-transparent rounded-full blur-3xl"></div>
-        </div>
-        <div className="absolute right-20 top-1/2 transform -translate-y-1/2 w-64 h-64 opacity-20">
-          <div className="w-full h-full bg-gradient-radial from-cyan-300 via-blue-500 to-transparent rounded-full blur-2xl"></div>
-        </div>
-
-        <div className="max-w-4/5 mx-auto relative z-10">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-            {/* Left Content */}
-            <div className="text-white">
-              {/* Section Title */}
-              <div className="mb-8 sm:text-left text-center">
-                <SubTitle title={"服务咨询"} color={"#fff"}/>
-              </div>
+      <AnimatedSection effect="slide" direction="left">
+        <section className="bg-[url('/assets/support/3.png')] bg-cover py-16 px-4 relative overflow-hidden">
+          {/* Background Light Effects */}
+          <div className="absolute right-0 top-1/2 transform -translate-y-1/2 w-96 h-96 opacity-30">
+            <div
+              className="w-full h-full bg-gradient-radial from-blue-400 via-blue-600 to-transparent rounded-full blur-3xl"></div>
+          </div>
+          <div className="absolute right-20 top-1/2 transform -translate-y-1/2 w-64 h-64 opacity-20">
+            <div
+              className="w-full h-full bg-gradient-radial from-cyan-300 via-blue-500 to-transparent rounded-full blur-2xl"></div>
+          </div>
 
-              {/* Contact Information */}
-              <div className="space-y-6">
-                <div>
-                  <p className="text-gray-300 mb-2">中科盛阳服务热线：</p>
-                  <p className="text-4xl font-bold">0731-85315153</p>
+          <div className="max-w-4/5 mx-auto relative z-10">
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+              {/* Left Content */}
+              <div className="text-white">
+                {/* Section Title */}
+                <div className="mb-8 sm:text-left text-center">
+                  <SubTitle title={"服务咨询"} color={"#fff"}/>
                 </div>
 
-                <div className="space-y-2">
-                  <p className="text-gray-300">如需自选以下业务，您可以直接拨打相关热线电话：</p>
-                  <p className="text-gray-300">24小时产品售前咨询服务热线：400-666-7001</p>
+                {/* Contact Information */}
+                <div className="space-y-6">
+                  <div>
+                    <p className="text-gray-300 mb-2">中科盛阳服务热线：</p>
+                    <p className="text-4xl font-bold">{basicInfo.telephone}</p>
+                  </div>
+
+                  <div className="space-y-2">
+                    <p className="text-gray-300">如需自选以下业务，您可以直接拨打相关热线电话：</p>
+                    <p className="text-gray-300">24小时产品售前咨询服务热线：{basicInfo.consultationHotline}</p>
+                  </div>
                 </div>
               </div>
-            </div>
 
-            {/* Right Side - Light Effects Area */}
-            <div className="hidden lg:block">
-              {/* This space is for the light effects which are handled by the background */}
+              {/* Right Side - Light Effects Area */}
+              <div className="hidden lg:block">
+                {/* This space is for the light effects which are handled by the background */}
+              </div>
             </div>
           </div>
-        </div>
-      </section>
+        </section>
+      </AnimatedSection>
     </>
   )
 }