285 lines
13 KiB
JavaScript
285 lines
13 KiB
JavaScript
import React, { createRef, 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'
|
||
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({});
|
||
const { countByGHM, countByOther, countByGHMType, countByMX, countByRQ } = count;
|
||
const topicsByCateId = cateTopics && cateTopics[cateID];
|
||
|
||
const topicsLength = topicsByCateId && topicsByCateId.length
|
||
const LIMIT = !topicsLength ? 30 : 25;
|
||
|
||
useEffect(() => {
|
||
getCate();
|
||
getList();
|
||
getCateTopic();
|
||
document.title = 'JY开源软件仓库';
|
||
// 获取总数
|
||
getInitCount();
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
setIsSpin(true);
|
||
getProject();
|
||
}, [cateID, search, page, topicId])
|
||
|
||
function getInitCount() {
|
||
const obj = {
|
||
countByGHM: 20000,
|
||
countByOther: 0,
|
||
countByGHMType: 10
|
||
}
|
||
axios.get(`/organizations/gh_mirrors/projects.json?page=1&limit=15&sort_by=updated_on&sort_direction=desc`).then(result => {
|
||
if (result && result.data) {
|
||
obj.countByGHM = result.data.total_count || 0
|
||
}
|
||
return axios.get(`/projects.json?pinned=d&limit=1`)
|
||
}).then(result => {
|
||
if (result && result.data) {
|
||
obj.countByOther = result.data.total_count - obj.countByGHM
|
||
}
|
||
}).finally(() => {
|
||
// cateTopics && cateTopics[39] && (obj.countByGHMType = cateTopics[39].length)
|
||
setCount({
|
||
countByGHM: 20000,
|
||
countByOther: obj.countByOther,
|
||
countByGHMType: 10,
|
||
countByMX: 99,
|
||
countByRQ: 10
|
||
});
|
||
})
|
||
}
|
||
|
||
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
|
||
}
|
||
|
||
cateID && 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="font-60 p_h_title center pt70">开源软件仓库·<span className="p_h_title_text">护航J事数智</span></div>
|
||
<div className="font-18 center mb40">汇聚全球顶尖开源力量，构建安全、协同、创新的软件生态，赋能J事数字化转型与智能化升级</div>
|
||
<div className="df">
|
||
<div className="df color-white project_count flex1 FlexAJ">
|
||
<div className="project_count_item">
|
||
<p><img src={require('../image/icon9.png')} className="mr15 mt5" width={30} />{countByOther}<span className="font-24">+</span></p>
|
||
<span className="opacity8 pl45">应用软件</span>
|
||
</div>
|
||
<Divider type="vertical" />
|
||
<div className="project_count_item">
|
||
<p><img src={require('../image/icon10.png')} className="mr15 mt5" width={30} />{countByGHMType}<span className="font-24">+</span></p>
|
||
<span className="opacity8 pl45">三方组件</span>
|
||
</div>
|
||
<Divider type="vertical" />
|
||
<div className="project_count_item">
|
||
<p><img src={require('../image/icon11.png')} className="mr15 mt5" width={30} />{countByGHM}<span className="font-24">+</span></p>
|
||
<span className="opacity8 pl45">数据集</span>
|
||
</div>
|
||
<Divider type="vertical" />
|
||
<div className="project_count_item">
|
||
<p><img src={require('../image/icon12.png')} className="mr15 mt5" width={30} />{countByMX}<span className="font-24">+</span></p>
|
||
<span className="opacity8 pl45">智能模型</span>
|
||
</div>
|
||
<Divider type="vertical" />
|
||
<div className="project_count_item">
|
||
<p><img src={require('../image/icon13.png')} className="mr15 mt5" width={30} />{countByRQ}<span className="font-24">+</span></p>
|
||
<span className="opacity8 pl45">容器镜像</span>
|
||
</div>
|
||
</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 pt40">
|
||
<div className="width1600">
|
||
<div className="AlignCenter">
|
||
<div className="cate_list_box">
|
||
<span className={`font-15 font-bd`}>软件分类：</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">
|
||
{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">
|
||
{/* 推荐仓库 */}
|
||
<div className="project_recommend">
|
||
<Carousel autoplay ref={carouselEL} afterChange={setCurrent}>
|
||
{bannerProjects.map(i => {
|
||
const url = i.author ? `/${i.author.login}/${i.identifier}${i.author.login === "gh_mirrors" ? "/about" : "/about"}` : ``
|
||
return <div>
|
||
<div className="FlexAJ">
|
||
<div className="">
|
||
{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>}
|
||
<div className="mb10"><Link className="font-22 font-bd task-hide" to={url}>{i.name}</Link></div>
|
||
{i.description && <div className="opacity8 font-15 mb20">{i.description}</div>}
|
||
<Button className="blackBut mt10">
|
||
<span>查看详情</span>
|
||
<span>查看详情</span>
|
||
</Button>
|
||
</div>
|
||
<img src={img1} width={390} className="ml40" />
|
||
</div>
|
||
</div>
|
||
})}
|
||
</Carousel>
|
||
</div>
|
||
<div className="mb20 mt20 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-sousuo5 font-14"></i>
|
||
</span>}
|
||
/>
|
||
</div>
|
||
<Spin spinning={isSpin}>
|
||
{projectsList && !!projectsList.length ? <div className={`df home_project_list ${!topicsLength ? 'sixItemBox' : ''}`}>
|
||
{projectsList.map(i => {
|
||
const url = i.author ? `/${i.author.login}/${i.identifier}${i.author.login === "gh_mirrors" ? "/about" : "/about"}` : ``
|
||
return <div className="home_project">
|
||
<div className="df a-i-center" style={{ flex: 1 }}>
|
||
{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>
|
||
{/* 项目标签 */}
|
||
{i.topics && <div className='proListTopics mt3'>
|
||
{/* {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>
|
||
</div>
|
||
{/* {i.description && <Tooltip title={i.description}>
|
||
<div className="task-hide color-424 mt10">
|
||
{i.description}
|
||
</div>
|
||
</Tooltip>} */}
|
||
{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>}
|
||
<Button className="detail-but-black">查看详情</Button>
|
||
</div>
|
||
})}
|
||
</div> : <Nodata _html="暂无数据" />}
|
||
</Spin>
|
||
{cateID && <Pagination pageSize={LIMIT} total={total} hideOnSinglePage={true} current={page} onChange={(page) => { setPage(page) }} className='center mt30' />}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
}
|
||
|
||
export default ProjectHomePage |