持久化样式状态；分离样式设置和图例显示；完成时间轴组件代码修复建议

src/app/OlMap/Controls/Timeline.tsx

@@ -55,7 +55,6 @@ const Timeline: React.FC = () => {
   const [isPlaying, setIsPlaying] = useState<boolean>(false);
   const [playInterval, setPlayInterval] = useState<number>(5000); // 毫秒
   const [calculatedInterval, setCalculatedInterval] = useState<number>(1440); // 分钟
-  const [sliderValue, setSliderValue] = useState<number>(0);
 
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
   const timelineRef = useRef<HTMLDivElement>(null);
@@ -192,7 +191,6 @@ const Timeline: React.FC = () => {
   const handleSliderChange = useCallback(
     (event: Event, newValue: number | number[]) => {
       const value = Array.isArray(newValue) ? newValue[0] : newValue;
-      setSliderValue(value);
       // 防抖设置currentTime，避免频繁触发数据获取
       if (debounceRef.current) {
         clearTimeout(debounceRef.current);
@@ -219,7 +217,6 @@ const Timeline: React.FC = () => {
       intervalRef.current = setInterval(() => {
         setCurrentTime((prev) => {
           const next = prev >= 1440 ? 0 : prev + 15; // 到达24:00后回到00:00
-          setSliderValue(next);
           return next;
         });
       }, playInterval);
@@ -237,7 +234,6 @@ const Timeline: React.FC = () => {
   const handleStop = useCallback(() => {
     setIsPlaying(false);
     setCurrentTime(0);
-    setSliderValue(0);
     if (intervalRef.current) {
       clearInterval(intervalRef.current);
       intervalRef.current = null;
@@ -248,7 +244,6 @@ const Timeline: React.FC = () => {
   const handleStepBackward = useCallback(() => {
     setCurrentTime((prev) => {
       const next = prev <= 0 ? 1440 : prev - 15;
-      setSliderValue(next);
       return next;
     });
   }, []);
@@ -256,7 +251,6 @@ const Timeline: React.FC = () => {
   const handleStepForward = useCallback(() => {
     setCurrentTime((prev) => {
       const next = prev >= 1440 ? 0 : prev + 15;
-      setSliderValue(next);
       return next;
     });
   }, []);
@@ -280,7 +274,6 @@ const Timeline: React.FC = () => {
         intervalRef.current = setInterval(() => {
           setCurrentTime((prev) => {
             const next = prev >= 1440 ? 0 : prev + 15;
-            setSliderValue(next);
             return next;
           });
         }, newInterval);
@@ -485,7 +478,7 @@ const Timeline: React.FC = () => {
           {/* 时间轴滑块 */}
           <Box ref={timelineRef} sx={{ px: 2 }}>
             <Slider
-              value={sliderValue}
+              value={currentTime}
               min={0}
               max={1440} // 24:00 = 1440分钟
               step={15} // 每15分钟一个步进