refactor(about): 重构关于页面

- 移除冗余代码和未使用的组件
-优化页面结构和布局
- 使用新组件替换原有逻辑
- 删除不必要的样式和脚本

src/app/about/page.tsx

@@ -1,260 +1,36 @@
-"use client"
-
-import {Carousel, Tabs, TabsProps} from "antd"
 import Image from "next/image";
 import SubTitle from "@/components/subTitle";
-import {useEffect, useState} from "react";
-import {ChevronRight} from "lucide-react";
 import ContactUs from "@/components/about/ContactUs";
+import Recruitment from "@/components/about/Recruitment";
+import TopNav from "@/components/about/TopNav";
+import Development from "@/components/about/Development";
+import Honor from "@/components/about/Honor";
+import {serverGet, serverPost} from "@/utils/request";
 
-export default function Home() {
-
-  const arr = [
-    {
-      name: "公司简介",
-      id: "section-0",
-      img:"/assets/about/10.png",
-      activeImg:"/assets/about/11.png",
-    },
-    {
-      name: "发展历程",
-      id: "section-1",
-      img:"/assets/about/2.png",
-      activeImg:"/assets/about/3.png",
-    },
-    {
-      name: "荣誉资质",
-      id: "section-2",
-      img:"/assets/about/4.png",
-      activeImg:"/assets/about/5.png",
-    },
-    {
-      name: "公司招聘",
-      id: "section-3",
-      img:"/assets/about/6.png",
-      activeImg:"/assets/about/7.png",
-    },
-    {
-      name: "联系我们",
-      id: "section-4",
-      img:"/assets/about/8.png",
-      activeImg:"/assets/about/9.png",
-    },
-  ]
-
-  const [activeId, setActiveId] = useState(arr[0]?.id || "")
-  const [hoverId, setHoverId] = useState<string | null>(null)
-
-  // 监听滚动，设置当前 active
-  useEffect(() => {
-    const handleScroll = () => {
-      let current = ""
-      for (const item of arr) {
-        const section = document.getElementById(item.id)
-        if (section) {
-          const rect = section.getBoundingClientRect()
-          if (rect.top <= 100 && rect.bottom > 100) {
-            current = item.id
-            break
-          }
-        }
-      }
-      if (current) setActiveId(current)
-    }
-
-    window.addEventListener("scroll", handleScroll)
-    handleScroll() // 初始运行一次
-    return () => window.removeEventListener("scroll", handleScroll)
-  }, [arr])
-
-  function CategoryCarousel({ images }: { images: Array<{ id: number; src: string; alt: string }> }) {
-    // 将图片按每页3个分组
-    const imageGroups = []
-    for (let i = 0; i < images.length; i += 3) {
-      imageGroups.push(images.slice(i, i + 3))
-    }
-
-    return (
-      <div className="relative">
-        <Carousel arrows dots={true} infinite={false}>
-          {imageGroups.map((group, groupIndex) => (
-            <div key={groupIndex}>
-              <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 p-4">
-                {group.map((image) => (
-                  <div key={image.id} className="relative group">
-                    <div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
-                      <Image
-                        src={image.src || "/placeholder.svg"}
-                        alt={image.alt}
-                        width={400}
-                        height={300}
-                        className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
-                      />
-                      <div className="p-4">
-                        <p className="text-sm text-gray-600 text-center">{image.alt}</p>
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          ))}
-        </Carousel>
-      </div>
-    )
-  }
-
-  const tabItems: TabsProps["items"] = [
-    {
-      key: "honor",
-      category: "荣誉证书",
-      images: [
-        { id: 1, src: "/honor-certificate-1.jpg", alt: "荣誉证书1" },
-        { id: 2, src: "/honor-certificate-2.jpg", alt: "荣誉证书2" },
-        { id: 3, src: "/honor-certificate-3.jpg", alt: "荣誉证书3" },
-        { id: 4, src: "/honor-certificate-1.jpg", alt: "荣誉证书4" },
-        { id: 5, src: "/honor-certificate-2.jpg", alt: "荣誉证书5" },
-        { id: 6, src: "/honor-certificate-3.jpg", alt: "荣誉证书6" },
-      ],
-    },
-    {
-      key: "patent",
-      category: "专利证书",
-      images: [
-        { id: 7, src: "/patent-certificate-1.jpg", alt: "专利证书1" },
-        { id: 8, src: "/patent-certificate-2.jpg", alt: "专利证书2" },
-        { id: 9, src: "/patent-certificate-3.jpg", alt: "专利证书3" },
-        { id: 10, src: "/patent-certificate-1.jpg", alt: "专利证书4" },
-        { id: 11, src: "/patent-certificate-2.jpg", alt: "专利证书5" },
-      ],
-    },
-    {
-      key: "iso",
-      category: "ISO认证书",
-      images: [
-        { id: 12, src: "/iso-certification-1.jpg", alt: "ISO认证书1" },
-        { id: 13, src: "/iso-certification-2.jpg", alt: "ISO认证书2" },
-        { id: 14, src: "/iso-certification-1.jpg", alt: "ISO认证书3" },
-        { id: 15, src: "/iso-certification-2.jpg", alt: "ISO认证书4" },
-      ],
-    },
-    {
-      key: "software",
-      category: "软件作品证书",
-      images: [
-        { id: 16, src: "/software-certificate-1.jpg", alt: "软件作品证书1" },
-        { id: 17, src: "/software-certificate-2.jpg", alt: "软件作品证书2" },
-        { id: 18, src: "/software-certificate-3.jpg", alt: "软件作品证书3" },
-        { id: 19, src: "/software-certificate-1.jpg", alt: "软件作品证书4" },
-        { id: 20, src: "/software-certificate-2.jpg", alt: "软件作品证书5" },
-        { id: 21, src: "/software-certificate-3.jpg", alt: "软件作品证书6" },
-      ],
-    },
-  ].map((honor) => ({
-    key: honor.key,
-    label: honor.category,
-    children: <CategoryCarousel images={honor.images} />,
-  }))
+// export const revalidate = 1800
 
-  interface JobCardProps {
-    title: string
-    location: string
-    positions: number
-    requirements: string
-  }
+export default async function Home() {
 
-  function JobCard({ title, location, positions, requirements }: JobCardProps) {
-    return (
-      <div className="w-1/4 bg-[url('/assets/about/21.png')] bg-[length:103%_100%] bg-no-repeat rounded-2xl border border-blue-200 overflow-hidden shadow-sm hover:shadow-md transition-shadow">
-        {/* Header */}
-        <div className="bg-blue-500 text-white px-6 py-4 rounded-t-2xl">
-          <h3 className="text-lg font-medium">{title}</h3>
-        </div>
-
-        {/* Content */}
-        <div className="p-6 space-y-4">
-          {/* Work Location */}
-          <div className="flex items-start gap-3">
-            <div className="w-2 h-2 bg-blue-400 rounded-full mt-2 flex-shrink-0"></div>
-            <div>
-              <span className="text-gray-700 font-medium">工作地址：</span>
-              <span className="text-gray-600">{location}</span>
-            </div>
-          </div>
-
-          {/* Number of Positions */}
-          <div className="flex items-start gap-3">
-            <div className="w-2 h-2 bg-blue-400 rounded-full mt-2 flex-shrink-0"></div>
-            <div>
-              <span className="text-gray-700 font-medium">招聘人数：</span>
-              <span className="text-gray-600">{positions}</span>
-            </div>
-          </div>
-
-          {/* Job Requirements */}
-          <div className="flex items-start gap-3">
-            <div className="w-2 h-2 bg-blue-400 rounded-full mt-2 flex-shrink-0"></div>
-            <div>
-              <span className="text-gray-700 font-medium">岗位要求：</span>
-              <p className="text-gray-600 mt-1 leading-relaxed line-clamp-3">{requirements}</p>
-            </div>
-          </div>
-
-          {/* Learn More Button */}
-          <div className="pt-4">
-            <button className="flex items-center gap-2 text-orange-500 hover:text-orange-600 transition-colors">
-              <span className="font-medium">了解更多</span>
-              <div className="w-6 h-6 bg-orange-500 rounded-full flex items-center justify-center">
-                <ChevronRight className="w-3 h-3 text-white" />
-              </div>
-            </button>
-          </div>
-        </div>
-      </div>
-    )
-  }
+  const res = await serverPost<Page<RecruitmentInfo>, {
+    pageNum: number,
+    pageSize: number
+  }>('webSite/getRecruitmentInfoByPage', {
+    pageNum: 1,
+    pageSize: 4
+  })
+  const honorRes = await serverGet<HonorInfo[]>("/webSite/getHonor")
 
   return (
     <>
-      <div>
+      <div className="hidden sm:block">
         <Image src={"/assets/about/1.png"} alt={"关于我们"} width={1920} height={1080}/>
       </div>
+      <div className="sm:hidden">
+        <Image src={"/assets/about/23.png"} alt={"关于我们"} width={1920} height={1080}/>
+      </div>
       <div className="w-full">
         {/* 顶部导航 */}
-        <div className="flex justify-center space-x-10 border-b py-4 bg-white sticky top-0 z-50">
-          {arr.map((item, idx) => {
-            const isActive = activeId === item.id
-            const isHover = hoverId === item.id
-            return (
-              <a
-                key={idx}
-                href="#"
-                onClick={(e) => {
-                  e.preventDefault()
-                  document.getElementById(item.id)?.scrollIntoView({
-                    behavior: "smooth",
-                    block: "start",
-                  })
-                  setActiveId(item.id) // 点击时立即更新状态
-                }}
-                onMouseEnter={() => setHoverId(item.id)}
-                onMouseLeave={() => setHoverId(null)}
-                className={`font-medium flex items-center transition-colors ${
-                  isActive || isHover ? "text-blue-600 border-b-2 pb-1" : "text-gray-700"
-                }`}
-              >
-                <Image
-                  src={isActive || isHover ? item.activeImg : item.img}
-                  alt={item.name}
-                  width={26}
-                  height={26}
-                  className="inline-block mr-1"
-                />
-                {item.name}
-              </a>
-            )
-          })}
-        </div>
+        <TopNav/>
 
         <div className="max-w-4/5 mx-auto py-4 px-4">
           <SubTitle title={"公司简介"}/>
@@ -308,69 +84,7 @@ export default function Home() {
             <SubTitle title={"发展历程"}/>
           </div>
           <div className={"max-w-4/5 mx-auto"}>
-            <div
-              className="relative overflow-hidden backdrop-blur-sm bg-gradient-to-r from-gray-200/20 to-gray-300/20 rounded-lg">
-              {/* Background geometric patterns */}
-              <div className="absolute inset-0 opacity-10">
-                <div className="absolute top-20 left-10 w-32 h-32 border-2 border-white/20 rotate-45"></div>
-                <div className="absolute top-40 right-20 w-24 h-24 border-2 border-white/15 rotate-12"></div>
-                <div className="absolute bottom-32 left-1/4 w-40 h-40 border-2 border-white/10 -rotate-12"></div>
-                <div className="absolute bottom-20 right-1/3 w-28 h-28 border-2 border-white/15 rotate-45"></div>
-                <div
-                  className="absolute top-1/2 left-1/2 w-36 h-36 border-2 border-white/10 -rotate-45 transform -translate-x-1/2 -translate-y-1/2"></div>
-              </div>
-
-              {/* Timeline container */}
-              <div className="relative z-10 flex items-center justify-center px-8 py-16">
-                <div className="w-full max-w-7xl">
-                  {/* Timeline line and dots */}
-                  <div className="relative mb-16">
-                    {/* Horizontal line */}
-                    <div className="absolute top-1/2 left-0 right-0 h-0.5 bg-white/30 transform -translate-y-1/2"></div>
-
-                    {/* Timeline items */}
-                    <div className="flex justify-between items-center relative flex-wrap">
-                      {[
-                        {
-                          year: "2014",
-                          description:
-                            "专注互联网及移动互联网平台开发与建设，政务信息系统应用产品研发与集成的高科技公司，是湖南本土开发的中坚力量。",
-                        },
-                        {
-                          year: "2018",
-                          description: "业务领域聚焦于智慧城市终端产品及城市运营服务两大板块，推动公司培育新的业务增长点。",
-                        },
-                        {
-                          year: "2022",
-                          description:
-                            "获批国家级高新技术企业，通过创新型中小企业培育，建立企业技术研发中心，产品销售到数十家行业龙头企业。",
-                        },
-                        {
-                          year: "2023",
-                          description:
-                            "获批省级博士后创新创业实践基地，与中南大学、湖南师范大学建立产学研基地，获得包括多项发明专利在内的数百项知识产权。",
-                        },
-
-                      ].map((item, index) => (
-                        <div key={item.year} className="flex flex-col items-center relative">
-                          {/* Dot */}
-                          <div
-                            className="w-4 h-4 bg-white rounded-full border-4 border-blue-600 relative z-10 mb-8"></div>
-
-                          {/* Year */}
-                          <div className="text-white text-2xl font-bold mb-6 text-center">{item.year}</div>
-
-                          {/* Description */}
-                          <div className="text-white/90 text-sm leading-relaxed max-w-xs text-center px-4">
-                            {item.description}
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
+            <Development/>
           </div>
         </section>
 
@@ -379,8 +93,7 @@ export default function Home() {
           <div className="my-10 sm:my-6">
             <SubTitle title="荣誉资质"/>
           </div>
-
-          <Tabs defaultActiveKey="honor" items={tabItems} className="w-full" centered/>
+          <Honor honorList={honorRes.data} />
         </section>
 
         {/* 公司招聘 */}
@@ -388,48 +101,11 @@ export default function Home() {
           <SubTitle title="公司招聘"/>
         </div>
         <section id="section-3" className="scroll-mt-10 w-full py-12 px-4 bg-[url('/assets/about/20.png')]">
-          <div className="max-w-4/5 mx-auto py-8">
-            <div className="px-4">
-              <div className="flex justify-around">
-                {[
-                  {
-                    title: "前端工程师",
-                    location: "湖南长沙",
-                    positions: 2,
-                    requirements: "负责公司前端页面",
-                  },
-                  {
-                    title: "前端工程师",
-                    location: "湖南怀化",
-                    positions: 3,
-                    requirements:
-                      "负责公司前端页面，熟悉机器学习和深度学习习基础理论和核心算法，熟练使用常见的机器学习和深度学习框架，算法和工具，熟悉自然语言处理基础理论和常用算法，熟悉Python语言和Linux开发环境，具备较好的编程基础，动",
-                  },
-                ].map((job, index) => (
-                  <JobCard
-                    key={index}
-                    title={job.title}
-                    location={job.location}
-                    positions={job.positions}
-                    requirements={job.requirements}
-                  />
-                ))}
-              </div>
-
-              {/* More Positions Button */}
-              <div className="flex justify-center">
-                <button
-                  className="flex items-center gap-2 px-6 py-3 bg-white border border-blue-300 rounded-lg text-blue-600 hover:bg-blue-50 transition-colors">
-                  <span className="font-medium">更多岗位</span>
-                  <ChevronRight className="w-4 h-4"/>
-                </button>
-              </div>
-            </div>
-          </div>
+          <Recruitment list={res.data.records}/>
         </section>
 
         {/* 联系我们 */}
-        <ContactUs />
+        <ContactUs/>
       </div>
     </>
   )

src/app/support/page.tsx

@@ -86,12 +86,6 @@ export default function ServicePage() {
                   <p className="text-gray-300">如需自选以下业务，您可以直接拨打相关热线电话：</p>
                   <p className="text-gray-300">24小时产品售前咨询服务热线：400-666-7001</p>
                 </div>
-
-                <div>
-                  <button className="bg-blue-600 hover:bg-blue-700 text-white text-xl px-8 py-3 rounded-lg font-medium transition-colors duration-200">
-                    咨询
-                  </button>
-                </div>
               </div>
             </div>