feat(platform): show realtime amap integration status

vehicle-data-platform/apps/web/src/pages/Realtime.tsx

@@ -8,7 +8,7 @@ import { PageHeader } from '../components/PageHeader';
 import { SourceStatusTags } from '../components/SourceStatusTags';
 import { StatusTag } from '../components/StatusTag';
 import { VehicleMap, type VehicleMapPoint } from '../components/VehicleMap';
-import { isAMapConfigured } from '../config/appConfig';
+import { getAMapConfig, isAMapConfigured } from '../config/appConfig';
 import { buildCsv, downloadCsv, type CsvColumn } from '../domain/csvExport';
 
 function canOpenVehicle(vin?: string) {
@@ -190,7 +190,8 @@ export function Realtime({
   const [loading, setLoading] = useState(true);
   const [filters, setFilters] = useState<Record<string, string>>(initialFilters);
   const [pagination, setPagination] = useState({ currentPage: 1, pageSize: 50, total: 0 });
-  const amapConfigured = isAMapConfigured();
+  const amapConfig = getAMapConfig();
+  const amapConfigured = isAMapConfigured(amapConfig);
 
   const load = (values: Record<string, string> = filters, page = pagination.currentPage, pageSize = pagination.pageSize) => {
     setLoading(true);
@@ -266,6 +267,32 @@ export function Realtime({
     online: row.online,
     title: `${row.plate || row.vin || '-'} ${vehicleServiceStatus(row).label} ${row.primaryProtocol || ''} ${row.lastSeen || ''}`
   }));
+  const mapIntegrationRows = [
+    {
+      label: 'Web JS Key',
+      value: amapConfigured ? '已配置' : '未配置',
+      color: amapConfigured ? 'green' as const : 'orange' as const,
+      detail: amapConfigured ? '前端可加载高德 Web JS API。' : '缺少公开 Key，地图将使用坐标预览。'
+    },
+    {
+      label: '安全代理',
+      value: amapConfig.securityServiceHost || '未启用',
+      color: amapConfig.securityServiceHost ? 'green' as const : 'grey' as const,
+      detail: amapConfig.securityServiceHost ? '安全密钥由服务端追加，不下发到浏览器。' : '未配置代理时会退回前端安全码模式。'
+    },
+    {
+      label: '定位覆盖',
+      value: `${locatedCount.toLocaleString()} / ${rows.length.toLocaleString()}`,
+      color: locatedCount > 0 ? 'blue' as const : 'orange' as const,
+      detail: '当前页有效经纬度车辆数。'
+    },
+    {
+      label: '高德 URI',
+      value: '坐标跳转',
+      color: 'blue' as const,
+      detail: '车辆队列可直接打开高德坐标，轨迹页可打开线路。'
+    }
+  ];
   const copyRealtimeSummary = () => copyText(realtimeOperationsSummaryText({
     filters,
     rows,
@@ -353,6 +380,18 @@ export function Realtime({
             <Typography.Text type="secondary">
               高德 Web JS Key 和安全密钥通过运行环境配置，前端只读取公开 Key；安全密钥后续走服务端代理，避免明文下发。
             </Typography.Text>
+            <div className="vp-map-integration-panel">
+              <div className="vp-map-service-queue-title">地图接入状态</div>
+              {mapIntegrationRows.map((item) => (
+                <div key={item.label} className="vp-map-integration-row">
+                  <div>
+                    <Typography.Text strong>{item.label}</Typography.Text>
+                    <Typography.Text type="tertiary" size="small">{item.detail}</Typography.Text>
+                  </div>
+                  <Tag color={item.color}>{item.value}</Tag>
+                </div>
+              ))}
+            </div>
             <div className="vp-source-consistency-panel">
               <div className="vp-map-service-queue-title">多来源一致性检查</div>
               {sourceIssueRows.length === 0 ? (