refactor(app): 重构关于页面并添加新功能

- 新增 Window 接口声明，用于定义全局变量
- 在 layout.tsx 中添加控制台日志输出- 更新 package.json 中的开发脚本，使用 --turbo 参数启动开发服务器
- 重构 about/page.tsx 页面，增加更多视觉元素和交互功能

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 80",
+    "dev": "next dev -p 80 --turbo",
     "build": "next build",
     "start": "next start -p 80",
     "lint": "eslint"

src/app/about/page.tsx

@@ -1,127 +1,436 @@
 "use client"
 
-import { Tabs, Card, Pagination } from "antd"
+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";
 
 export default function Home() {
-  return (
-    <div className="w-full">
-      {/* 导航栏 */}
-      <div className="flex justify-center space-x-10 border-b py-4 bg-white sticky top-0 z-50">
-        {["公司简介", "发展历程", "荣誉资质", "公司招聘", "联系我们"].map((item, idx) => (
-          <a
-            key={idx}
-            href={`#section-${idx}`}
-            className="text-gray-700 hover:text-blue-600 font-medium"
-          >
-            {item}
-          </a>
-        ))}
-      </div>
 
-      {/* 公司简介 */}
-      <section id="section-0" className="max-w-6xl mx-auto py-12 px-4 grid sm:grid-cols-1 md:grid-cols-2 gap-8">
-        <div>
-          <h2 className="text-xl font-bold text-blue-600 mb-4">公司简介</h2>
-          <p className="text-gray-700 leading-7 mb-6">
-            中科图信信息技术有限公司是一家专注于智慧图书馆知识服务与平台研发的国家高新技术企业...
-          </p>
-          <div className="grid grid-cols-2 gap-6 mt-6">
-            <div className="text-center">
-              <div className="text-2xl">🏢</div>
-              <p className="text-sm">专精特新小巨人企业</p>
-            </div>
-            <div className="text-center">
-              <div className="text-2xl">💡</div>
-              <p className="text-sm">创新型中小企业</p>
+  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>
-            <div className="text-center">
-              <div className="text-2xl">🚀</div>
-              <p className="text-sm">高新技术企业</p>
+          ))}
+        </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} />,
+  }))
+
+  interface JobCardProps {
+    title: string
+    location: string
+    positions: number
+    requirements: string
+  }
+
+  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 className="text-center">
-              <div className="text-2xl">🎓</div>
-              <p className="text-sm">硕博士后创新基地</p>
+          </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>
-        </div>
-        <div className="bg-gray-300 w-full h-80 rounded-lg"></div>
-      </section>
-
-      {/* 发展历程 */}
-      <section id="section-1" className="bg-blue-900 text-white py-12 px-4">
-        <h2 className="text-xl font-bold mb-8">发展历程</h2>
-        <div className="flex flex-col sm:flex-row justify-between gap-8">
-          {[
-            { year: "2014", text: "专注图书馆系统研发..." },
-            { year: "2018", text: "业务规模扩展..." },
-            { year: "2022", text: "建设研发测试基地..." },
-            { year: "2023", text: "获批博士后创新实践基地..." },
-          ].map((item, idx) => (
-            <div key={idx} className="flex-1">
-              <p className="text-2xl font-bold">{item.year}</p>
-              <p className="mt-2 text-sm">{item.text}</p>
+
+          {/* 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>
-      </section>
-
-      {/* 荣誉资质 */}
-      <section id="section-2" className="max-w-6xl mx-auto py-12 px-4">
-        <h2 className="text-xl font-bold text-blue-600 mb-6">荣誉资质</h2>
-        <Tabs
-          defaultActiveKey="1"
-          items={[
-            {
-              key: "1",
-              label: "荣誉证书",
-              children: (
-                <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
-                  <div className="bg-gray-300 h-40 rounded"></div>
-                  <div className="bg-gray-300 h-40 rounded"></div>
-                  <div className="bg-gray-300 h-40 rounded"></div>
-                </div>
-              ),
-            },
-            { key: "2", label: "专利证书", children: <p>专利证书内容...</p> },
-            { key: "3", label: "ISO认证书", children: <p>ISO认证书内容...</p> },
-            { key: "4", label: "软件作品证书", children: <p>软件作品证书内容...</p> },
-          ]}
-        />
-      </section>
-
-      {/* 公司招聘 */}
-      <section id="section-3" className="max-w-6xl mx-auto py-12 px-4">
-        <h2 className="text-xl font-bold text-blue-600 mb-6">公司招聘</h2>
-        <div className="grid sm:grid-cols-1 md:grid-cols-2 gap-6">
-          <Card title="前端工程师" bordered>
-            <p>工作地点：湖南长沙</p>
-            <p>招聘人数：2</p>
-            <p>岗位要求：熟悉React、Next.js...</p>
-          </Card>
-          <Card title="前端工程师" bordered>
-            <p>工作地点：湖南怀化</p>
-            <p>招聘人数：3</p>
-            <p>岗位要求：掌握TypeScript、Ant Design...</p>
-          </Card>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div>
+        <Image src={"/assets/about/1.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>
-        <div className="flex justify-center mt-6">
-          <Pagination defaultCurrent={1} total={50} />
+
+        <div className="max-w-4/5 mx-auto py-4 px-4">
+          <SubTitle title={"公司简介"}/>
         </div>
-      </section>
-
-      {/* 联系我们 */}
-      <section id="section-4" className="bg-gray-50 py-12 px-4">
-        <h2 className="text-xl font-bold text-blue-600 mb-6">联系我们</h2>
-        <div className="grid sm:grid-cols-1 md:grid-cols-2 gap-6">
-          <div className="bg-gray-300 h-64 rounded"></div>
-          <div className="space-y-4">
-            <p>电话：0731-85315153</p>
-            <p>邮箱：337843345@qq.com</p>
-            <p>地址：湖南省长沙市岳麓区...</p>
-            <div className="bg-gray-300 w-40 h-40"></div>
+
+        {/* 公司简介 */}
+        <section id="section-0"
+                 className="scroll-mt-50 max-w-4/5 mx-auto grid sm:grid-cols-1 md:grid-cols-2">
+          <div className="bg-[url('/assets/about/16.png')] bg-cover px-24 py-18">
+            <p className="text-gray-700 leading-7 mb-12">
+              中科盛阳信息技术有限公司是一家专注于物联网智能感知设备及平台研发的国家级高新技术企业。公司联合中南大学设有博士后创新创业实践基地并建立了物联网感知设备研发中心；公司拥有包含发明专利及集成电路设计布图在内的自主知识产权一百余项；自主研发的多项产品及技术行业领先；其中核心产品如城市生命线安全监测设备及平台、道路桥梁安全检测设备及平台、城市排水及污水管网监测设备及平台、水库雨水情测报与大坝安全监测设备及平台等产品和技术广泛应用于国内数字新基建行业。
+            </p>
+            <p className="text-gray-700 leading-7">
+              公司自成立以来持续健康发展,先后荣获了多项荣誉，包括专精特新中小企业、双软认定、国家高新技术企业、创新型中小企业、科技型中小企业等。同时公司通过了
+              ISO45001 、ISO14004、ISO27001、信息技术服务管理体系、信息安全管理体系等数十项管理体系认证。并且与国内多个大学及科研院所建立了联合研发中心或者产学研基地。
+            </p>
+            <div className="grid grid-cols-4 gap-6 mt-6">
+              <div className="text-center flex flex-col items-center gap-2">
+                <div className="w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center">
+                  <Image src={"/assets/about/12.png"} alt={"专精特新小巨人企业"} width={100} height={100}/>
+                </div>
+                <p className="text-sm">专精特新小巨人企业</p>
+              </div>
+              <div className="text-center flex flex-col items-center gap-2">
+                <div className="w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center">
+                  <Image src={"/assets/about/13.png"} alt={"创新型中小企业"} width={100} height={100}/>
+                </div>
+                <p className="text-sm">创新型中小企业</p>
+              </div>
+              <div className="text-center flex flex-col items-center gap-2">
+                <div className="w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center">
+                  <Image src={"/assets/about/15.png"} alt={"高新技术企业"} width={100} height={100}/>
+                </div>
+                <p className="text-sm">高新技术企业</p>
+              </div>
+              <div className="text-center flex flex-col items-center gap-2">
+                <div className="w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center">
+                  <Image src={"/assets/about/14.png"} alt={"省级博士后创新基地"} width={100} height={100}/>
+                </div>
+                <p className="text-sm">省级博士后创新基地</p>
+              </div>
+            </div>
+          </div>
+          <div className="bg-gray-300 w-full bg-[url('/assets/about/17.jpg')] bg-cover"></div>
+        </section>
+
+        {/* 发展历程 */}
+        <section id="section-1"
+                 className="scroll-mt-10 bg-blue-900 text-white mt-10 py-12 px-4 bg-[url('/assets/about/18.png')] bg-cover">
+          <div className="max-w-4/5 mx-auto my-10 sm:my-6">
+            <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>
+          </div>
+        </section>
+
+        {/* 荣誉资质 */}
+        <section id="section-2" className="scroll-mt-10 max-w-4/5 mx-auto py-12 px-4">
+          <div className="my-10 sm:my-6">
+            <SubTitle title="荣誉资质"/>
+          </div>
+
+          <Tabs defaultActiveKey="honor" items={tabItems} className="w-full" centered/>
+        </section>
+
+        {/* 公司招聘 */}
+        <div className="w-4/5 mx-auto my-10 sm:my-6">
+          <SubTitle title="公司招聘"/>
         </div>
-      </section>
-    </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>
+        </section>
+
+        {/* 联系我们 */}
+        <ContactUs />
+      </div>
+    </>
   )
 }

src/app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type {Metadata} from "next";
 import "./globals.css";
 import {AntdRegistry} from "@ant-design/nextjs-registry";
 import '@ant-design/v5-patch-for-react-19';
@@ -18,6 +18,7 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  console.log(123);
   return (
     <html lang="en">
     <body>

src/types/index.ts

@@ -1,4 +1,7 @@
-
+declare interface Window {
+  init: any
+  BMapGL: any
+}
 interface Feature {
   img: string
   title: string