From 350eda4b109ead23ad2195f32cea6c007d7b84e9 Mon Sep 17 00:00:00 2001
From: JIANG <huarch97@gmail.com>
Date: Wed, 7 Jan 2026 15:05:23 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4draggable=E7=9A=84=E5=8C=BA?=
 =?UTF-8?q?=E5=9F=9F=EF=BC=8C=E9=BC=A0=E6=A0=87=E7=A7=BB=E5=8A=A8=E5=88=B0?=
 =?UTF-8?q?draggable=E7=9A=84=E5=8C=BA=E5=9F=9F=E6=97=B6=EF=BC=8C=E6=8C=87?=
 =?UTF-8?q?=E9=92=88=E8=B0=83=E6=95=B4=E4=B8=BA=E7=A7=BB=E5=8A=A8=E7=9A=84?=
 =?UTF-8?q?icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/OlMap/Controls/HistoryDataPanel.tsx   |  4 ++-
 src/app/OlMap/Controls/Timeline.tsx           | 29 ++++++++++++++++++-
 .../HealthRiskAnalysis/PredictDataPanel.tsx   |  4 ++-
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/app/OlMap/Controls/HistoryDataPanel.tsx b/src/app/OlMap/Controls/HistoryDataPanel.tsx
index 2588164..86c9303 100644
--- a/src/app/OlMap/Controls/HistoryDataPanel.tsx
+++ b/src/app/OlMap/Controls/HistoryDataPanel.tsx
@@ -776,7 +776,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
   return (
     <>
       {/* 主面板 */}
-      <Draggable nodeRef={draggableRef}>
+      <Draggable nodeRef={draggableRef} handle=".drag-handle">
         <Box
           ref={draggableRef}
           sx={{
@@ -811,12 +811,14 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
           >
             {/* Header */}
             <Box
+              className="drag-handle"
               sx={{
                 p: 2,
                 borderBottom: 1,
                 borderColor: "divider",
                 backgroundColor: "primary.main",
                 color: "primary.contrastText",
+                cursor: "move",
               }}
             >
               <Stack
diff --git a/src/app/OlMap/Controls/Timeline.tsx b/src/app/OlMap/Controls/Timeline.tsx
index 8ceb749..2df14bb 100644
--- a/src/app/OlMap/Controls/Timeline.tsx
+++ b/src/app/OlMap/Controls/Timeline.tsx
@@ -538,7 +538,7 @@ const Timeline: React.FC<TimelineProps> = ({
   };
 
   return (
-    <Draggable nodeRef={draggableRef}>
+    <Draggable nodeRef={draggableRef} handle=".drag-handle">
       <div
         ref={draggableRef}
         className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 w-[920px] opacity-90 hover:opacity-100 transition-opacity duration-300"
@@ -553,10 +553,37 @@ const Timeline: React.FC<TimelineProps> = ({
               right: 0,
               zIndex: 1000,
               p: 2,
+              pt: 1, // 减小顶部内边距，为拖拽柄留出空间
               backgroundColor: "rgba(255, 255, 255, 0.95)",
               backdropFilter: "blur(10px)",
             }}
           >
+            {/* 拖拽柄区域 */}
+            <Box
+              className="drag-handle"
+              sx={{
+                width: "100%",
+                height: "16px",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                cursor: "move",
+                mb: 1,
+                borderRadius: "4px 4px 0 0",
+                "&:hover": {
+                  backgroundColor: "rgba(0, 0, 0, 0.05)",
+                },
+              }}
+            >
+              <Box
+                sx={{
+                  width: "40px",
+                  height: "4px",
+                  backgroundColor: "grey.400",
+                  borderRadius: "2px",
+                }}
+              />
+            </Box>
             <Box sx={{ width: "100%" }}>
               {/* 控制按钮栏 */}
               <Stack
diff --git a/src/components/olmap/HealthRiskAnalysis/PredictDataPanel.tsx b/src/components/olmap/HealthRiskAnalysis/PredictDataPanel.tsx
index 2c2253f..8ab3f1a 100644
--- a/src/components/olmap/HealthRiskAnalysis/PredictDataPanel.tsx
+++ b/src/components/olmap/HealthRiskAnalysis/PredictDataPanel.tsx
@@ -160,7 +160,7 @@ const PredictDataPanel: React.FC<PredictDataPanelProps> = ({
   };
 
   return (
-    <Draggable nodeRef={draggableRef}>
+    <Draggable nodeRef={draggableRef} handle=".drag-handle">
       <Box
         ref={draggableRef}
         sx={{
@@ -195,12 +195,14 @@ const PredictDataPanel: React.FC<PredictDataPanelProps> = ({
         >
           {/* Header */}
           <Box
+            className="drag-handle"
             sx={{
               p: 2,
               borderBottom: 1,
               borderColor: "divider",
               backgroundColor: "primary.main",
               color: "primary.contrastText",
+              cursor: "move",
             }}
           >
             <Stack