forgeplus-react/src/factory/components/Feature/index.jsx

import React, { useEffect, useState, useRef } from 'react';
import './index.scss';
import featureLeft1 from '../../../images/factory/feature-left-1.webp';
import featureLeft2 from '../../../images/factory/feature-left-2.jpg';
import featureright1 from '../../../images/factory/feature-right-1.webp';
import featureright2 from '../../../images/factory/feature-right-2.jpg';
import featureBottom1 from '../../../images/factory/feature-bottom-1.webp';
import gif1 from '../../../images/factory/feature-gif-1.webp'
import gif2 from '../../../images/factory/feature-gif-2.gif'
import gif3 from '../../../images/factory/feature-gif-3.webp'
import { factoryZoneId, standardId} from '../../../constants/factory'
import { getSourceList, httpUrl } from '../../api';
import { downloadFunc } from '../../../forge/Utils/utils'

import logo1 from '../../../images/factory/standard-logo-1.webp'
import logo2 from '../../../images/factory/standard-logo-2.webp'
import logo3 from '../../../images/factory/standard-logo-3.webp'


import { Link } from 'react-router-dom';

const logolist = [logo1, logo2, logo3]


function Feature(props) {

  const contentRef = useRef(null);
  const [isVisible, setIsVisible] = useState(false);
  const [standardList, setStandardList] = useState([]);

  useEffect(() => {
    getStandard()
    const observer = new IntersectionObserver((entries) => {
      const entry = entries[0];
      // 如果元素进入视口
      if (entry.isIntersecting) {
        setIsVisible(true);
        // 只触发一次动画
        observer.disconnect();
      }
    }, {
      threshold: 0.3 //露出 30% 时触发
    });

    if (contentRef.current) {
      observer.observe(contentRef.current);
    }
    return () => {
      if (contentRef.current) observer.disconnect();
    };
  }, []);

    const getStandard = () => {
      getSourceList({ id: factoryZoneId, keywords: standardId }).then(res => {
        const rows = []
        res.data.rows.forEach(e => {
          let extendData = {}
          if (e.extendData) {
            extendData = JSON.parse(e.extendData)
          }
          rows.push({ ...e, extendDataUrl: extendData.url, extendDataHeadImg: extendData.headImg })
        });
        setStandardList(rows.slice(0, 3));
      });
    }


  return (
    <div className={`factory-feature factory-module ${isVisible ? 'animate-active' : ''}`} ref={contentRef}>
      <div className="feature-container">
        <h1 className="module-title">标准化生产线，为菌用软件工厂奠定基石</h1>
        <div className="feature-content">
          <div className="content-top">
            <div className="content-top-left left-1">
              <h3>动态开放架构，让“<span className="headerBlue">奠基</span>”就在高原</h3>
              <p>“强规制底座+热插拔工具”架构，内生联合、众创众筹、生态协同。</p>
              {/* <img className="content-top-left-gif" src={gif1} alt="" /> */}
              <img src={featureLeft1} alt="" />
            </div>
            <div className="content-top-right right-1">
              <h3>全程数字纳管，让“<span className="headerBlue">信息</span>”顺畅流转</h3>
              <p>群智众创与受控交付有机结合，从数字化向信息化、智能化飞跃。</p>
              <img src={featureright1} alt="" />
            </div>
          </div>
          <div className="content-top">
            <div className="content-top-left left-2">
              <h3>灵活定制编排，让“<span className="headerBlue">适应</span>”不再困难</h3>
              <p>支持流水线定制编排、研发工具扩展等多种集成扩展，适应不同需求。</p>
              <img src={featureLeft2} alt="" />
            </div>
            <div className="content-top-right right-2">
              <h3>开发运维一体，让“<span className="headerBlue">交付</span>”更加便捷</h3>
              <p>支持多种应用快速部署方式，实现从开发到运维全环节的能力覆盖。</p>
              <img src={featureright2} alt="" />
            </div>
          </div>
          <div className="content-bottom">
            <div className='center'>
              <h3>软件工厂标准（众创版本）</h3>
            </div>
            <div className='df'>
              {
                standardList.map((item,index) => {
                  return (
                    <div className='df-item' key={index}>
                      <img src={logolist[index]} alt={item.title} />
                      <div>
                        <h4>{item.name}</h4>
                        <p>{item.summary}</p>
                        <button onClick={() => {
                          if (item.fileIds) {
                            downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`) 
                          }
                        }} disabled={!item.fileIds} className={ !item.fileIds && 'disabled' } >{item.fileIds ? '下载' : '稍后下载'}</button>
                      </div>
                    </div>
                  )
                })
              }
            </div>
            {/* <img className="content-bottom-gif" src={gif3} alt="" />
            <img src={featureBottom1} alt="" /> */}
          </div>
        </div>
      </div>
    </div>
  );
}

export default Feature;