305 lines
11 KiB
JavaScript
305 lines
11 KiB
JavaScript
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 defaultImg from '../../../images/factory/tools-default-2.png'
|
||
|
||
import ActionItem from '../components/ActionItem';
|
||
import '../../common.scss'
|
||
import { downloadFunc } from '../../../forge/Utils/utils'
|
||
import { Link } from "react-router-dom";
|
||
import InfiniteScroll from 'react-infinite-scroller';
|
||
import Nodata from '../../../forge/Nodata'
|
||
|
||
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);
|
||
|
||
const pageSize = 10
|
||
const [pageNum, setPageNum] = useState(1)
|
||
const [loading, setLoading] = useState(false)
|
||
|
||
const hasMore = useRef(true)
|
||
|
||
useEffect(() => {
|
||
getTypeList();
|
||
getNewList()
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
setPageNum(1)
|
||
hasMore.current = true
|
||
getFullList()
|
||
getHotList()
|
||
}, [selectedType])
|
||
|
||
const getFullList = (isMore = false) => {
|
||
if (!hasMore.current) return
|
||
let params = {
|
||
id: factoryZoneId,
|
||
keywords: toolId,
|
||
pageNum: isMore ? isMore : pageNum,
|
||
pageSize
|
||
}
|
||
|
||
if (selectedType) params.domainId = selectedType
|
||
setLoading(true)
|
||
getSourceList(params).then(res => {
|
||
setLoading(false)
|
||
if (res.data.rows) {
|
||
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 })
|
||
});
|
||
|
||
if (isMore) {
|
||
setPageNum(isMore)
|
||
setFullList([...fullList, ...rows])
|
||
} else if (selectedType) {
|
||
setFullList(rows);
|
||
} else {
|
||
setTopList(rows.slice(0, 3));
|
||
setFullList(rows.slice(9));
|
||
}
|
||
hasMore.current = res.data.total > (isMore ? selectedType ? 6 : 9 + fullList.length + rows.length : rows.length)
|
||
}
|
||
});
|
||
};
|
||
|
||
const getHotList = () => {
|
||
let params = {
|
||
id: factoryZoneId,
|
||
keywords: toolId,
|
||
pageNum: 1,
|
||
pageSize: 6,
|
||
orderByDownloadCount: true
|
||
}
|
||
if (selectedType) params.domainId = selectedType
|
||
|
||
getSourceList(params).then(res => {
|
||
setLoading(false)
|
||
if (res.data.rows) {
|
||
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 })
|
||
|
||
});
|
||
setContentList(rows)
|
||
}
|
||
});
|
||
}
|
||
|
||
const getTypeList = () => {
|
||
getSourceZoneList(factoryZoneId).then(response => {
|
||
if (response && response.data) {
|
||
setZoneList(response.data.rows.filter(e => e.name !== '工厂版本' && e.name !== '学习资源' && e.name !== '应用场景'));
|
||
}
|
||
}).catch(error => { })
|
||
}
|
||
|
||
const getNewList = () => {
|
||
getSourceList({ id: factoryZoneId, sort: 'createTime', keywords: toolId }).then(res => {
|
||
const rows = res.data.rows
|
||
setNewList(rows.slice(0, 2));
|
||
});
|
||
}
|
||
|
||
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={`/sf/resources/devtools/${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={() => {
|
||
if (item.fileIds) {
|
||
downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`)
|
||
}
|
||
}} disabled={!item.fileIds} className={`${!item.fileIds && 'disabled'}`} >{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={item.extendDataHeadImg || defaultImg} 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={`/sf/resources/devtools/${item.id}`}><button className="shiny-button">查看</button></Link>
|
||
<button onClick={() => {
|
||
if (item.fileIds) {
|
||
downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`)
|
||
}
|
||
}} disabled={!item.fileIds} className={`${!item.fileIds && 'disabled'}`} >{item.fileIds ? '下载' : '稍后下载'}</button>
|
||
</div>
|
||
</ActionItem>
|
||
})
|
||
}
|
||
{contentList && !contentList.length && <div className="mt100 mlauto mrauto"><Nodata _html="暂无数据"/></div>}
|
||
</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={item.extendDataHeadImg || defaultImg} alt="" className="item-img"></img>
|
||
<div className="item-info">
|
||
<Link to={`/sf/resources/devtools/${item.id}`}>
|
||
<h5 className="item-title">{item.name}</h5>
|
||
</Link>
|
||
<p className="item-desc">
|
||
{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>
|
||
</div>
|
||
</div>
|
||
{
|
||
fullList.length > 0 && <InfiniteScroll
|
||
key={selectType}
|
||
threshold={10}
|
||
initialLoad={false}
|
||
pageStart={1}
|
||
loadMore={(e) => { getFullList(e) }}
|
||
hasMore={!loading && hasMore.current}
|
||
><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={item.extendDataHeadImg || defaultImg} 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-factory icon-xiazai mr5 font-12" />{item.downloadCount}</span>
|
||
</div>
|
||
</div>
|
||
<div className="content-bottom-btn">
|
||
<div className="two-btn">
|
||
<Link to={`/sf/resources/devtools/${item.id}`}><button className="shiny-button">查看</button></Link>
|
||
<button onClick={() => {
|
||
if (item.fileIds) {
|
||
downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`)
|
||
}
|
||
}} disabled={!item.fileIds} className={`${!item.fileIds && 'disabled'}`} >{item.fileIds ? '下载' : '稍后下载'}</button>
|
||
</div>
|
||
</div>
|
||
</ActionItem>
|
||
})
|
||
}
|
||
</div>
|
||
</InfiniteScroll>
|
||
}
|
||
</div>
|
||
)
|
||
}
|
||
export default Index
|
||
|
||
|
||
|