gitlink首页-数据绑定

src/forge/Main/projecthome/SubBanner.jsx

@@ -5,7 +5,6 @@ import { getImageUrl } from 'educoder';
 import Eye from '../img/index/eye.png';
 import Data from '../img/index/data.png';
 import Earth from '../img/index/earth.png';
-import Imgs from '../img/tree.png';
 import axios from 'axios';
 
 // const list =[
@@ -51,8 +50,8 @@ function SubBanner() {
   return(
     <div className="banners">
       <div className="bannersCenter">
-        <p className="bTitle"><span>新一代开源创新服务平台</span></p>
-        <p className="bSubTitle">GitLink（确实开源）-CCF官网指定的产学研融合面向软件开源创新的开源社区</p>
+        <p className="bTitle"><span>GitLink 确实开源</span></p>
+        <p className="bSubTitle">新一代开发创新服务平台  让你的创意在这里释放</p>
         <div className="bannerBox">
           {
             list && list.length > 0 ?

src/home/FifthEdition.jsx

@@ -1,4 +1,5 @@
 import React , { useEffect } from 'react';
+import Slider from 'react-slick';
 import Beijing from './Img/unit/beijing.png';
 import SHJT from './Img/unit/SHJT.png';
 import DD from './Img/unit/DD.png';
@@ -22,6 +23,9 @@ import LSLM from './Img/unit/LSLM.png';
 import TG from './Img/unit/TG.png';
 import LC from './Img/unit/LC.png';
 import YKD from './Img/unit/YKD.png';
+import Axios from 'axios';
+import { useState } from 'react';
+import { getImageUrl } from 'educoder';
 
 const list = [
   {image_url:GFKJ, name:"国防科技大学",src:"https://www.nudt.edu.cn/"},
@@ -45,26 +49,40 @@ const list = [
   {image_url:LC, name:"浪潮",src:"https://cloud.inspur.com/"},
   {image_url:YKD, name:"ucloud",src:"https://www.ucloud.cn/"}
 ]
-// const settings = {
-//   dots: false,
-//   infinite: true,
-//   slidesToShow: 6,
-//   slidesToScroll: 1,
-//   autoplay: true,
-//   speed: 2000,
-//   autoplaySpeed: 2000,
-//   cssEase: "linear",
-//   rows:2,
-//   arrows:false
-// };
+
+const settings = {
+  dots: false,
+  infinite: true,
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  vertical: true,
+  verticalSwiping: true,
+  autoplay:true,
+  arrows:false
+};
 function FifthEdition() {
+  const [ topics ,setTopics ] = useState(undefined);
 
   useEffect(()=>{
-    if(list.length>10){
-      Init();
-    }
+    // if(list.length>10){
+    //   Init();
+    // }
+    getUnit();
   },[])
 
+  function getUnit(){
+    const url =`/topics.json`;
+    Axios.get(url,{params:{
+      topic_type:"cooperator",
+      limit:20,
+      group_size:5
+    }}).then(result=>{
+      if(result){
+        setTopics(result.data.topics);
+      }
+    }).catch(error=>{})
+  }
+
   function Init() {
     let box = document.getElementById('scrollBox1');
     scrollUp();
@@ -94,7 +112,7 @@ function FifthEdition() {
 
   return(
     <div id={"scrollBox1"}>
-      <div style={{width:370*list.length+"px"}}>
+      {/* <div style={{width:370*list.length+"px"}}>
         <ul className="fifthList" id="box1" style={{width:(370*list.length)/2+"px"}}>
           {
             list && list.map((i,k)=>{
@@ -115,22 +133,28 @@ function FifthEdition() {
           }
           </ul>
         }
-      </div>
-      {/* <Slider {...settings} className="footSlider">
-        {
-          list && list.map((i,k)=>{
-            return(
-              <li><Link to={i.src}><img src={i.image_url} alt={i.name}/></Link></li>
-            )
-          })
-        }
-        {list.length > 10 && list && list.map((i,k)=>{
-            return(
-              <li><Link to={i.src}><img src={i.image_url} alt={i.name}/></Link></li>
-            )
-          })
-        }
-      </Slider> */}
+      </div> */}
+      {
+        topics && topics.length>0 ?
+        <Slider {...settings} className="unitMainSlider">
+          {
+            topics.map((i,k)=>{
+              return(
+                <div className="slickMainline">
+                {
+                  i.map((j,k1)=>{
+                    return(
+                      <a href={j.url} target="_blank"><img src={getImageUrl(j.image)} alt=""/></a>
+                    )
+                  })
+                }
+                </div>
+              )
+            })
+          }
+        </Slider>
+        :""
+      }
     </div>
   )
 }

src/home/Index.jsx

@@ -10,20 +10,36 @@ import F44 from './Img/4-4.png';
 import SecondEdition from './SecondEdition';
 import FifthEdition from './FifthEdition';
 import { TPMIndexHOC } from '../modules/tpm/TPMIndexHOC';
+import Axios from 'axios';
 
 function Index(props) {
   const [ value , setValue ] = useState("");
   const [ flag , setFlag ] = useState(true);
-  const [ isRender , setIsRender ] = useState(false);
-  const [ isloginCancel , setIsloginCancel ] = useState(false);  
+
+  const [ bannerTab , setBannerTab ] = useState(undefined);
   const register = props && props.mygetHelmetapi && props.mygetHelmetapi.common && props.mygetHelmetapi.common.register;
 
   const { current_user } = props;
   useEffect(()=>{
     window.addEventListener("scroll",scrollListener);
+    getTab();
   },[])
 
+  function getTab() {
+    const url = `/topics.json?topic_type=card`;
+    Axios.get(url,{
+      params:{
+        limit:3
+      }
+    }).then(result=>{
+      if(result){
+        setBannerTab(result.data.topics);
+      }
+    }).catch(error=>{})
+  }
+
   function scrollListener(event) {
+    
     let third = document.getElementById("thirdContent").offsetTop;
     let top = document.documentElement.scrollTop + 60;
     if(top>= third)
@@ -51,23 +67,41 @@ function Index(props) {
       <div className="topEdition">
         {/* <HeadNav {...props}/> */}
         <TopEdition register={register} current_user={current_user}/>
-        <ul className="topEditionUl">
-          <a href="https://forum.trustie.net/forums/4666/detail" target="_blank" className="font-18">
-            <li>
-              CCF开源发展委员会首批执行委员名单发布
-            </li>
-          </a>
-          <a href="https://forgeplus.trustie.net/Gitlink/forgeplus" target="_blank" className="font-18">
-            <li>
-              平台精选仓库：Gitlink/Gitlink
-            </li>
-          </a>
-          <a href="https://forum.trustie.net/forums/4663/detail" target="_blank" className="font-18">
-            <li>
-              OpenHarmony系统介绍及赛题说明
-            </li>
-          </a>
-        </ul>
+        {
+          bannerTab && bannerTab.lenth > 0 ?
+          <ul className="topEditionUl">
+            {
+              bannerTab.map((i,k)=>{
+                return(
+                  <a href={i.url} target="_blank" className="font-18">
+                    <li>
+                      {i.title}
+                    </li>
+                  </a>
+                )
+              })
+            }
+          </ul>
+          :
+          <ul className="topEditionUl">
+            <a href="https://forum.trustie.net/forums/4666/detail" target="_blank" className="font-18">
+              <li>
+                CCF开源发展委员会首批执行委员名单发布
+              </li>
+            </a>
+            <a href="https://forgeplus.trustie.net/Gitlink/forgeplus" target="_blank" className="font-18">
+              <li>
+                平台精选仓库：Gitlink/Gitlink
+              </li>
+            </a>
+            <a href="https://forum.trustie.net/forums/4663/detail" target="_blank" className="font-18">
+              <li>
+                OpenHarmony系统介绍及赛题说明
+              </li>
+            </a>
+          </ul>
+        }
+        
       </div>
 
       <div className="secondEdition">

src/home/Index.scss

@@ -61,21 +61,12 @@ body{
       height:100%;
       div{
         height: 100%;
-        .regform1{
-          background:url('./Img/banner1.png') no-repeat center center;
-          background-size:cover;
-        }
-        .regform2{
-          background:url('./Img/banner2.png') no-repeat center center;
-          background-size:cover;
-        }
-        .regform3{
-          background:url('./Img/banner3.png') no-repeat center center;
-          background-size:cover;
-        }
-        .regform4{
-          background:url('./Img/banner4.png') no-repeat center center;
-          background-size:cover;
+        .regform{
+          &>div{
+            background-size:cover;
+            background-position: center;
+            background-repeat: no-repeat;
+          }
         }
         .regPrg{
           position: absolute;
@@ -758,6 +749,7 @@ body{
     display: flex;
     align-items: center;
     margin-top: 48px;
+    min-height: 365px;
     .listbox{
       margin-left: 54px;
       flex: 1;
@@ -779,6 +771,9 @@ body{
           background-color: #466AFF;
         }
       }
+      .ant-skeleton-title,.ant-skeleton-paragraph > li{
+        background-color: rgba(242,242,242 ,0.2);
+      }
     }
     li{
       display: flex;
@@ -924,6 +919,41 @@ body{
     overflow: hidden;
     margin: 35px 0px 0px;
     width: 100%;
+    .unitMainSlider{
+      width: 1200px;
+      margin:0px auto;
+      .slick-list{
+        height: 140px;
+        width: 100%;
+        overflow: hidden;
+        .slickMainline{
+          display: flex!important;
+          padding:10px 2px;
+          align-items: center;
+          justify-content: space-between;
+          a{
+            background: #FFFFFF;
+            box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.06);
+            border-radius: 4px;
+            border: 2px solid #FFFFFF;
+            margin-right: 20px;
+            padding:20px;
+            height: 120px;
+            width: 220px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            img{
+              max-width: 100%;
+              max-height: 100%;
+            }
+            &:last-child{
+              margin-right: 0px;
+            }
+          }
+        }
+      }
+    }
   }
   ul.fifthList{
     display: flex;

src/home/SecondEdition.jsx

@@ -99,12 +99,14 @@ function SecondEdition({setValue}) {
   }
 
   function checkPosi(ele,clientHeight,scrollTop) {
-    var a = document.getElementById(ele).offsetTop - scrollTop -(clientHeight/3);
-    var b = document.getElementById(ele).clientHeight + (clientHeight/4);
-    if(a>0 || a<-b){
-      return false;
-    }else{
-      return true;
+    if(document.getElementById(ele)){
+      var a = document.getElementById(ele).offsetTop - scrollTop -(clientHeight/3);
+      var b = document.getElementById(ele).clientHeight + (clientHeight/4);
+      if(a>0 || a<-b){
+        return false;
+      }else{
+        return true;
+      }
     }
   }
   return(
@@ -187,7 +189,7 @@ function SecondEdition({setValue}) {
           <div className={"multidimensinalhalf"}>
             <div>
               <p className="halfTitle">多维度用户画像</p>
-              <p className="halfsubTitle"><span>实时采集和分析平台中的各类开源资源数据，<br/></span>搭建多维度用户画像评估系统；</p>
+              <p className="halfsubTitle"><span>实时采集和分析平台中的各类开源资源数据，</span>搭建多维度用户画像评估系统；</p>
             </div>
             <div style={{width:"820px",marginLeft:"34px"}}>
               <img src={ImgM4} alt="" width="820px" />

src/home/ThirdEdition.jsx

@@ -1,4 +1,5 @@
 import React,{ useState , useEffect , useMemo } from 'react';
+import { Spin , Skeleton } from 'antd';
 import T311 from './Img/3-1-1.png';
 import T312 from './Img/3-1-2.png';
 import T321 from './Img/3-2-1.png';
@@ -13,55 +14,32 @@ import bg33 from './Img/3-3.png';
 import bg34 from './Img/3-4.png';
 
 import './Index.scss';
-
-const list1 = [
-  {name:"CCF开源发展委员会首批执行委员名单发布",src:"https://forum.trustie.net/forums/4666/detail",count:32,time:"2021-09-22"},
-  {name:"GitLink项目协同开发模块使用说明及问题反馈",src:"https://forum.trustie.net/forums/4665/detail",count:4,time:"2021-09-22"},
-  {name:"MindSpore框架介绍及赛题说明",src:"https://forum.trustie.net/forums/4664/detail",count:3,time:"2021-09-22"},
-  {name:"OpenHarmony系统介绍及赛题说明",src:"https://forum.trustie.net/forums/4663/detail",count:4,time:"2021-09-22"},
-  {name:"openGauss系统介绍及赛题说明",src:"https://forum.trustie.net/forums/4662/detail",count:5,time:"2021-09-22"},
-]
-const list2 = [
-  {name:"Gitlink/Gitlink",src:"https://forgeplus.trustie.net/Gitlink/forgeplus",count:304},
-  {name:"泛在操作系统实验室/矽璓工业物联操作系统XiUOS",src:"https://forgeplus.trustie.net/xuos/xiuos",count:50},
-  {name:"华为技术有限公司/openGauss-operator",src:"https://forgeplus.trustie.net/Huawei_Technology/openGauss-operator",count:100},
-  {name:"开放原子开源基金会/BitXHub",src:"https://forgeplus.trustie.net/openatom_foundation/bitxhub",count:40},
-  {name:"华为技术有限公司/openEuler-datenlord",src:"https://forgeplus.trustie.net/Huawei_Technology/openEuler-datenlord",count:98},
-]
-const list3 = [
-  {name:"Gitlink平台DevOps模块使用说明",src:"https://forum.trustie.net/forums/4682/detail",count:10,time:"2021-09-23"},
-  {name:"Gitlink如何将临时分支push到远端对应的新分支？",src:"https://forum.trustie.net/forums/4705/detail",count:8,time:"2021-09-23"},
-  {name:"了解什么是 DevOps？",src:"https://forum.trustie.net/forums/4704/detail",count:4,time:"2021-09-23"},
-  {name:"EduCoder平台简介",src:"https://forum.trustie.net/forums/4701/detail",count:26,time:"2021-09-23"},
-  {name:"Webhooks指南",src:"https://forum.trustie.net/forums/4683/detail",count:3,time:"2021-09-23"},
-]
-const list4 = [
-  {name:"小学生都能读懂的网络协议之:WebSocket",src:"https://forum.trustie.net/forums/4708/detail",count:4,time:"2021-09-23"},
-  {name:"容器神话 Docker 是如何一分为二的",src:"https://forum.trustie.net/forums/4707/detail",count:5,time:"2021-09-23"},
-  {name:"一文揭示，DevOps与企业数字化究竟有何联系？",src:"https://forum.trustie.net/forums/4706/detail",count:3,time:"2021-09-23"},
-  {name:"GitHub上最流行的10000个Java都使用了哪些库？",src:"https://forum.trustie.net/forums/4703/detail",count:8,time:"2021-09-23"},
-  {name:"如何正确下载CentOS各个版本镜像",src:"https://forum.trustie.net/forums/4684/detail",count:2,time:"2021-09-23"},
-]
+import Axios from 'axios';
 
 function ThirdEdition() {
   const [ active , setActive ] = useState(1);
+  const [ isSpin , setIsSpin ] = useState(true);
   const [ flag , setFlag ] = useState(true);
+  const [ list1, setList1 ] = useState([]);
+  const [ list2, setList2 ] = useState([]);
+  const [ list3, setList3 ] = useState([]);
+  const [ list4, setList4 ] = useState([]);
   
   const doubleFlag = useMemo(()=>{
     return flag;
   },[flag])
 
   useEffect(()=>{
-    // let box = document.getElementById('thirdUl');
-    // var myTimer = setTimeout(intervalActive, 2500);
-    // box.onmouseover = () => {
-    //   clearTimeout(myTimer);
-    //   setFlag(false);
-    // }
-    // box.onmouseleave = () => {
-    //   myTimer = setTimeout(intervalActive, 2500);
-    //   setFlag(true);
-    // }
+    let box = document.getElementById('thirdUl');
+    var myTimer = setTimeout(intervalActive, 2500);
+    box.onmouseover = () => {
+      clearTimeout(myTimer);
+      setFlag(false);
+    }
+    box.onmouseleave = () => {
+      myTimer = setTimeout(intervalActive, 2500);
+      setFlag(true);
+    }
   },[active,flag])
 
   function intervalActive() {
@@ -75,6 +53,41 @@ function ThirdEdition() {
     }
   }
 
+  useEffect(()=>{
+    if(active){
+      getList(active);
+    }
+  },[active])
+
+  function getList(a) {
+    let params = a === 1 ? "activity_forum" : a===2 ? "excellent_project" : a=== 3 ? "pinned_forum" : "experience_forum";
+    if(a===1 && (list1 && list1.length>0)){return}
+    if(a===2 && (list2 && list2.length>0)){return}
+    if(a===3 && (list3 && list3.length>0)){return}
+    if(a===4 && (list4 && list4.length>0)){return}
+    setIsSpin(true);
+    const url = `/topics.json?topic_type=${params}`;
+    Axios.get(url,{
+      params:{
+        limit:5
+      }
+    }).then(result=>{
+      if(result){
+        let l = result.data.topics;
+        if(a===1){
+          setList1(l);
+        }else if(a===2){
+          setList2(l);
+        }else if(a===3){
+          setList3(l);
+        }else{
+          setList4(l);
+        }
+        setIsSpin(false);
+      }
+    }).catch(error=>{})
+  }
+
   return(
     <div className="thirdEdition">
       <p className="title">开发者的家园</p>
@@ -111,65 +124,95 @@ function ThirdEdition() {
           </li>
         </ul>
         <div className="thirdLists">
-        <img src={active === 1 ? bg3 : active===2 ? bg32 :active===3 ? bg33 :bg34 } alt="" width="336px"/>
-        <div className="listbox">
-          <p className="listTitle">
-            {active === 1 ? "GitLink分享最新平台资讯、社区活动通知、开源竞赛信息，把握开源生态发展脉搏" 
-            : active===2 ? "GitLink汇聚精英企业仓库、前沿技术仓库、人气热门仓库，孵化优质开源创新成果"
-            :active===3 ? "GitLink集萃社区精选项目介绍、平台使用技巧等优秀文章，助力开源开放协同创新" 
-            :"GitLink甄选技术研究、心得体会、经验交流等高质量内容，推动社区健康稳定发展"}
-          </p>
-          {
-            active === 1&&
-            list1.map((i,k)=>{
-              return(
-                <li>
-                  <a href={i.src} target="_blank">{i.name}</a>
-                  <span className="listboxcount"><i className="iconfont icon-a-liulanicon2x mr5"></i>{i.count}</span>
-                  <span>{i.time}</span>
-                </li>
-              )
-            })
-          }
-          {
-            active === 2&&
-            list2.map((i,k)=>{
-              return(
-                <li>
-                  <a href={i.src} target="_blank">{i.name}</a>
-                  <span className="listboxcount"><i className="iconfont icon-a-liulanicon2x mr5"></i>{i.count}</span>
-                  {/* {i.time} */}
-                </li>
-              )
-            })
-          }
-          {
-            active === 3&&
-            list3.map((i,k)=>{
-              return(
-                <li>
-                  <a href={i.src} target="_blank">{i.name}</a>
-                  <span className="listboxcount"><i className="iconfont icon-a-liulanicon2x mr5"></i>{i.count}</span>
-                  <span>{i.time}</span>
-                </li>
-              )
-            })
-          }
-          {
-            active === 4&&
-            list4.map((i,k)=>{
-              return(
-                <li>
-                  <a href={i.src} target="_blank">{i.name}</a>
-                  <span className="listboxcount"><i className="iconfont icon-a-liulanicon2x mr5"></i>{i.count}</span>
-                  <span>{i.time}</span>
-                </li>
-              )
-            })
-          }
+          <img src={active === 1 ? bg3 : active===2 ? bg32 :active===3 ? bg33 :bg34 } alt="" width="336px"/>
+          <div className="listbox">
+            <p className="listTitle">
+              {active === 1 ? "GitLink分享最新平台资讯、社区活动通知、开源竞赛信息，把握开源生态发展脉搏" 
+              : active===2 ? "GitLink汇聚精英企业仓库、前沿技术仓库、人气热门仓库，孵化优质开源创新成果"
+              :active===3 ? "GitLink集萃社区精选项目介绍、平台使用技巧等优秀文章，助力开源开放协同创新" 
+              :"GitLink甄选技术研究、心得体会、经验交流等高质量内容，推动社区健康稳定发展"}
+            </p>
+            <div style={{minHeight:"260px"}}>
+              {
+                active === 1 && 
+                <React.Fragment>
+                  {
+                    list1 && list1.length > 0 ? list1.map((i,k)=>{
+                      return(
+                        <li>
+                          <a href={i.url} target="_blank">{i.title}</a>
+                          <span className="listboxcount"><i className="iconfont icon-a-liulanicon2x mr5"></i>{i.visits}</span>
+                          <span>{i.time}</span>
+                        </li>
+                      )
+                    }):""
+                  }
+                  {
+                    list1 && list1.length  === 0 && <Skeleton />
+                  }
+                </React.Fragment>
+              }
+              {
+                active === 2 &&
+                <React.Fragment>
+                  {
+                   list2 && list2.length > 0? list2.map((i,k)=>{
+                    return(
+                      <li>
+                        <a href={i.url} target="_blank">{i.title}</a>
+                        <span className="listboxcount" style={{marginRight:"40px"}}><i className="iconfont icon-a-liulanicon2x mr5"></i>{i.visits}</span>
+                        {/* {i.time} */}
+                      </li>
+                    )
+                  }):""
+                  }
+                  {
+                    list2 && list2.length  === 0 && <Skeleton />
+                  }
+                </React.Fragment>
+              }
+              {
+                active === 3 && 
+                <React.Fragment>
+                  {
+                   list3 && list3.length > 0 ? list3.map((i,k)=>{
+                    return(
+                      <li>
+                        <a href={i.url} target="_blank">{i.title}</a>
+                        <span className="listboxcount"><i className="iconfont icon-a-liulanicon2x mr5"></i>{i.visits}</span>
+                        <span>{i.time}</span>
+                      </li>
+                    )
+                  }):""
+                }
+                {
+                  list3 && list3.length  === 0 && <Skeleton />
+                }
+                </React.Fragment>
+              }
+              {
+                active === 4 && 
+                <React.Fragment>
+                  {
+                   list4 && list4.length > 0 ? list4.map((i,k)=>{
+                    return(
+                      <li>
+                        <a href={i.url} target="_blank">{i.title}</a>
+                        <span className="listboxcount"><i className="iconfont icon-a-liulanicon2x mr5"></i>{i.visits}</span>
+                        <span>{i.time}</span>
+                      </li>
+                    )
+                  }):""
+                  }
+                  {
+                    list4 && list4.length  === 0 && <Skeleton />
+                  }
+                </React.Fragment>
+              }
+            </div>
+          </div>
         </div>
       </div>
-      </div>
     </div>
   )
 }

src/home/TopEdition.jsx

@@ -1,5 +1,8 @@
-import React from 'react';
+import React , { useEffect , useState } from 'react';
 import Slider from 'react-slick';
+import axios from 'axios';
+import { getImageUrl } from 'educoder';
+
 let setting={
   dots:true,
   infinite: true,
@@ -15,15 +18,45 @@ let setting={
   nextArrow:<button type='button' class='slick-prev slick-arrow'><i className="iconfont icon-xiangyoujiantou"></i></button>
 }
 function TopEdition({register,current_user}) {
+
+  const [ bannerList , setBannerList ] = useState(undefined);
+
+  useEffect(()=>{
+    getBanner();
+  },[])
+
+  function getBanner() {
+    const url = `/topics.json?topic_type=banner`;
+    axios.get(url,{
+      params:{
+        limit:4
+      }
+    }).then(result=>{
+      if(result){
+        setBannerList(result.data.topics);
+      }
+    }).catch(error=>{})
+  }
   return(
     <Slider {...setting}>
-      <div className="regform1"></div>
-      <div className="regform2"></div>
-      <div className="regform3">
-      </div>
-      <div className="regform4">
-        { !(current_user && current_user.login) && <p className="regPrg"><a href={register}>注册</a></p> }
-      </div>
+      {
+        bannerList && bannerList.length > 0 ?
+        bannerList.map((i,k)=>{
+          return(
+            <div className={`regform`}>
+              <div style={{backgroundImage:`url(${getImageUrl(i.image)})`}}>
+                {
+                  k +1 === bannerList.length && (!(current_user && current_user.login)) ?
+                  <p className="regPrg"><a href={register}>注册</a></p>
+                  :""
+                }
+              </div>
+            </div>
+          )
+        })
+        :
+        ""
+      }
     </Slider>
   )
 }