优化规则切换逻辑

src/pages/2026/schedule/index.jsx

@@ -19,11 +19,14 @@ function Schedule(props) {
 
   const [selectedPeriod, setSelectedPeriod] = useState(1)
   const [progress, setProgress] = useState(0)
+  const [isHovered, setIsHovered] = useState(false)
   const scheduleRefs = useRef({})
   const periodRefs = useRef({})
   const periodListRef = useRef(null)
   const autoPlayTimerRef = useRef(null)
   const progressTimerRef = useRef(null)
+  const startTimeRef = useRef(null)
+  const elapsedTimeRef = useRef(0)
 
   useEffect(() => {
     const ruleInfo = {}
@@ -116,42 +119,59 @@ function Schedule(props) {
   useEffect(() => {
     if (ruleList.length === 0) return;
     
+    const totalDuration = 10000;
+    const progressInterval = 50;
+    
     const startAutoPlay = () => {
-      let currentProgress = 0;
-      const progressInterval = 50;
-      const totalDuration = 10000;
-      const increment = (progressInterval / totalDuration) * 100;
+      startTimeRef.current = Date.now() - elapsedTimeRef.current;
       
       progressTimerRef.current = setInterval(() => {
-        currentProgress += increment;
-        setProgress(currentProgress);
-      }, progressInterval);
-      
-      autoPlayTimerRef.current = setInterval(() => {
-        setProgress(0);
-        currentProgress = 0;
+        const elapsed = Date.now() - startTimeRef.current;
+        elapsedTimeRef.current = elapsed;
+        const progressPercent = (elapsed / totalDuration) * 100;
         
-        setSelectedRule(prevRule => {
-          const currentIndex = ruleList.findIndex(r => r.id === prevRule);
-          const nextIndex = (currentIndex + 1) % ruleList.length;
-          const nextRule = ruleList[nextIndex];
+        if (progressPercent >= 100) {
+          setProgress(0);
+          elapsedTimeRef.current = 0;
+          startTimeRef.current = Date.now();
           
-          return nextRule ? nextRule.id : prevRule;
-        });
-      }, totalDuration);
+          setSelectedRule(prevRule => {
+            const currentIndex = ruleList.findIndex(r => r.id === prevRule);
+            const nextIndex = (currentIndex + 1) % ruleList.length;
+            const nextRule = ruleList[nextIndex];
+            return nextRule ? nextRule.id : prevRule;
+          });
+        } else {
+          setProgress(progressPercent);
+        }
+      }, progressInterval);
     };
     
-    startAutoPlay();
-    
-    return () => {
-      if (autoPlayTimerRef.current) {
-        clearInterval(autoPlayTimerRef.current);
-      }
+    const pauseAutoPlay = () => {
       if (progressTimerRef.current) {
         clearInterval(progressTimerRef.current);
+        progressTimerRef.current = null;
       }
     };
-  }, [ruleList]);
+    
+    if (!isHovered) {
+      startAutoPlay();
+    } else {
+      pauseAutoPlay();
+    }
+    
+    return () => {
+      pauseAutoPlay();
+    };
+  }, [ruleList, isHovered]);
+
+
+  const handleRuleChange = (ruleId) => {
+    elapsedTimeRef.current = 0;
+    startTimeRef.current = Date.now();
+    setProgress(0);
+    setSelectedRule(ruleId);
+  }
 
 
   const handlePeriodClick = (periodId) => {
@@ -192,7 +212,7 @@ function Schedule(props) {
       <div className={styles.rules_tab}>
         {
           ruleList.map(e => {
-            return <div className={`${ styles.rules_tab_item } ${ e.id === selectedRule ? styles.rules_tab_selected : '' }`} onClick={() => { setSelectedRule(e.id) }}>
+            return <div className={`${ styles.rules_tab_item } ${ e.id === selectedRule ? styles.rules_tab_selected : '' }`} onClick={() => { handleRuleChange(e.id) }}>
               <span>{ e.name }</span>
               <span>2026第八届开源创新大赛</span>
               <span>Competition Rules</span>
@@ -201,7 +221,11 @@ function Schedule(props) {
         }
       </div>
 
-      <div className={ styles.rule_detail }>
+      <div 
+        className={ styles.rule_detail }
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
         <div className={ styles.progress } style={{ width: `${progress}%` }}></div>
         <div className={ styles.detail_left }>
           <img src={ icon } alt="" />