OrgTJWater/TJWaterFrontend_Refine
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整时间轴样式
Build Push and Deploy / docker-image (push) Successful in 2m0s
Details
Build Push and Deploy / deploy-fallback-log (push) Has been skipped
Details

Browse Source
This commit is contained in:
Huarch
2026-05-28 17:11:08 +08:00
parent 9dc8549f31
commit a4f0ffcd32
2 changed files with 48 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/olmap/HealthRiskAnalysis/Timeline.tsx
+24 -1
View File
@@ -59,6 +59,23 @@ interface TimelineProps {
schemeName?: string; schemeName?: string;
} }
const timelineIconButtonSx = {
width: 32,
height: 32,
borderRadius: "50%",
flexShrink: 0,
overflow: "hidden",
"&:hover": {
borderRadius: "50%",
},
"&.Mui-focusVisible": {
borderRadius: "50%",
},
"& .MuiTouchRipple-root": {
borderRadius: "50%",
},
} as const;
const Timeline: React.FC<TimelineProps> = ({ const Timeline: React.FC<TimelineProps> = ({
disableDateSelection = false, disableDateSelection = false,
}) => { }) => {
@@ -445,7 +462,7 @@ const Timeline: React.FC<TimelineProps> = ({
}; };
return ( return (
<div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 w-[920px] opacity-90 hover:opacity-100 transition-opacity duration-300"> <div className="absolute bottom-4 left-1/2 z-10 w-[950px] max-w-[calc(100vw-2rem)] -translate-x-1/2 opacity-90 transition-opacity duration-300 hover:opacity-100">
<LocalizationProvider <LocalizationProvider
dateAdapter={AdapterDayjs} dateAdapter={AdapterDayjs}
adapterLocale="zh-cn" adapterLocale="zh-cn"
@@ -481,6 +498,7 @@ const Timeline: React.FC<TimelineProps> = ({
onClick={handleDayStepBackward} onClick={handleDayStepBackward}
size="small" size="small"
disabled={disableDateSelection} disabled={disableDateSelection}
sx={timelineIconButtonSx}
> >
<FiSkipBack /> <FiSkipBack />
</IconButton> </IconButton>
@@ -517,6 +535,7 @@ const Timeline: React.FC<TimelineProps> = ({
selectedDateTime.toDateString() === selectedDateTime.toDateString() ===
new Date().toDateString() new Date().toDateString()
} }
sx={timelineIconButtonSx}
> >
<FiSkipForward /> <FiSkipForward />
</IconButton> </IconButton>
@@ -545,6 +564,7 @@ const Timeline: React.FC<TimelineProps> = ({
color="primary" color="primary"
onClick={handleStepBackward} onClick={handleStepBackward}
size="small" size="small"
sx={timelineIconButtonSx}
> >
<TbArrowBackUp /> <TbArrowBackUp />
</IconButton> </IconButton>
@@ -555,6 +575,7 @@ const Timeline: React.FC<TimelineProps> = ({
color="primary" color="primary"
onClick={isPlaying ? handlePause : handlePlay} onClick={isPlaying ? handlePause : handlePlay}
size="small" size="small"
sx={timelineIconButtonSx}
> >
{isPlaying ? <Pause /> : <PlayArrow />} {isPlaying ? <Pause /> : <PlayArrow />}
</IconButton> </IconButton>
@@ -565,6 +586,7 @@ const Timeline: React.FC<TimelineProps> = ({
color="primary" color="primary"
onClick={handleStepForward} onClick={handleStepForward}
size="small" size="small"
sx={timelineIconButtonSx}
> >
<TbArrowForwardUp /> <TbArrowForwardUp />
</IconButton> </IconButton>
@@ -575,6 +597,7 @@ const Timeline: React.FC<TimelineProps> = ({
color="secondary" color="secondary"
onClick={handleStop} onClick={handleStop}
size="small" size="small"
sx={timelineIconButtonSx}
> >
<Stop /> <Stop />
</IconButton> </IconButton>
src/components/olmap/core/Controls/Timeline.tsx
+24 -1
View File
@@ -39,6 +39,23 @@ interface TimelineProps {
schemeType?: string; schemeType?: string;
} }
const timelineIconButtonSx = {
width: 32,
height: 32,
borderRadius: "50%",
flexShrink: 0,
overflow: "hidden",
"&:hover": {
borderRadius: "50%",
},
"&.Mui-focusVisible": {
borderRadius: "50%",
},
"& .MuiTouchRipple-root": {
borderRadius: "50%",
},
} as const;
const NOOP_SET_CURRENT_TIME = (_: any) => undefined; const NOOP_SET_CURRENT_TIME = (_: any) => undefined;
const NOOP_SET_SELECTED_DATE = (_: any) => undefined; const NOOP_SET_SELECTED_DATE = (_: any) => undefined;
@@ -665,7 +682,7 @@ const Timeline: React.FC<TimelineProps> = ({
<Draggable nodeRef={draggableRef} handle=".drag-handle"> <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 z-10 w-[950px] max-w-[calc(100vw-2rem)] -translate-x-1/2 opacity-90 transition-opacity duration-300 hover:opacity-100"
> >
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="zh-cn"> <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="zh-cn">
<Paper <Paper
@@ -723,6 +740,7 @@ const Timeline: React.FC<TimelineProps> = ({
onClick={handleDayStepBackward} onClick={handleDayStepBackward}
size="small" size="small"
disabled={disableDateSelection} disabled={disableDateSelection}
sx={timelineIconButtonSx}
> >
<FiSkipBack /> <FiSkipBack />
</IconButton> </IconButton>
@@ -757,6 +775,7 @@ const Timeline: React.FC<TimelineProps> = ({
selectedDate.toDateString() === selectedDate.toDateString() ===
new Date().toDateString() new Date().toDateString()
} }
sx={timelineIconButtonSx}
> >
<FiSkipForward /> <FiSkipForward />
</IconButton> </IconButton>
@@ -785,6 +804,7 @@ const Timeline: React.FC<TimelineProps> = ({
color="primary" color="primary"
onClick={handleStepBackward} onClick={handleStepBackward}
size="small" size="small"
sx={timelineIconButtonSx}
> >
<TbRewindBackward15 /> <TbRewindBackward15 />
</IconButton> </IconButton>
@@ -795,6 +815,7 @@ const Timeline: React.FC<TimelineProps> = ({
color="primary" color="primary"
onClick={isPlaying ? handlePause : handlePlay} onClick={isPlaying ? handlePause : handlePlay}
size="small" size="small"
sx={timelineIconButtonSx}
> >
{isPlaying ? <Pause /> : <PlayArrow />} {isPlaying ? <Pause /> : <PlayArrow />}
</IconButton> </IconButton>
@@ -805,6 +826,7 @@ const Timeline: React.FC<TimelineProps> = ({
color="primary" color="primary"
onClick={handleStepForward} onClick={handleStepForward}
size="small" size="small"
sx={timelineIconButtonSx}
> >
<TbRewindForward15 /> <TbRewindForward15 />
</IconButton> </IconButton>
@@ -815,6 +837,7 @@ const Timeline: React.FC<TimelineProps> = ({
color="secondary" color="secondary"
onClick={handleStop} onClick={handleStop}
size="small" size="small"
sx={timelineIconButtonSx}
> >
<Stop /> <Stop />
</IconButton> </IconButton>