调整draggable的区域,鼠标移动到draggable的区域时,指针调整为移动的icon

This commit is contained in:
JIANG
2026-01-07 15:05:23 +08:00
parent f43abfc6c4
commit 350eda4b10
3 changed files with 34 additions and 3 deletions

View File

@@ -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

View File

@@ -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

View File

@@ -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