282 lines
13 KiB
JavaScript
282 lines
13 KiB
JavaScript
import React, { createRef, Fragment, useEffect, useState } from "react";
|
||
import axios from "axios";
|
||
import { Button, Carousel, Divider, Input, Pagination, Popover, Spin, Tooltip } from "antd";
|
||
import { Link } from "react-router-dom";
|
||
import Nodata from "../../Nodata";
|
||
import { getImageUrl } from "../../../common/UrlTool";
|
||
import { TPMIndexHOC } from "../../../modules/tpm/TPMIndexHOC";
|
||
import RenderHtml from "../../../components/render-html";
|
||
import FeedBack from "../../../forge/Component/feedBack";
|
||
import './index.scss';
|
||
import ActionItem from "../../../factory/resource/components/ActionItem";
|
||
import img1 from '../image/icon15.png';
|
||
import img2 from '../image/icon9.png';
|
||
import img3 from '../image/icon10.png';
|
||
import img4 from '../image/icon11.png';
|
||
import img5 from '../image/icon12.png';
|
||
import img6 from '../image/icon13.png';
|
||
import img16 from '../image/icon16.png';
|
||
import { rollingButton } from "../../../components/button";
|
||
const { Search } = Input;
|
||
function ProjectHomePage(props) {
|
||
const carouselEL = createRef()
|
||
const [current, setCurrent] = useState(0);
|
||
const [cateList, setCateList] = useState(undefined);
|
||
const [projectsList, setProjectsList] = useState(undefined);
|
||
const [search, setSearch] = useState(undefined);
|
||
const [cateID, setCateID] = useState(undefined);
|
||
const [isSpin, setIsSpin] = useState(true);
|
||
const [bannerProjects, setBannerProjects] = useState([]);
|
||
const [total, setTotal] = useState(0);
|
||
const [page, setPage] = useState(1);
|
||
const [cateTopics, setCateTopics] = useState(undefined);
|
||
const [topicId, setTopicId] = useState(undefined);
|
||
const [topicDetail, setTopicDetail] = useState(undefined);
|
||
const [count, setCount] = useState([
|
||
{
|
||
"name": "应用软件",
|
||
"value": "405+"
|
||
},
|
||
{
|
||
"name": "三方组件",
|
||
"value": "10+"
|
||
},
|
||
{
|
||
"name": "数据集",
|
||
"value": "1000+"
|
||
},
|
||
{
|
||
"name": "智能模型",
|
||
"value": "99+"
|
||
},
|
||
{
|
||
"name": "容器镜像",
|
||
"value": "10+"
|
||
}
|
||
]);
|
||
const topicsByCateId = cateTopics && cateTopics[cateID];
|
||
const logo = [img2, img3 ,img4, img5, img6]
|
||
|
||
const topicsLength = topicsByCateId && topicsByCateId.length
|
||
const LIMIT = !topicsLength ? 30 : 25;
|
||
|
||
useEffect(() => {
|
||
getCate();
|
||
// getList();
|
||
getCateTopic();
|
||
document.title = '菌用开源软件仓库';
|
||
// 获取总数
|
||
getInitCount();
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
setIsSpin(true);
|
||
getProject();
|
||
}, [cateID, search, page, topicId])
|
||
|
||
function getInitCount() {
|
||
fetch('/statsConfig.json').then(r => r.json()).then(res => {
|
||
setCount(res)
|
||
});
|
||
}
|
||
|
||
function getCateTopic() {
|
||
fetch('/cate_topic.json').then(r => r.json()).then(res => {
|
||
setCateTopics(res);
|
||
});
|
||
}
|
||
|
||
function getCate() {
|
||
const url = `/project_categories/pinned_index.json`;
|
||
axios.get(url).then(result => {
|
||
if (result && result.data) {
|
||
const { project_categories = [] } = result.data;
|
||
setCateList(project_categories);
|
||
// project_categories[0] && setCateID(project_categories[0].id);
|
||
}
|
||
}).catch(error => { })
|
||
}
|
||
|
||
function getProject() {
|
||
const url = `/projects.json`;
|
||
let params = {
|
||
pinned: "d",
|
||
category_id: cateID,
|
||
limit: LIMIT,
|
||
search: search,
|
||
page: page,
|
||
topic_id: topicId,
|
||
sort_by: cateID ? undefined : "praises_count",
|
||
language_id: undefined
|
||
};
|
||
if (cateID === 39 && topicId) {
|
||
// 三方组件，topicId要作为language_id参数进行查询，查询maven、python、npm的语言仓库列表
|
||
params.language_id = topicId.split(",")
|
||
params.topic_id = undefined
|
||
}
|
||
|
||
axios.get(url, { params }).then(result => {
|
||
if (result && result.data) {
|
||
setTotal(result.data.total_count);
|
||
setProjectsList(result.data.projects);
|
||
setIsSpin(false);
|
||
}
|
||
}).catch(error => { })
|
||
}
|
||
|
||
function getList() {
|
||
axios.get(`/projects/banner_recommend.json`).then(result => {
|
||
if (result && result.data) {
|
||
setBannerProjects(result.data.projects);
|
||
}
|
||
}).catch(error => { })
|
||
}
|
||
|
||
return <div className="homepage-box">
|
||
{/* banner区域内容 */}
|
||
<div className="width1600 mb40">
|
||
<div className="homepage-box-title">
|
||
<span className="font-12 homepage-box-title-tag"><img src={img16} width={13} className="mr5"/>技术赋能</span>
|
||
<div className="font-40 p_h_title mt10 p_h_title_1">开源软件仓库</div>
|
||
<div className="font-40 p_h_title p_h_title_2">服务可信<span className="p_h_title_text">资源共享</span></div>
|
||
<div className="font-18 mb40 mt10 p_h_title_3">汇聚全球顶尖开源力量，构建安全、协同、创新的软件生态</div>
|
||
</div>
|
||
{/* <div className="font-60 p_h_title pt70">·<span className="p_h_title_text">护航菌事数智</span></div> */}
|
||
{/* <div className="font-18 mb40">汇聚全球顶尖开源力量，构建安全、协同、创新的软件生态，赋能菌事数字化转型与智能化升级</div> */}
|
||
<div className="df">
|
||
<div className="color-white project_count flex1 FlexAJ" style={{justifyContent: count.length > 3 ? 'space-between' : 'space-around'}}>
|
||
{count.map((item, index)=>{
|
||
const logoIndex = index%5
|
||
return <Fragment>
|
||
<div className="project_count_item">
|
||
<p><img src={logo[logoIndex]} className="mr15 mt5" width={30} />{item.value}</p>
|
||
<span className="opacity8 pl45">{item.name}</span>
|
||
</div>
|
||
{index < count.length-1 && <Divider type="vertical" />}
|
||
</Fragment>
|
||
})}
|
||
</div>
|
||
<div className="feedBackBox ml20">
|
||
<div className="font-22">反馈需求，共建优质体验</div>
|
||
<div className="font-15 opacity8 mt-5 mb10">欢迎大家提出宝贵建议或需求反馈</div>
|
||
<FeedBack {...props} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="homepage_content_v3 pt30">
|
||
<div className="width1600">
|
||
<div className="AlignCenter homepage_content_v3_1">
|
||
<div className="cate_list_box">
|
||
<span className={`font-15 font-bd`}>软件分类：</span>
|
||
<span className={`cate_item font-15 ${cateID ? '' : 'active'}`} onClick={() => {setPage(1); setCateID(undefined); setTopicId(undefined) }}>全部</span>
|
||
{cateList && !!cateList.length && cateList.map(cate => {
|
||
const isActive = cate.id === cateID;
|
||
return <span key={cate.id} className={`cate_item font-15 ${isActive ? 'active' : ''}`} onClick={() => { setPage(1); setCateID(cate.id); setTopicId(undefined) }}>{cate.name}</span>
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="df mt25 homepage_content_v3_2">
|
||
{topicsByCateId && !!topicsByCateId.length && <div className="left_cate2 mr25">
|
||
<ul className="topic_ul">
|
||
<li className={!topicId ? 'active' : ''} onClick={() => { setPage(1); setTopicId(undefined) }}>
|
||
<img src={require(`../../Main/projectHomeNew/v2/img/${!topicId ? 'icon-all-1' : 'icon-all'}.png`)} alt="" width="18px" className="mr10 mb3" />
|
||
<span>全部类别</span>
|
||
</li>
|
||
{topicsByCateId.map((item, index) => {
|
||
const uniqueKey = `${cateID}-${index}`;
|
||
const isActive = item.id === topicId;
|
||
const imageName = `${item.icon}${isActive ? '-1' : ''}.png`;
|
||
|
||
return <li key={uniqueKey} className={item.id === topicId ? 'active' : ''} onClick={() => { setPage(1); setTopicId(item.id); setTopicDetail(item) }}>
|
||
<img src={require(`../../Main/projectHomeNew/v2/img/${imageName}`)} alt="" width="18px" className="mr10 mb3" />
|
||
<span>{item.name}</span>
|
||
</li>
|
||
})}
|
||
</ul>
|
||
</div>}
|
||
<div className="flex1">
|
||
{/* 推荐仓库 */}
|
||
{bannerProjects && !!bannerProjects.length && <div className="project_recommend mb20">
|
||
<Carousel autoplay ref={carouselEL} afterChange={setCurrent}>
|
||
{bannerProjects.map(i => {
|
||
const url = i.author ? `/${i.author.login}/${i.identifier}${cateID === 39 ? "" : "/about"}` : ``
|
||
return <div>
|
||
<div className="FlexAJ">
|
||
<div className="flex1">
|
||
{i.topics && <div className='proListTopics mb10'>
|
||
{i.topics.slice(0, 2).map(item => <Tooltip title={item.name}><Link to={`/explore/topic/${item.id}/${encodeURIComponent(item.name)}`} className='proListTopic mr15 font-13 task-hide'>{item.name}</Link></Tooltip>)}
|
||
</div>}
|
||
<Link className="font-22 font-bd" to={url}><div className="task-hide mb10">{i.name}</div></Link>
|
||
{i.description && <div className="opacity8 font-15 mb20">{i.description}</div>}
|
||
{rollingButton({href: url, name: "查看详情", hoverName: "查看详情", classname: 'mt10'})}
|
||
</div>
|
||
<img src={img1} width={390} className="ml40" />
|
||
</div>
|
||
</div>
|
||
})}
|
||
</Carousel>
|
||
</div>}
|
||
<div className="mb20 tipByCate_Popover_box">
|
||
{topicId && topicDetail && topicDetail.intro && <Popover
|
||
getPopupContainer={trigger => trigger.parentNode}
|
||
content={
|
||
<div style={{ overflowY: 'auto', maxHeight: '500px' }}>
|
||
<RenderHtml value={topicDetail.intro} />
|
||
</div>
|
||
}
|
||
trigger="click"
|
||
placement="bottomLeft"
|
||
overlayClassName="tipByCate_Popover"
|
||
>
|
||
<div className="tipByCate pointer">{`设置${topicDetail.name}包管理器仓库地址，`}<a>查看更多</a></div>
|
||
</Popover>}
|
||
<Search
|
||
placeholder="输入项目名称进行搜索"
|
||
size="middle"
|
||
onSearch={(value) => { setPage(1); setSearch(value); }}
|
||
className="mlat custom-search-v3"
|
||
style={{ width: "320px", marginLeft: "auto", height: "32px", marginTop: "8px" }}
|
||
allowClear
|
||
prefix={<span className="search_icon">
|
||
<i className="iconfont icon-sousuo6 font-14"></i>
|
||
</span>}
|
||
/>
|
||
</div>
|
||
<Spin spinning={isSpin}>
|
||
<div className="home_project_list_box">
|
||
{projectsList && !!projectsList.length ? <div className={`df home_project_list ${!topicsLength ? 'sixItemBox' : ''}`}>
|
||
{projectsList.map(i => {
|
||
const url = i.author ? `/${i.author.login}/${i.identifier}${cateID === 39 ? "" : "/about"}` : ``
|
||
return <div className="home_project">
|
||
<div className="df a-i-center mb5">
|
||
{i.lesson_url && <img src={getImageUrl(`${i.lesson_url}`)} alt="" className="author_img" />}
|
||
{/* {!i.lesson_url && <img src={require("../image/icon14.png").default} alt="" className="author_img" />} */}
|
||
<div className="flex1">
|
||
<Link to={url}><div className="task-hide font-16 color-dark hover-light" style={{ marginTop: '-5px' }} title={i.name}>{i.name}</div></Link>
|
||
</div>
|
||
</div>
|
||
{/* {i.author && i.author.login !== "gh_mirrors" && <a className="download-icon mt10" href={url}><i className="iconfont icon-a-xiazai3 font-12 mr5 color-dark"></i>下载</a>} */}
|
||
{i.description && <div className="task-hide font-13 detail-desc">{i.description}</div>}
|
||
{/* 项目标签 */}
|
||
{i.topics && <div className='proListTopics mt12'>
|
||
{/* {i.author && i.author.login === "gh_mirrors" && i.topics && !i.topics.length && <span className='proListTopic mr15 font-13 task-hide'>华中科技大学</span>} */}
|
||
{i.topics.slice(0, 2).map(item => <Tooltip title={item.name}><Link to={`/explore/topic/${item.id}/${encodeURIComponent(item.name)}`} className='proListTopic mr15 font-13 task-hide'>{item.name}</Link></Tooltip>)}
|
||
</div>}
|
||
<div className="detail-but-black-box">
|
||
<Button className="detail-but-black" href={url}>查看详情</Button>
|
||
</div>
|
||
</div>
|
||
})}
|
||
</div> : <Nodata _html="暂无数据" />}
|
||
</div>
|
||
</Spin>
|
||
</div>
|
||
</div>
|
||
{cateID && <Pagination pageSize={LIMIT} total={total} hideOnSinglePage={true} current={page} onChange={(page) => { setPage(page) }} className='edu-txt-right mt30' />}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
}
|
||
|
||
export default ProjectHomePage |