fix(timeline): align range mask with slider

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

@@ -33,6 +33,7 @@ import { useMap } from "../MapComponent";
 import {
   formatTimelineTime,
   getRoundedCurrentTimelineMinutes,
+  getTimelineDisabledRangePercentages,
   normalizeTimelineMinutes,
 } from "./timelineTime";
 
@@ -109,6 +110,10 @@ const Timeline: React.FC<TimelineProps> = ({
     minTime,
     maxTime,
   );
+  const disabledRangePercentages = getTimelineDisabledRangePercentages(
+    minTime,
+    maxTime,
+  );
   useEffect(() => {
     if (schemeDate) {
       setSelectedDate(schemeDate);
@@ -945,22 +950,28 @@ const Timeline: React.FC<TimelineProps> = ({
                 />
                 {/* 禁用区域遮罩 */}
                 {timeRange && (
-                  <>
+                  <Box
+                    sx={{
+                      position: "absolute",
+                      left: 16,
+                      right: 16,
+                      top: "30%",
+                      transform: "translateY(-50%)",
+                      height: "20px",
+                      pointerEvents: "none",
+                    }}
+                  >
                     {/* 左侧禁用区域 */}
                     {minTime > 0 && (
                       <Box
                         sx={{
                           position: "absolute",
-                          left: "14px",
+                          left: 0,
-                          top: "30%",
+                          width: `${disabledRangePercentages.leftWidth}%`,
-                          transform: "translateY(-50%)",
+                          height: "100%",
-                          width: `${(minTime / 1440) * 856 + 2}px`,
-                          height: "20px",
                           backgroundColor: "rgba(189, 189, 189, 0.4)",
-                          pointerEvents: "none",
                           backdropFilter: "blur(1px)",
                           borderRadius: "2.5px",
-                          rounded: "true",
                         }}
                       />
                     )}
@@ -969,19 +980,16 @@ const Timeline: React.FC<TimelineProps> = ({
                       <Box
                         sx={{
                           position: "absolute",
-                          left: `${16 + (maxTime / 1440) * 856}px`,
+                          left: `${disabledRangePercentages.rightLeft}%`,
-                          top: "30%",
+                          width: `${disabledRangePercentages.rightWidth}%`,
-                          transform: "translateY(-50%)",
+                          height: "100%",
-                          width: `${((1440 - maxTime) / 1440) * 856}px`,
-                          height: "20px",
                           backgroundColor: "rgba(189, 189, 189, 0.4)",
-                          pointerEvents: "none",
                           backdropFilter: "blur(1px)",
                           borderRadius: "2.5px",
                         }}
                       />
                     )}
-                  </>
+                  </Box>
                 )}
               </Box>
             </Box>

src/components/olmap/core/Controls/timelineTime.test.ts

@@ -1,6 +1,7 @@
 import {
   formatTimelineTime,
   getRoundedCurrentTimelineMinutes,
+  getTimelineDisabledRangePercentages,
   normalizeTimelineMinutes,
 } from "./timelineTime";
 
@@ -18,4 +19,12 @@ describe("timelineTime", () => {
   it("rounds the current time down to the timeline step", () => {
     expect(getRoundedCurrentTimelineMinutes(new Date("2026-07-16T10:29:00"))).toBe(615);
   });
+
+  it("calculates disabled range as full-day percentages", () => {
+    expect(getTimelineDisabledRangePercentages(360, 1080)).toEqual({
+      leftWidth: 25,
+      rightLeft: 75,
+      rightWidth: 25,
+    });
+  });
 });

src/components/olmap/core/Controls/timelineTime.ts

@@ -30,3 +30,18 @@ export const formatTimelineTime = (
     .toString()
     .padStart(2, "0")}`;
 };
+
+export const getTimelineDisabledRangePercentages = (
+  minTime: number,
+  maxTime: number,
+) => {
+  const rangeStart = normalizeTimelineMinutes(minTime);
+  const rangeEnd = normalizeTimelineMinutes(maxTime);
+
+  return {
+    leftWidth: (rangeStart / TIMELINE_MINUTES_PER_DAY) * 100,
+    rightLeft: (rangeEnd / TIMELINE_MINUTES_PER_DAY) * 100,
+    rightWidth:
+      ((TIMELINE_MINUTES_PER_DAY - rangeEnd) / TIMELINE_MINUTES_PER_DAY) * 100,
+  };
+};