feat(ui): 统一面板空状态引导

src/components/olmap/core/Controls/HistoryDataPanel.tsx

@@ -36,6 +36,7 @@ import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
 import { zhCN as pickerZhCN } from "@mui/x-date-pickers/locales";
 import config from "@/config/config";
 import { apiFetch } from "@/lib/apiFetch";
+import PanelEmptyState from "@components/olmap/common/PanelEmptyState";
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -413,11 +414,11 @@ const emptyStateMessages: Record<
 > = {
   chart: {
     title: "暂无时序数据",
-    subtitle: "请切换时间段来获取曲线",
+    subtitle: "请调整时间范围，或确认所选设备在该时段已有数据。",
   },
   table: {
     title: "暂无表格数据",
-    subtitle: "请切换时间段来获取记录",
+    subtitle: "请调整时间范围，或确认所选设备在该时段已有数据。",
   },
 };
 
@@ -613,28 +614,23 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
   );
 
   const renderEmpty = () => {
+    if (!hasDevices) {
+      return (
+        <PanelEmptyState
+          icon={<ShowChart />}
+          title="尚未选择地图要素"
+          description="请在地图上选择一个要素以查看历史数据。"
+        />
+      );
+    }
+
     const message = emptyStateMessages[activeTab];
     return (
-      <Box
-        sx={{
-          flex: 1,
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          py: 8,
-          color: "text.secondary",
-          height: "100%",
-        }}
-      >
-        <ShowChart sx={{ fontSize: 64, mb: 2, opacity: 0.3 }} />
-        <Typography variant="h6" gutterBottom sx={{ fontWeight: 500 }}>
-          {message.title}
-        </Typography>
-        <Typography variant="body2" color="text.secondary">
-          {message.subtitle}
-        </Typography>
-      </Box>
+      <PanelEmptyState
+        icon={activeTab === "chart" ? <ShowChart /> : <TableChart />}
+        title={message.title}
+        description={message.subtitle}
+      />
     );
   };
 
@@ -1048,15 +1044,6 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
                 </Stack>
               </LocalizationProvider>
 
-              {!hasDevices && (
-                <Typography
-                  variant="caption"
-                  color="warning.main"
-                  sx={{ mt: 1, display: "block" }}
-                >
-                  请选择一个要素以查看其历史数据。
-                </Typography>
-              )}
               {error && (
                 <Typography
                   variant="caption"

src/components/olmap/core/Controls/PropertyPanel.tsx

@@ -2,7 +2,7 @@
 
 import React, { useRef, useState } from "react";
 import Draggable from "react-draggable";
-import { Close } from "@mui/icons-material";
+import { Close, InfoOutlined } from "@mui/icons-material";
 import {
   Button,
   CircularProgress,
@@ -14,6 +14,7 @@ import {
   Tooltip,
 } from "@mui/material";
 import type { SelectChangeEvent } from "@mui/material/Select";
+import PanelEmptyState from "@components/olmap/common/PanelEmptyState";
 
 interface BaseProperty {
   label: string;
@@ -162,23 +163,11 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
         {/* 内容区域 */}
         <div className="flex-1 overflow-y-auto px-4 py-3">
           {!id ? (
-            <div className="flex flex-col items-center justify-center py-12 text-gray-400">
-              <svg
-                className="w-16 h-16 mb-3"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={1.5}
-                  d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
-                />
-              </svg>
-              <p className="text-sm">暂无属性信息</p>
-              <p className="text-xs mt-1">请选择一个要素以查看其属性</p>
-            </div>
+            <PanelEmptyState
+              icon={<InfoOutlined />}
+              title="尚未选择地图要素"
+              description="请在地图上选择管道、节点或设备以查看属性。"
+            />
           ) : (
             <div className="space-y-2">
               {/* ID 属性 */}