✨ feat(dashboard): 优化供应链看板弹出框信息展示

- 增加subtitle字段用于显示基地详细位置信息
- 更新指标数据为"辐射带动"和"自建基地规模"
- 调整弹出框宽度和位置，优化整体布局
- 改进文字样式，标题使用更大字号和浅绿色，副标题添加渐变色效果
- 重构数据展示结构，采用两行布局清晰展示指标名称、数值和单位

💄 style(popup): 美化弹出框视觉效果

- 调整标题文字大小为36px并改为浅绿色
- 副标题添加渐变色文字效果
- 数值使用更大字号和浅绿色突出显示
- 优化间距和布局，提升整体视觉效果

src/client/home/pages/SupplyChainDashboards/GrainOilDashboard.tsx

@@ -22,10 +22,11 @@ interface PopupState {
   position: { x: number; y: number };
   data?: {
     title: string;
+    subtitle: string;
     metrics: {
       label: string;
       value: string;
-      unit?: string;
+      unit: string;
     }[];
   };
 }
@@ -46,20 +47,20 @@ const GrainOilDashboard: React.FC<GrainOilDashboardProps> = () => {
     let popupData;
     if (point.type === 'base') {
       popupData = {
-        title: `${point.name}基地信息`,
+        title: "源头",
+        subtitle: "江汉大米核心示范基地荆门/荆州/黄冈/孝感",
         metrics: [
-          { label: "种植面积", value: "15", unit: "万亩" },
-          { label: "年产量", value: "200", unit: "万吨" },
-          { label: "带动农户", value: "5000", unit: "户" }
+          { label: "辐射带动：", value: "＞20", unit: "万亩" },
+          { label: "自建基地规模：", value: "6~15", unit: "万亩" }
         ]
       };
     } else {
       popupData = {
-        title: `${point.name}产业链信息`,
+        title: "源头",
+        subtitle: "江汉大米核心示范基地荆门/荆州/黄冈/孝感",
         metrics: [
-          { label: "加工能力", value: "30", unit: "万吨/年" },
-          { label: "储存仓容", value: "300", unit: "万吨" },
-          { label: "年产值", value: "50", unit: "亿元" }
+          { label: "辐射带动：", value: "＞20", unit: "万亩" },
+          { label: "自建基地规模：", value: "6~15", unit: "万亩" }
         ]
       };
     }

src/client/home/pages/SupplyChainDashboards/components/PopupInfoBox.tsx

@@ -3,10 +3,11 @@ import React from 'react';
 // 定义弹出框数据类型
 interface PopupData {
   title: string;
+  subtitle: string;
   metrics: {
     label: string;
     value: string;
-    unit?: string;
+    unit: string;
   }[];
 }
 
@@ -23,11 +24,11 @@ const PopupInfoBox: React.FC<PopupInfoBoxProps> = ({
 }) => {
   // 默认数据
   const defaultData: PopupData = {
-    title: "粮食源头",
+    title: "源头",
+    subtitle: "江汉大米核心示范基地荆门/荆州/黄冈/孝感",
     metrics: [
-      { label: "种植面积", value: "15", unit: "万亩" },
-      { label: "年产量", value: "200", unit: "万吨" },
-      { label: "带动农户", value: "5000", unit: "户" }
+      { label: "辐射带动：", value: "＞20", unit: "万亩" },
+      { label: "自建基地规模：", value: "6~15", unit: "万亩" }
     ]
   };
 
@@ -56,40 +57,58 @@ const PopupInfoBox: React.FC<PopupInfoBoxProps> = ({
         </div>
 
         {/* 内容区域 */}
-        <div className="absolute content-stretch flex flex-col gap-[12px] items-center left-[50px] top-[31.73px] w-[470px]">
+        <div className="absolute content-stretch flex flex-col gap-[12px] items-center left-[29.81px] top-[31.73px] w-[420px]">
           {/* 标题区域 */}
           <div className="content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full">
             <div className="box-border content-stretch flex gap-[10px] h-[62px] items-center px-0 py-[4px] relative shrink-0">
-              <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-white whitespace-nowrap">
+              <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[36px] text-lime-200 whitespace-nowrap">
                 <p className="leading-[32px]">{displayData.title}</p>
               </div>
             </div>
             <div className="box-border content-stretch flex gap-[10px] h-[62px] items-center px-0 py-[4px] relative shrink-0 w-full">
-              <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-white whitespace-nowrap">
-                <p className="leading-[32px]">详细信息</p>
+              <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-white">
+                <p className="leading-[32px] bg-gradient-to-b from-white to-sky-400 bg-clip-text text-transparent break-words">{displayData.subtitle}</p>
               </div>
             </div>
           </div>
 
           {/* 数据指标区域 */}
           <div className="content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full">
+            {/* 第一行数据 */}
             <div className="content-stretch flex gap-[20px] items-start relative shrink-0">
-              {displayData.metrics.slice(0, 3).map((metric, index) => (
-                <div key={index} className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0">
-                  <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-white whitespace-nowrap">
-                    <p className="leading-[32px]">{metric.label}</p>
-                  </div>
+              <div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0">
+                <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-white whitespace-nowrap">
+                  <p className="leading-[32px]">{displayData.metrics[0]?.label}</p>
                 </div>
-              ))}
+              </div>
+              <div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0">
+                <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[36px] text-lime-200 whitespace-nowrap">
+                  <p className="leading-[32px]">{displayData.metrics[0]?.value}</p>
+                </div>
+              </div>
+              <div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0">
+                <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-white whitespace-nowrap">
+                  <p className="leading-[32px]">{displayData.metrics[0]?.unit}</p>
+                </div>
+              </div>
             </div>
+            {/* 第二行数据 */}
             <div className="content-stretch flex gap-[20px] items-start relative shrink-0">
-              {displayData.metrics.slice(0, 3).map((metric, index) => (
-                <div key={index} className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0">
-                  <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-[#C5FF92] whitespace-nowrap">
-                    <p className="leading-[32px]">{metric.value} {metric.unit}</p>
-                  </div>
+              <div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0">
+                <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-white whitespace-nowrap">
+                  <p className="leading-[32px]">{displayData.metrics[1]?.label}</p>
                 </div>
-              ))}
+              </div>
+              <div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0">
+                <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[36px] text-lime-200 whitespace-nowrap">
+                  <p className="leading-[32px]">{displayData.metrics[1]?.value}</p>
+                </div>
+              </div>
+              <div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0">
+                <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-white whitespace-nowrap">
+                  <p className="leading-[32px]">{displayData.metrics[1]?.unit}</p>
+                </div>
+              </div>
             </div>
           </div>
         </div>