重构 Agent 聊天，支持分支管理与消息克隆

src/components/olmap/SCADA/SCADADataPanel.tsx

@@ -20,6 +20,7 @@ import {
   ShowChart,
   TableChart,
   CleaningServices,
+  Close,
   ChevronLeft,
   ChevronRight,
 } from "@mui/icons-material";
@@ -72,12 +73,22 @@ export interface SCADADataPanelProps {
   start_time?: string;
   /** 外部传入结束时间（ISO8601 字符串），用于初始化并触发查询 */
   end_time?: string;
+  /** 关闭面板 */
+  onClose?: () => void;
 }
 
 type PanelTab = "chart" | "table";
 
 type LoadingState = "idle" | "loading" | "success" | "error";
 
+const panelHeaderActionSx = {
+  color: "primary.contrastText",
+  backgroundColor: "rgba(255,255,255,0.08)",
+  "&:hover": {
+    backgroundColor: "rgba(255,255,255,0.18)",
+  },
+};
+
 /**
  * 从后端 API 获取 SCADA 数据
  */
@@ -320,6 +331,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
   onCleanData,
   start_time,
   end_time,
+  onClose,
 }) => {
   const { open } = useNotification();
   const { data: user } = useGetIdentity<IUser>();
@@ -1063,11 +1075,24 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
                 />
               </Stack>
               <Stack direction="row" spacing={1}>
+                {onClose && (
+                  <Tooltip title="关闭">
+                    <IconButton
+                      size="small"
+                      onClick={onClose}
+                      aria-label="关闭 SCADA 历史数据面板"
+                      sx={panelHeaderActionSx}
+                    >
+                      <Close fontSize="small" />
+                    </IconButton>
+                  </Tooltip>
+                )}
                 <Tooltip title="收起">
                   <IconButton
                     size="small"
                     onClick={() => setIsExpanded(false)}
-                    sx={{ color: "primary.contrastText" }}
+                    aria-label="收起 SCADA 历史数据面板"
+                    sx={panelHeaderActionSx}
                   >
                     <ChevronRight fontSize="small" />
                   </IconButton>

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

@@ -15,13 +15,14 @@ import {
   Chip,
   CircularProgress,
   Divider,
+  IconButton,
   Stack,
   Tab,
   Tabs,
   Tooltip,
   Typography,
 } from "@mui/material";
-import { Refresh, ShowChart, TableChart } from "@mui/icons-material";
+import { Close, Refresh, ShowChart, TableChart } from "@mui/icons-material";
 import { DataGrid, GridColDef } from "@mui/x-data-grid";
 import { zhCN } from "@mui/x-data-grid/locales";
 import ReactECharts from "echarts-for-react";
@@ -63,12 +64,22 @@ export interface SCADADataPanelProps {
   start_time?: string;
   /** 外部传入结束时间（ISO8601 字符串），用于初始化并触发查询 */
   end_time?: string;
+  /** 关闭面板 */
+  onClose?: () => void;
 }
 
 type PanelTab = "chart" | "table";
 
 type LoadingState = "idle" | "loading" | "success" | "error";
 
+const panelHeaderActionSx = {
+  color: "primary.contrastText",
+  backgroundColor: "rgba(255,255,255,0.08)",
+  "&:hover": {
+    backgroundColor: "rgba(255,255,255,0.18)",
+  },
+};
+
 /**
  * 从后端 API 获取 SCADA 数据
  */
@@ -419,6 +430,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
   fractionDigits = 2,
   start_time,
   end_time,
+  onClose,
 }) => {
   // 从 featureInfos 中提取设备 ID 列表
   const deviceIds = useMemo(
@@ -850,7 +862,11 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
   return (
     <>
       {/* 主面板 */}
-      <Draggable nodeRef={draggableRef} handle=".drag-handle">
+      <Draggable
+        nodeRef={draggableRef}
+        handle=".drag-handle"
+        cancel=".panel-close-button"
+      >
         <Box
           ref={draggableRef}
           sx={{
@@ -915,6 +931,19 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
                     }}
                   />
                 </Stack>
+                {onClose && (
+                  <Tooltip title="关闭">
+                    <IconButton
+                      className="panel-close-button"
+                      size="small"
+                      onClick={onClose}
+                      aria-label="关闭历史数据面板"
+                      sx={panelHeaderActionSx}
+                    >
+                      <Close fontSize="small" />
+                    </IconButton>
+                  </Tooltip>
+                )}
               </Stack>
             </Box>
 

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

@@ -2,6 +2,8 @@
 
 import React, { useRef } from "react";
 import Draggable from "react-draggable";
+import { Close } from "@mui/icons-material";
+import { IconButton, Tooltip } from "@mui/material";
 
 interface BaseProperty {
   label: string;
@@ -24,14 +26,23 @@ interface PropertyPanelProps {
   id?: string;
   type?: string;
   properties?: PropertyItem[];
+  onClose?: () => void;
 }
 
 const PropertyPanel: React.FC<PropertyPanelProps> = ({
   id,
   type = "未知类型",
   properties = [],
+  onClose,
 }) => {
   const draggableRef = useRef<HTMLDivElement>(null);
+  const headerActionSx = {
+    color: "common.white",
+    backgroundColor: "rgba(255,255,255,0.08)",
+    "&:hover": {
+      backgroundColor: "rgba(255,255,255,0.18)",
+    },
+  };
 
   const formatValue = (property: BaseProperty) => {
     if (property.formatter) {
@@ -55,7 +66,11 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
     : 0;
 
   return (
-    <Draggable nodeRef={draggableRef} handle=".drag-handle">
+    <Draggable
+      nodeRef={draggableRef}
+      handle=".drag-handle"
+      cancel=".panel-close-button"
+    >
       <div
         ref={draggableRef}
         className="absolute top-4 right-4 bg-white shadow-2xl rounded-xl overflow-hidden w-96 max-h-[850px] flex flex-col backdrop-blur-sm z-1300 opacity-95 hover:opacity-100"
@@ -78,6 +93,19 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
             </svg>
             <h3 className="text-lg font-semibold">属性面板</h3>
           </div>
+          {onClose && (
+            <Tooltip title="关闭">
+              <IconButton
+                className="panel-close-button"
+                size="small"
+                onClick={onClose}
+                aria-label="关闭属性面板"
+                sx={headerActionSx}
+              >
+                <Close fontSize="small" />
+              </IconButton>
+            </Tooltip>
+          )}
         </div>
 
         {/* 内容区域 */}