调整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 ( return (
<> <>
{/* 主面板 */} {/* 主面板 */}
<Draggable nodeRef={draggableRef}> <Draggable nodeRef={draggableRef} handle=".drag-handle">
<Box <Box
ref={draggableRef} ref={draggableRef}
sx={{ sx={{
@@ -811,12 +811,14 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
> >
{/* Header */} {/* Header */}
<Box <Box
className="drag-handle"
sx={{ sx={{
p: 2, p: 2,
borderBottom: 1, borderBottom: 1,
borderColor: "divider", borderColor: "divider",
backgroundColor: "primary.main", backgroundColor: "primary.main",
color: "primary.contrastText", color: "primary.contrastText",
cursor: "move",
}} }}
> >
<Stack <Stack

View File

@@ -538,7 +538,7 @@ const Timeline: React.FC<TimelineProps> = ({
}; };
return ( return (
<Draggable nodeRef={draggableRef}> <Draggable nodeRef={draggableRef} handle=".drag-handle">
<div <div
ref={draggableRef} 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" 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, right: 0,
zIndex: 1000, zIndex: 1000,
p: 2, p: 2,
pt: 1, // 减小顶部内边距,为拖拽柄留出空间
backgroundColor: "rgba(255, 255, 255, 0.95)", backgroundColor: "rgba(255, 255, 255, 0.95)",
backdropFilter: "blur(10px)", 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%" }}> <Box sx={{ width: "100%" }}>
{/* 控制按钮栏 */} {/* 控制按钮栏 */}
<Stack <Stack

View File

@@ -160,7 +160,7 @@ const PredictDataPanel: React.FC<PredictDataPanelProps> = ({
}; };
return ( return (
<Draggable nodeRef={draggableRef}> <Draggable nodeRef={draggableRef} handle=".drag-handle">
<Box <Box
ref={draggableRef} ref={draggableRef}
sx={{ sx={{
@@ -195,12 +195,14 @@ const PredictDataPanel: React.FC<PredictDataPanelProps> = ({
> >
{/* Header */} {/* Header */}
<Box <Box
className="drag-handle"
sx={{ sx={{
p: 2, p: 2,
borderBottom: 1, borderBottom: 1,
borderColor: "divider", borderColor: "divider",
backgroundColor: "primary.main", backgroundColor: "primary.main",
color: "primary.contrastText", color: "primary.contrastText",
cursor: "move",
}} }}
> >
<Stack <Stack