更新地图组件，优化标记点数据处理逻辑，增加全局配置获取方式，提升代码可维护性和用户体验。同时，新增地图标记数据接口定义，确保数据结构一致性。

client/admin/components_amap.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { getGlobalConfig } from './utils.ts';
+import type { GlobalConfig } from '../share/types.ts';
 import { Spin } from 'antd';
 import './style_amap.css';
 import { MapMode, MarkerData } from '../share/types.ts';
@@ -7,9 +9,9 @@ import { MapMode, MarkerData } from '../share/types.ts';
 // 在线地图配置
 export const AMAP_ONLINE_CONFIG = {
   // 高德地图 Web API 密钥
-  API_KEY: window.CONFIG?.MAP_CONFIG?.KEY,
+  API_KEY: getGlobalConfig('MAP_CONFIG')?.KEY || '',
   // 主JS文件路径
-  MAIN_JS: 'https://webapi.amap.com/maps?v=2.0&key=' + window.CONFIG?.MAP_CONFIG?.KEY,
+  MAIN_JS: 'https://webapi.amap.com/maps?v=2.0&key=' + (getGlobalConfig('MAP_CONFIG')?.KEY || ''),
   // 插件列表
   PLUGINS: ['AMap.MouseTool', 'AMap.RangingTool', 'AMap.Scale', 'AMap.ToolBar', 'AMap.MarkerCluster'],
 };
@@ -82,6 +84,7 @@ export interface AMapInstance {
 declare global {
   interface Window {
     AMap: any;
+    CONFIG?: GlobalConfig;
   }
 }
 
@@ -338,7 +341,7 @@ const AMapComponent: React.FC<AMapProps> = ({
   height = '400px',
   center = TILE_CONFIG.DEFAULT_CENTER as [number, number],
   zoom = TILE_CONFIG.DEFAULT_ZOOM,
-  mode = window.CONFIG?.MAP_CONFIG?.MAP_MODE || MapMode.ONLINE,
+  mode = (getGlobalConfig('MAP_CONFIG')?.MAP_MODE as MapMode) || MapMode.ONLINE,
   onMarkerClick,
   onClick,
   markers = [],
@@ -438,4 +441,4 @@ const AMapComponent: React.FC<AMapProps> = ({
   );
 };
 
-export default AMapComponent;
+export default AMapComponent;

client/admin/pages_map.tsx

@@ -108,16 +108,18 @@ export const LoginMapPage = () => {
 
   // 渲染地图标记点
   const renderMarkers = (locations: LoginLocation[]): MarkerData[] => {
-    return locations.map(location => ({
-      id: location.id,
-      longitude: location.longitude,
-      latitude: location.latitude,
-      title: location.user.nickname || location.user.username,
-      description: `登录时间: ${dayjs(location.loginTime).format('YYYY-MM-DD HH:mm:ss')}\nIP地址: ${location.ipAddress}`,
-      status: 'online',
-      type: 'login',
-      extraData: location
-    }));
+    return locations
+      .filter(location => location.longitude !== null && location.latitude !== null)
+      .map(location => ({
+        id: location.id?.toString() || '',
+        longitude: location.longitude as number,
+        latitude: location.latitude as number,
+        title: location.user?.nickname || location.user?.username || '未知用户',
+        description: `登录时间: ${dayjs(location.login_time).format('YYYY-MM-DD HH:mm:ss')}\nIP地址: ${location.ip_address}`,
+        status: 'online',
+        type: 'login',
+        extraData: location
+      }));
   };
 
   return (
@@ -156,7 +158,9 @@ export const LoginMapPage = () => {
           <div style={{ height: '100%', minHeight: '500px' }}>
             <AMap
               markers={renderMarkers(locations)}
-              center={locations[0] ? [locations[0].longitude, locations[0].latitude] : undefined}
+              center={locations[0] && locations[0].longitude !== null && locations[0].latitude !== null 
+                ? [locations[0].longitude, locations[0].latitude] as [number, number] 
+                : undefined}
               onMarkerClick={handleMarkerClick}
               height={'100%'}
             />
@@ -179,7 +183,7 @@ export const LoginMapPage = () => {
         ) : markerDetail ? (
           <Descriptions column={1}>
             <Descriptions.Item label={<><UserOutlined /> 用户</>}>
-              {markerDetail.user.nickname || markerDetail.user.username}
+              {markerDetail.user?.nickname || markerDetail.user?.username || '未知用户'}
             </Descriptions.Item>
             <Descriptions.Item label={<><ClockCircleOutlined /> 登录时间</>}>
               {dayjs(markerDetail.login_time).format('YYYY-MM-DD HH:mm:ss')}
@@ -208,4 +212,4 @@ export const LoginMapPage = () => {
       </Drawer>
     </div>
   );
-};
+};