增加鼠标切换显示交互

src/forge/Main/projecthome/v2/components/softwareFactory.jsx

@@ -1,39 +1,72 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import img11 from '../image/img11.png';
 import img12 from '../image/img12.png';
-import { Button } from 'antd';
 import { rollingButton } from '../../../../../components/button';
 
 function SoftwareFactory() {
   const [active, setActive] = useState(1);
+  const [isTimerRunning, setIsTimerRunning] = useState(true);
+  const timerRef = useRef(null);
 
   useEffect(() => {
-    const interval = setInterval(() => {
-      setActive(prevActive => {
-        return prevActive === 1 ? 2 : 1;
-      });
+    // 初始启动定时器
+    timerRef.current = setInterval(() => {
+      setActive(prevActive => prevActive === 1 ? 2 : 1);
     }, 6000);
 
-    // 清理定时器
+    // 组件卸载时清理
     return () => {
-      clearInterval(interval);
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
     };
   }, []);
 
+  // 点击切换
+  const handleToggle = (mode) => {
+    setActive(mode);
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    setIsTimerRunning(false);
+  };
+
+  // 鼠标移出恢复轮播
+  const handleMouseLeave = () => {
+    if (!timerRef.current) {
+      timerRef.current = setInterval(() => {
+        setActive(prevActive => prevActive === 1 ? 2 : 1);
+      }, 6000);
+      setIsTimerRunning(true);
+    }
+  };
+
   return (
     <div className="software-factory home_v2_child" id="home_v2_child4">
       <div className="title_v2 mb30">软件工厂</div>
-      <div className={`width1600 df software-factory-content software-factory-${active}`}>
+      <div 
+        className={`width1600 df software-factory-content software-factory-${active}`}
+        onMouseLeave={handleMouseLeave}
+      >
         <div className='software-left'>
           <div className='software-left-border'>
-            <div className={`mb60 software-left-item ${active === 1 ? 'active' : ''}`}>
+            <div 
+              className={`mb60 software-left-item ${active === 1 ? !isTimerRunning ? 'isTimerRunning' : 'active' : ''}`}
+              onClick={() => handleToggle(1)}
+              style={{ cursor: 'pointer' }}
+            >
               <div className='font-26 font-bd'>
                 敏捷模式
                 <span className='ml12'>全流程迭代演化<i className='iconfont icon-a-zu15512 font-14'></i></span>
               </div>
               <div className='font-16'>敏捷模式聚焦需求 - 任务 - 代码 - 迭代 - 测试 - 制品的全流程<br />数字化升级和在线化组织</div>
             </div>
-            <div className={`software-left-item ${active === 2 ? 'active' : ''}`}>
+            <div 
+              className={`software-left-item ${active === 2 ? !isTimerRunning ? 'isTimerRunning' : 'active' : ''}`}
+              onClick={() => handleToggle(2)}
+              style={{ cursor: 'pointer' }}
+            >
               <div className='font-26 font-bd'>
                 极速模式
                 <span className='ml12'>高效率快速响应<i className='iconfont icon-a-zu15512 font-14'></i></span>
@@ -46,7 +79,6 @@ function SoftwareFactory() {
         <div className='flex1'>
           <img src={active === 1 ? img11 : img12} alt='' />
         </div>
-        {/* 角标 */}
         <div className='mode-tag font-16 font-bd color-white'>{active === 1 ? "敏捷模式" : "极速模式"}</div>
       </div>
     </div>

src/forge/Main/projecthome/v2/index.scss

@@ -829,6 +829,20 @@
         animation: height0-83 5.9s linear 0s infinite;
       }
     }
+    &.isTimerRunning{
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 12px;
+        left: -12px;
+        width: 1.5px;
+        height: 83%;
+        background-color: rgba(9, 18, 33, 1);
+      }
+
+    }
 
     .icon-a-zu15512 {
       position: relative;