forgeplus-react/src/factory/resource/developmentTools/index.jsx

import React, { useEffect, useState, useRef } from 'react';
import './index.scss';
import { getSourceList, getSourceZoneList, httpUrl } from '../../api'
import { factoryZoneId, lessonId , versionId, toolId } from '../../../constants/factory'
import KFIcon from '../../../components/KFIcon';
import bg1 from '../../../images/factory/resource/tools-top-1.webp';
import bg2 from '../../../images/factory/resource/tools-top-2.webp';
import bg3 from '../../../images/factory/resource/tools-top-3.webp';

import bg4 from '../../../images/factory/resource/tools-bottom-1.webp';
import bg5 from '../../../images/factory/resource/tools-bottom-2.webp';

import ActionItem from '../components/ActionItem';
import '../../common.scss'
import { downloadFunc } from '../../../forge/Utils/utils'
import { Link } from "react-router-dom";

const bgList = [bg1, bg2, bg3]

const bg2List = [bg4, bg5]

function Index(props) {

  const [topList, setTopList] = useState([]);
  const [contentList, setContentList] = useState([]);
  const [fullList, setFullList] = useState([]);
  const [zoneList, setZoneList] = useState([]);
  const [newList, setNewList] = useState([]);
  const [selectedType, setSelectedType] = useState(null);

  useEffect(() => {
    getFullList();
    getTypeList();
  }, []);

  useEffect(() => {
    if (selectedType) {
      getTypeSourceList()
    } else {
      getFullList()
    }
  }, [selectedType])

  const getFullList = () => {

    getSourceList({ id: factoryZoneId, keywords: toolId }).then(res => {
      if (res.data.rows) {
        const rows = res.data.rows
        setTopList(rows.slice(0, 3));
        setNewList(rows.slice(0, 2));
        setContentList(rows.slice(3, 9));
        setFullList(rows.slice(9));
      }
    });
  };

  const getTypeSourceList = () => {
    getSourceList({ id: factoryZoneId, domainId: selectedType }).then(res => {
      setContentList(res.data.rows.slice(0, 6));
      setFullList(res.data.rows.slice(6));
    });
  }

  const getTypeList = () => {
    getSourceZoneList(factoryZoneId).then(response => {
      if (response && response.data) {
        setZoneList(response.data.rows.filter(e => e.name !== '工厂版本' && e.name !== '学习资源'));
      }
    }).catch(error => { })
  }

  const getBackgroundImage = (index) => {
    const row = Math.floor(index / 4);  // 行号
    const col = index % 4;               // 列号（行内位置）

    return row % 2 === 0
      ? bg2List[col % 2]      // 偶数行：0,1,0,1
      : bg2List[(col + 1) % 2]; // 奇数行：1,0,1,0
  };

  const selectType = (type) => {
    if (type !== selectedType) {
      setSelectedType(type)
    } else {
      setSelectedType(null)
    }
  }

  return (
    <div className="tools">
      <div className="tools-top">
        {
          topList.map((item, index) => {
            return (
              <div className="tools-top-item" key={index}>
                <img src={bgList[index]} alt="" className="item-bg" />
                <div className="item-info">
                  <Link to={`/softwareFactory/resource/developmentTools/${item.id}`}>
                    <h5 className="item-title">
                      {item.name}
                    </h5>
                  </Link>
                  <span className="item-tag">{item.domainName}</span>
                  <p className="item-desc">{item.summary}</p>
                </div>
                <button onClick={() => {downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`)}}>立即下载</button>
              </div>
            )
          })
        }
      </div>

      <div className="tools-types">
        <div>工具分类</div>
        {
          zoneList.map((item, index) => {
            return (
              <span className={`type-item ${selectedType === item.id ? 'active' : ''}`} key={index} onClick={() => selectType(item.id)}>{item.name}</span>
            )
          })
        }
      </div>



      <div className="tools-content">
        <div className="tools-content-hot">
          <div className="tools-content-hot-title">
            <h5>热门工具</h5>
            <span data-text="更强工具、更易落地、更高效率">更强工具、更易落地、更高效率</span>
          </div>
          <div className="tools-content-hot-list">
            {
              contentList.map((item, index) => {
                const createUser = item.createUser
                return <ActionItem className="hot-item-wrapper" key={index} padding="1px" borderRadius="16px">
                  <div className="hot-item">
                    <img src={createUser.avatar} alt="" className="item-img"></img>
                    <div className="item-info">
                      <h5 className="item-title">{item.name}</h5>
                      <p className="item-desc">
                        {item.summary}
                      </p>
                    </div>

                  </div>
                  <div className="two-btn">
                    <Link to={`/softwareFactory/resource/developmentTools/${item.id}`}><button className="shiny-button">查看</button></Link>
                    <button onClick={() => {downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`)}}>下载</button>
                  </div>
                </ActionItem>
              })
            }
          </div>
        </div>
        <div className="tools-content-new">
          <div className="tools-content-new-title">
            <h5>最新工具</h5>
            <span data-text="更强工具、更易落地、更高效率">更强工具、更易落地、更高效率</span>
          </div>
          <div className="tools-content-new-list">
            {
              newList.map((item, index) => {
                const createUser = item.createUser
                return <div className="new-item">
                  <img src={createUser.avatar} alt="" className="item-img"></img>
                  <div className="item-info">
                    <Link to={`/softwareFactory/resource/developmentTools/${item.id}`}>
                      <h5 className="item-title">{item.name}</h5>
                    </Link>
                    <p className="item-desc">
                      {item.summary}
                    </p>
                    <button onClick={() => {downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`)}}>下载</button>
                  </div>
                </div>
              })
            }
          </div>
        </div>
      </div>

      <div className="tools-bottom">
        {
          fullList.map((item, index) => {
            const createUser = item.createUser
            return <ActionItem className="content-bottom-wrapper" key={index} backgroundColor="rgba(241, 247, 255, 0.48)" padding="1px" borderRadius="16px">
              <div className="content-bottom-item">

                <img src={getBackgroundImage(index)} alt="" className="item-bg" />
                <div className="item-top">
                  <img src={createUser.avatar} alt="" className="item-img"></img>
                  <h5 className="item-title">{item.name}</h5>
                </div>
                <div className="item-desc">
                  {item.summary}
                </div>
                <div className="item-data">
                  <span><i className="iconfont icon-xiazai mr5 font-12" />{item.downloadCount}</span>
                </div>
              </div>
              <div className="content-bottom-btn">
                <div className="two-btn">
                  <Link to={`/softwareFactory/resource/developmentTools/${item.id}`}><button className="shiny-button">查看</button></Link>
                  <button onClick={() => {downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`)}}>下载</button>
                </div>
              </div>
            </ActionItem>
          })
        }
      </div>
    </div>
  )
}
export default Index