feat: 优化解决方案分页与交互，ContactUs集成ECharts地图，更新知识产权统计

src/components/IntellectualPropertyStats.tsx

@@ -17,7 +17,7 @@ export function IntellectualPropertyStats() {
       label: "产品专利",
     },
     {
-      number: "80+",
+      number: "100+",
       label: "软件著作权",
     },
   ]

src/components/about/ContactUs.tsx

@@ -1,45 +1,92 @@
 'use client'
-import React, {useEffect} from 'react';
+import React, {useEffect, useState, useRef} from 'react';
 import SubTitle from "@/components/subTitle";
-// import {BDMapGL} from "@/utils/BDMap";
-import Image from "next/image";
+import dynamic from 'next/dynamic';
+import * as echarts from 'echarts';
+
+// Dynamically import ECharts to avoid SSR issues
+const ReactECharts = dynamic(() => import('echarts-for-react'), { ssr: false });
 
 function ContactUs({basicInfo, locationInfoList}: { basicInfo: BasicInfo, locationInfoList: LocationInfo[] }) {
-  const BASE_URL: string = process.env.NEXT_PUBLIC_BASE_URL as string;
+  const [mapLoaded, setMapLoaded] = useState(false);
+  const chartRef = useRef<any>(null);
 
-  // const BDMapInit = () => {
-  //   BDMapGL('94KOPB1NRjoXmLvlJN6HMi7eVC50z09K').then((BMapGL: any) => {
-  //     const map = new BMapGL.Map('container')
-  //     locationInfoList.forEach(point => {
-  //       const bmapPoint = new BMapGL.Point(point.longitude, point.latitude);
-  //       const marker = new BMapGL.Marker(bmapPoint);
-  //
-  //       // 创建信息窗口（内容可自定义 HTML）
-  //       const infoWindow = new BMapGL.InfoWindow(`
-  //           <div>
-  //             <h4>姓名：${point.name}</h4>
-  //             <p style="margin: 5px 0 0; color: #666;">区域：${point.marker}</p>
-  //             <p style="margin: 5px 0 10px; color: #666;">联系方式：${point.phone}</p>
-  //           </div>
-  //         `);
-  //
-  //       // 绑定点击事件：点击标记点显示信息窗口
-  //       marker.addEventListener("click", () => {
-  //         map.openInfoWindow(infoWindow, bmapPoint); // 在点位坐标处打开窗口
-  //       });
-  //
-  //       map.centerAndZoom(bmapPoint, 7)
-  //       map.enableScrollWheelZoom(true) //设置鼠标放大缩小
-  //       map.addControl(new BMapGL.ScaleControl()) //卡尺
-  //       map.addOverlay(marker)
-  //     });
-  //
-  //   })
-  // }
-  const qrCodeUrl = BASE_URL + basicInfo.qrCodeUrl
   useEffect(() => {
-    // BDMapInit()
+    // Load China map data
+    const loadMapData = async () => {
+      try {
+        const response = await fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json');
+        const geoJson = await response.json();
+        echarts.registerMap('china', geoJson);
+        setMapLoaded(true);
+      } catch (error) {
+        console.error("Failed to load map data:", error);
+      }
+    };
+
+    loadMapData();
   }, []);
+
+  const getOption = () => {
+    return {
+      tooltip: {
+        trigger: 'item',
+        formatter: (params: any) => {
+          return `${params.name}`;
+        }
+      },
+      geo: {
+        map: 'china',
+        roam: true, // Allow zooming and panning
+        zoom: 1.2,
+        label: {
+          show: false
+        },
+        itemStyle: {
+          areaColor: '#f0f8ff', // Light blue background
+          borderColor: '#409eff' // Blue border
+        },
+        emphasis: {
+          itemStyle: {
+            areaColor: '#d9ecff'
+          }
+        }
+      },
+      series: [
+        {
+          name: 'Locations',
+          type: 'effectScatter',
+          coordinateSystem: 'geo',
+          data: locationInfoList.map(item => ({
+            name: item.name,
+            value: [item.longitude, item.latitude, 10], // value[2] is for size/visual
+            tooltip: {
+              formatter: `<b>${item.name}</b><br/>区域: ${item.marker}<br/>电话: ${item.phone}`
+            }
+          })),
+          symbolSize: 10,
+          itemStyle: {
+            color: '#ff4d4f',
+            shadowBlur: 10,
+            shadowColor: '#333'
+          },
+          emphasis: {
+            scale: true
+          },
+          tooltip: {
+             formatter: (params: any) => {
+               const item = locationInfoList.find(l => l.name === params.name);
+               if(item) {
+                   return `<b>${item.name}</b><br/>区域: ${item.marker}<br/>电话: ${item.phone}`;
+               }
+               return params.name;
+            }
+          }
+        }
+      ]
+    };
+  };
+
   return (
     <>
       {/* 联系我们 */}
@@ -47,38 +94,61 @@ function ContactUs({basicInfo, locationInfoList}: { basicInfo: BasicInfo, locati
         <div className="w-4/5 mx-auto my-10 sm:my-6">
           <SubTitle title="联系我们"/>
         </div>
-        <div className="w-full sm:w-[80%] mx-auto">
-          <Image
-            src="/assets/about/25.jpg"
-            alt="contact"
-            width={1000}
-            height={1000}
-            className="w-full h-auto block sm:hidden"
-            unoptimized
-          />
-          <Image
-            src="/assets/about/24.jpg"
-            alt="contact"
-            width={1000}
-            height={1000}
-            className="w-full h-auto hidden sm:block"
-            unoptimized
-          />
-        </div>
-        {/* <div className="grid sm:grid-cols-1 md:grid-cols-2 gap-6">
-          <div className="h-88" id="container"></div>
-          <div className="space-y-4">
-            <div className="bg-gray-300 w-60 h-60">
-              <Image src={qrCodeUrl} alt={'qrcode'} width={500} height={500}/>
+        
+        <div className="w-full sm:w-[90%] mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">
+            {/* Map Section */}
+            <div className="lg:col-span-2 h-[500px] bg-gray-50 rounded-xl overflow-hidden shadow-lg border border-gray-100 relative">
+                 {!mapLoaded && (
+                    <div className="absolute inset-0 flex items-center justify-center text-gray-400">
+                        地图加载中...
+                    </div>
+                 )}
+                 {mapLoaded && (
+                    <ReactECharts 
+                        ref={chartRef}
+                        option={getOption()} 
+                        style={{height: '100%', width: '100%'}}
+                        opts={{renderer: 'svg'}}
+                    />
+                 )}
             </div>
-            <p>电话：{basicInfo.telephone}</p>
-            <p>邮箱：{basicInfo.email}</p>
-            <p>地址：{basicInfo.address}</p>
-          </div>
-        </div> */}
+
+            {/* Info Section */}
+            <div className="space-y-6 flex flex-col justify-center bg-white p-6 rounded-xl shadow-md border border-gray-100">
+                <div>
+                    <h3 className="text-xl font-bold text-gray-800 mb-4 border-l-4 border-blue-600 pl-3">联系方式</h3>
+                    <div className="space-y-4 text-gray-600">
+                         <div className="flex items-start gap-3">
+                            <span className="font-medium min-w-[3rem]">电话：</span>
+                            <span>{basicInfo.telephone}</span>
+                         </div>
+                         <div className="flex items-start gap-3">
+                            <span className="font-medium min-w-[3rem]">邮箱：</span>
+                            <span>{basicInfo.email}</span>
+                         </div>
+                         <div className="flex items-start gap-3">
+                            <span className="font-medium min-w-[3rem]">地址：</span>
+                            <span>{basicInfo.address}</span>
+                         </div>
+                    </div>
+                </div>
+
+                <div className="pt-6 border-t border-gray-100">
+                     <div className="bg-gray-100 p-4 rounded-lg flex flex-col items-center">
+                        {/* QR Code would go here if available via URL */}
+                        <div className="w-32 h-32 bg-gray-200 flex items-center justify-center text-xs text-gray-500 mb-2">
+                             {basicInfo.qrCodeUrl ? (
+                                 <img src={process.env.NEXT_PUBLIC_BASE_URL + basicInfo.qrCodeUrl} alt="QR Code" className="w-full h-full object-contain"/>
+                             ) : "二维码"}
+                        </div>
+                        <span className="text-sm text-gray-500">扫码关注我们</span>
+                     </div>
+                </div>
+            </div>
+        </div>
       </section>
     </>
   );
 }
 
-export default ContactUs;
+export default ContactUs;