Merge pull request 'gitlink首页需求更新' (#86) from caishi/forgeplus-react:feature_homepage into feature_homepage

public/css/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2340181 */
-  src: url('iconfont.woff2?t=1631773579834') format('woff2'),
-       url('iconfont.woff?t=1631773579834') format('woff'),
-       url('iconfont.ttf?t=1631773579834') format('truetype');
+  src: url('iconfont.woff2?t=1632738478946') format('woff2'),
+       url('iconfont.woff?t=1632738478946') format('woff'),
+       url('iconfont.ttf?t=1632738478946') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-xiangyoujiantou:before {
+  content: "\e8de";
+}
+
+.icon-xiangzuojiantou:before {
+  content: "\e8df";
+}
+
+.icon-a-liulanicon2x:before {
+  content: "\e8dd";
+}
+
+.icon-wenjianicon:before {
+  content: "\e8dc";
+}
+
+.icon-a-yuanquan2x:before {
+  content: "\e8db";
+}
+
 .icon-xiangmubiaoqian:before {
   content: "\e8da";
 }

public/css/iconfont.json

@@ -5,6 +5,41 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "630094",
+      "name": "向右箭头",
+      "font_class": "xiangyoujiantou",
+      "unicode": "e8de",
+      "unicode_decimal": 59614
+    },
+    {
+      "icon_id": "630095",
+      "name": "向左箭头",
+      "font_class": "xiangzuojiantou",
+      "unicode": "e8df",
+      "unicode_decimal": 59615
+    },
+    {
+      "icon_id": "24600282",
+      "name": "浏览icon@2x",
+      "font_class": "a-liulanicon2x",
+      "unicode": "e8dd",
+      "unicode_decimal": 59613
+    },
+    {
+      "icon_id": "24567893",
+      "name": "文件icon",
+      "font_class": "wenjianicon",
+      "unicode": "e8dc",
+      "unicode_decimal": 59612
+    },
+    {
+      "icon_id": "24527422",
+      "name": "圆圈@2x",
+      "font_class": "a-yuanquan2x",
+      "unicode": "e8db",
+      "unicode_decimal": 59611
+    },
     {
       "icon_id": "24378423",
       "name": "项目标签",

src/App.js

@@ -97,8 +97,8 @@ const ProjectIndex = Loadable({
 	loading: Loading,
 });
 
-const CreateMerge = Loadable({
-  loader: () => import('./forge/Merge/NewMerge'),
+const Home = Loadable({
+  loader: () => import('./home/Index'),
   loading: Loading,
 })
 
@@ -353,34 +353,28 @@ class App extends Component {
 							{/* 判断为用户/组织，并进入对应页面 */}
 							{
 								pathType === 'User' ?
-									<Route exact path="/:username"
-										render={
-											(props) => {
-												return (<InfosIndex {...this.props} {...this.state} />)
-											}
+								<Route exact path="/:username"
+									render={
+										(props) => {
+											return (<InfosIndex {...this.props} {...this.state} />)
 										}
-									/> : pathType === 'Organization' ? <Route path={"/:OIdentifier"}
-										render={
-											(props) => {
-												return (<OrganizeIndex {...props} {...this.props} {...this.state} />)
-											}
-										}>
-									</Route> : pathType === '404' ? <Route component={Shixunnopage} />:
-										<Route exact path="/"
-											render={
-												(props) => (
-													personal && personal.length > 0 ?
-														<InfosIndex {...this.props} {...props} />
-														:
-														<ProjectIndex {...this.props} {...props} />
-												)
-											}
-										/>
-								// <Route path="/" component={Loading} />
-								// <Route path="/" component={Shixunnopage} /> 
+									}
+								/> : pathType === 'Organization' ? <Route path={"/:OIdentifier"}
+									render={
+										(props) => {
+											return (<OrganizeIndex {...props} {...this.props} {...this.state} />)
+										}
+									}>
+								</Route> : pathType === '404' ? <Route component={Shixunnopage} />:
+									""
 							}
-
-
+							<Route exact path="/"
+								render={
+									(props) => (
+										<Home {...props} {...this.props} {...this.state}/>
+									)
+								}
+							/>
 
 							{/* 个人主页 */}
 							<Route path="/:username"

src/forge/Component/Component.scss

@@ -363,7 +363,7 @@ li.ant-menu-item{
       color: #333;
       height: 34px;
       line-height: 34px;
-      margin-bottom: 10px;
+      margin-bottom: 10px!important;
       a{
         display: block;
         overflow: hidden;

src/forge/Head/Footer.jsx

@@ -19,46 +19,45 @@ function Footer(){
 
   return(
     <div>
-      <div style={{height:"497px"}}></div>
+      <div style={{height:"443px"}}></div>
       <div className="newFooter edu-txt-center">
         {value && showhtml(value)}
-        {/* <div className="footerInfos">
-          <ul>
-            <li>社区</li>
-            <li><a href={`/`} target="_blank">网站首页</a></li>
-            <li><a href={`https://www.trustie.net/agreement`} target="_blank">服务协议</a></li>
-            <li><a href={`https://forum.trustie.net/forums/1168/detail`} target="_blank">帮助中心</a></li>
-            <li><a href={`https://forum.trustie.net/`} target="_blank">问吧交流</a></li>
-            <li><a href={`https://www.trustie.net/cooperation`} target="_blank">合作伙伴</a></li>
-          </ul>
-          <ul>
-            <li>支持与服务</li>
-            <li><a href={`https://forgeplus.trustie.net/docs/api`} target="_blank">API文档</a></li>
-            <li><a href={`https://forum.trustie.net/forums/1168/detail`} target="_blank">帮助中心</a></li>
-            <li><a href={`https://git-scm.com`} target="_blank">Git常用命令</a></li>
-            <li><a href={`https://forum.trustie.net/forums/3080/detail`} target="_blank">DevOps使用文档</a></li>
-            <li><a href={`https://forgeplus.trustie.net/projects/jasder/forgeplus/tree/master/CHANGELOG.md`} target="_blank">日志更新</a></li>
-          </ul>
-          <ul>
-            <li>合作伙伴</li>
-            <li><a href={`http://www.sei.pku.edu.cn`} target="_blank">北京大学</a></li>
-            <li><a href={`http://scse.buaa.edu.cn`} target="_blank">北京航空航天大学</a></li>
-            <li><a href={`https://www.nju.edu.cn`} target="_blank">南京大学</a></li>
-            <li><a href={`https://www.xtu.edu.cn`} target="_blank">湘潭大学</a></li>
-            <li><a href={`http://www.iscas.ac.cn`} target="_blank">ISCAS</a></li>
-            <li><a href={`https://www.ucloud.cn`} target="_blank">UCloud优刻得</a></li>
-            <li><a href={`http://www.inforbus.com`} target="_blank">中创软件</a></li>
-            <li><a href={`https://www.inspur.com`} target="_blank">浪潮集团</a></li>
-            <li><a href={`http://www.copu.org.cn`} target="_blank">中国开源软件推进联盟</a></li>
-            <li><a href={`https://www.sjtu.edu.cn`} target="_blank">上海交通大学</a></li>
-          </ul>
-          <ul>
-            <li>合作伙伴</li>
-            <li><span>热线：</span></li>
-            <li><span>QQ群：1071514693</span></li>
-          </ul>
-        </div>
-        <p className="footerCopy">© Copyright 2007~2021 国防科技大学Trustie团队 & IntelliDE <a href="https://beian.miit.gov.cn">湘ICP备 17009477号</a></p> */}
+        {/* <div className="footEdition"> 
+          <div className="footContent">
+            <ul className="center">
+              <img src={""} alt="Gitlink（确实开源）" height="29px"/>
+              <p>（确实开源）</p>
+            </ul>
+            <ul>
+              <li className="thehead">社区</li>
+              <li><a href="/">网站首页</a></li>
+              <li><a href="https://forum.trustie.net/forums/1168/detail">帮助中心</a></li>
+              <li><a href="https://forum.trustie.net/">论坛交流</a></li>
+              <li><a href="https://www.trustie.net/cooperation">合作伙伴</a></li>
+            </ul>
+            <ul>
+              <li className="thehead">支持与服务</li>
+              <li><a href="https://forgeplus.trustie.net/docs/api">API文档</a></li>
+              <li><a href="https://git-scm.com">Git常用命令</a></li>
+              <li><a href="https://forum.trustie.net/forums/3080/detail">DevOps使用文档</a></li>
+              <li><a href='https://www.trustie.net/agreement'>服务协议</a></li>
+            </ul>
+            <ul>
+              <li className="thehead">加入我们</li>
+              <li className="theline">
+                <div className="mr50">
+                  <li>公众号</li>
+                  <img src={"Img"} alt="公众号"/>
+                </div>
+                <div>
+                  <li>qq群</li>
+                  <img src={"qqImg"} alt="qq群"/>
+                </div>
+              </li>
+            </ul>
+          </div>
+          <p className="copyrightDesc">©Copyright 2007～2021 国防科技大学Gitlink团队 & IntelliDE <br/>湘ICP备 17009477号</p>
+        </div> */}
       </div>
     </div>
   )

src/forge/Head/header.scss

@@ -126,4 +126,77 @@
     width: 110px;
     text-align: right;
   }
+}
+
+.footEdition{
+  background-color: #171B23;
+  .footContent{
+    display: flex;
+    align-items: flex-start;
+    padding:86px 0px;
+    justify-content: space-around;
+    width: 1200px;
+    margin:0px auto;
+    ul{
+      min-width: 120px;
+      text-align: left;
+      margin-right: 80px;
+      &.center{
+        text-align: center;
+      }
+      &>p{
+        height: 22px;
+        font-size: 16px;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 22px;
+      }
+      &>img{
+        width: 100px;
+        height: 100%;
+        margin-bottom: 30px;
+        margin-top: 25px;
+        border-radius: 10px;
+      }
+      li{
+        height: 20px;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        color: #BDC2D1;
+        margin-bottom: 15px!important;
+        a{
+          color: #BDC2D1!important;
+          &:hover{
+            text-decoration: underline;
+          }
+        }
+        &.thehead{
+          height: 25px;
+          font-size: 18px;
+          font-weight: 600;
+          color: #FFFFFF;
+          line-height: 25px;
+          margin-bottom: 20px!important;
+        }
+        &.theline{
+          display: flex;
+          img{
+            width: 80px;
+            height: 80px;
+            border-radius: 3px;
+          }
+        }
+      }
+    }
+  }
+  .copyrightDesc{
+    font-size: 12px;
+    font-weight: 400;
+    color: #BDC2D1;
+    line-height: 28px;
+    padding:15px 0px;
+    text-align: center;
+    background-color: #1B212C;
+  }
 }

src/home/FifthEdition.jsx

@@ -0,0 +1,138 @@
+import React , { useEffect } from 'react';
+import Beijing from './Img/unit/beijing.png';
+import SHJT from './Img/unit/SHJT.png';
+import DD from './Img/unit/DD.png';
+import HW from './Img/unit/HW.png';
+import ML from './Img/unit/ML.png';
+import QH from './Img/unit/QH.png';
+import QZ from './Img/unit/QZ.png';
+import TX from './Img/unit/TX.png';
+import XH from './Img/unit/XH.png';
+import XJY from './Img/unit/XJY.png';
+import ZC from './Img/unit/ZC.png';
+import GFKJ from './Img/unit/GFKJ.png';
+import BJHKHT from './Img/unit/BJHKHT.png';
+import ISCAS from './Img/unit/ISCAS.png';
+import NJDX from './Img/unit/NJDX.png';
+import CEC from './Img/unit/CEC.png';
+import KYRJLM from './Img/unit/KYRJLM.png';
+import WXYJY from './Img/unit/WXYJY.png';
+import HSKY from './Img/unit/HSKY.png';
+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 { Link } from 'react-router-dom';
+
+const list = [
+  {image_url:GFKJ, name:"国防科技大学",src:"https://www.nudt.edu.cn/"},
+  {image_url:TG, name:"头歌",src:"https://www.educoder.net/"},
+  {image_url:XJY, name:"长沙先进技术研究院",src:"https://www.hnjmrh.gov.cn/newweb/service/detail/305/"},
+  {image_url:Beijing, name:"北京大学",src:"https://www.pku.edu.cn/"},
+  {image_url:BJHKHT, name:"北京航空航天",src:"https://www.buaa.edu.cn/"},
+  {image_url:ISCAS, name:"ISCAS",src:"http://www.iscas.ac.cn/"},
+  {image_url:NJDX, name:"南京大学",src:"https://www.nju.edu.cn/"},
+  {image_url:DD, name:"滴滴",src:"https://www.didiglobal.com/"},
+  {image_url:CEC, name:"CEC",src:"https://www.cec.com.cn/"},
+  {image_url:HW, name:"华为",src:"https://www.huawei.com/"},
+  {image_url:ML, name:"木兰开源社区",src:"https://www.mulanos.cn/"},
+  {image_url:TX, name:"腾讯",src:"https://www.tencent.com/zh-cn"},
+  {image_url:KYRJLM, name:"中国开源软件推进联盟",src:"http://www.copu.org.cn/"},
+  {image_url:WXYJY, name:"无锡大数据研究院",src:""},
+  {image_url:QZ, name:"openi启智",src:"https://www.openi.org.cn/"},
+  {image_url:HSKY, name:"红山开源",src:"https://osredm.com/"},
+  {image_url:LSLM, name:"绿色产业联盟",src:"https://www.opengcc.org/"},
+  {image_url:ZC, name:"中创软件",src:"http://www.cvicse.com/"},
+  {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
+// };
+function FifthEdition() {
+
+  useEffect(()=>{
+    if(list.length>10){
+      Init();
+    }
+  },[])
+
+  function Init() {
+    let box = document.getElementById('scrollBox1');
+    scrollUp();
+    var myTimer = setInterval(scrollUp, 10);
+    // 鼠标移入container 元素上 清除定时器 停止滚动
+    box.onmouseover = () => {
+      clearInterval(myTimer);
+    }
+    // 鼠标移出container 元素上 继续滚动
+    // 60表示每隔60毫秒向上滚动一次
+    box.onmouseout = () => {
+      myTimer = setInterval(scrollUp, 10);
+    }
+  }
+
+  function scrollUp() {
+    let box = document.getElementById('scrollBox1');
+    if(box){
+      let con1 = document.getElementById('box1');
+      if (box.scrollLeft >= con1.clientWidth) {
+        box.scrollLeft = 0;
+      } else {
+        box.scrollLeft++;
+      }
+    }
+  }
+
+  return(
+    <div id={"scrollBox1"}>
+      <div style={{width:340*list.length+"px"}}>
+        <ul className="fifthList" id="box1" style={{width:(340*list.length)/2+"px"}}>
+          {
+            list && list.map((i,k)=>{
+              return(
+                <li><Link to={i.src}><img src={i.image_url} alt={i.name}/></Link></li>
+              )
+            })
+          }
+        </ul>
+        {list.length > 10 && 
+          <ul className="fifthList" id="box2" style={{width:(340*list.length)/2+"px"}}>
+          {
+            list && list.map((i,k)=>{
+              return(
+                <li><Link to={i.src}><img src={i.image_url} alt={i.name}/></Link></li>
+              )
+            })
+          }
+          </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>
+  )
+}
+export default FifthEdition;

src/home/Footnav.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import Img from './Img/gitlink.png';
+import qqImg from './Img/qq.png';
+function Footnav() {
+  return(
+    <div className="footEdition"> 
+      <div className="footContent">
+        <ul className="center">
+          <img src={Img} alt="Gitlink（确实开源）" height="29px"/>
+          <p>（确实开源）</p>
+        </ul>
+        <ul>
+          <li className="thehead">社区</li>
+          <li><a href="/">网站首页</a></li>
+          <li><a href="https://forum.trustie.net/forums/1168/detail">帮助中心</a></li>
+          <li><a href="https://forum.trustie.net/">论坛交流</a></li>
+          <li><a href="https://www.trustie.net/cooperation">合作伙伴</a></li>
+        </ul>
+        <ul>
+          <li className="thehead">支持与服务</li>
+          <li><a href="https://forgeplus.trustie.net/docs/api">API文档</a></li>
+          <li><a href="https://git-scm.com">Git常用命令</a></li>
+          <li><a href="https://forum.trustie.net/forums/3080/detail">DevOps使用文档</a></li>
+          <li><a href='https://www.trustie.net/agreement'>服务协议</a></li>
+        </ul>
+        <ul>
+          <li className="thehead">加入我们</li>
+          <li className="theline">
+            {/* <div className="mr50">
+              <li>公众号</li>
+              <img src={qqImg} alt="公众号"/>
+            </div> */}
+            <div>
+              <li>qq群</li>
+              <img src={qqImg} alt="qq群"/>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <p className="copyrightDesc">©Copyright 2007～2021 国防科技大学Gitlink团队 & IntelliDE <br/>湘ICP备 17009477号</p>
+    </div>
+  )
+}
+export default Footnav;

src/home/Headnav.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import './Index.scss';
+import gitlink from './Img/gitlink.png';
+
+function HeadNav({showLoginDialog,mygetHelmetapi}) {
+  const register = mygetHelmetapi && mygetHelmetapi.common && mygetHelmetapi.common.register;
+  const navbar = mygetHelmetapi && mygetHelmetapi.navbar;
+  return(
+    <div className="headNav">
+      <div className="headNavDiv">
+        <ul className="headlist">
+          <li><img src={gitlink} alt="gitlink" height="37px" style={{marginRight:"15px"}}/></li>
+          {
+            navbar && navbar.length>0&&
+            navbar.map((i,k)=>{
+              return(
+                <li style={{display:i.hidden?"none":"block"}}><a href={i.link}>{i.name}</a></li>
+              )
+            })
+          }
+        </ul>
+        <div>
+          <a className="color-white" onClick={showLoginDialog}>登录</a>
+          <a className="regBtn" href={register}>注册</a>
+        </div>
+      </div>
+    </div>
+  )
+}
+export default HeadNav;

src/home/Index.jsx

@@ -0,0 +1,128 @@
+import React , { useEffect , useState } from 'react';
+import "./Index.scss";
+import HeadNav from './Headnav';
+import TopEdition from './TopEdition';
+import ThirdEdition from './ThirdEdition';
+import { Anchor } from 'antd';
+import F41 from './Img/4-1.png';
+import F42 from './Img/4-2.png';
+import F43 from './Img/4-3.png';
+import F44 from './Img/4-4.png';
+import SecondEdition from './SecondEdition';
+import FifthEdition from './FifthEdition';
+import Footnav from './Footnav';
+import { TPMIndexHOC } from '../modules/tpm/TPMIndexHOC';
+
+function Index(props) {
+  const [ value , setValue ] = useState("");
+  const [ flag , setFlag ] = useState(true);
+  const [ isRender , setIsRender ] = useState(false);
+  const [ isloginCancel , setIsloginCancel ] = useState(false);  
+  const register = props && props.mygetHelmetapi && props.mygetHelmetapi.common && props.mygetHelmetapi.common.register;
+
+  useEffect(()=>{
+    window.addEventListener("scroll",scrollListener);
+  },[])
+
+  function scrollListener(event) {
+    let third = document.getElementById("thirdContent").offsetTop;
+    let top = document.documentElement.scrollTop + 60;
+    if(top>= third)
+    {
+      setFlag(false)
+    }else{
+      setFlag(true)
+    }
+  }
+
+  function changeActive(params) {
+    if(params){
+      setValue(params);
+      let h = params.split("#")[1];
+      let t = document.getElementById(h).offsetTop;
+      document.documentElement.scrollTop = t-100;
+    }else{
+      setValue("");
+    }
+  }
+
+
+  return(
+    <div className="homePage">
+      <div className="topEdition">
+        <HeadNav {...props}/>
+        <TopEdition register={register}/>
+        <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">
+        <p className="theTitle">Gitlink，新一代开源创新服务平台</p>
+        {
+          flag &&
+          <Anchor>
+            <li onClick={()=>changeActive("#hadoop")} className={value === "#hadoop"?"active":""}><a>分布式协作开发</a></li>
+            <li onClick={()=>changeActive("#oneStop")} className={value === "#oneStop"?"active":""}><a>一站式过程管理</a></li>
+            <li onClick={()=>changeActive("#highDevops")} className={value === "#highDevops"?"active":""}><a>高效流水线运维</a></li>
+            <li onClick={()=>changeActive("#multipleAnalyse")} className={value === "#multipleAnalyse"?"active":""}><a>多层次代码分析</a></li>
+            <li onClick={()=>changeActive("#multidimensional")} className={value === "#multidimensional"?"active":""}><a>多维度用户画像</a></li>
+          </Anchor>
+        }
+        <SecondEdition {...props} setValue={setValue}/>
+      </div>
+      <div id="thirdContent">
+        <ThirdEdition />
+      </div>
+
+      <div className="forthEdition">
+        <p className="theTitle">加入Gitlink，和社区伙伴们一起踏上开源创新的辉煌旅程！</p>
+        <a className="qulikyreg" href={register}>快速注册</a>
+        <ul className="forthUl">
+          <li>
+            <img src={F41} alt="" width={"100px"}/>
+            <span className="forthtitle">发现</span>
+            <span className="forthsubtitle">探索丰富优质的开发资源</span>
+          </li>
+          <li>
+            <img src={F42} alt="" width={"101px"}/>
+            <span className="forthtitle">加入</span>
+            <span className="forthsubtitle">寻找志同道合的协作伙伴</span>
+          </li>
+          <li>
+            <img src={F43} alt="" width={"104px"}/>
+            <span className="forthtitle">合作</span>
+            <span className="forthsubtitle">开启开放共享的协同之旅</span>
+          </li>
+          <li>
+            <img src={F44} alt="" width={"87px"}/>
+            <span className="forthtitle">贡献</span>
+            <span className="forthsubtitle">书写开源创新的精彩成就</span>
+          </li>
+        </ul>
+      </div>
+
+      <div className="fifthEdition">
+        <p className="title">开源生态</p>
+        <p className="subtitle">Gitlink与各大企业、高校、科研机构开展广泛的技术合作，推动我国开源软件生态的快速构建与发展</p>
+        <FifthEdition />
+      </div>
+      <Footnav />
+    </div>
+  )
+}
+export default TPMIndexHOC(Index);

src/home/SecondEdition.jsx

@@ -0,0 +1,210 @@
+import React , { useEffect , useState } from 'react';
+import Img1 from './Img/2-2-1.png';
+import ImgHead from './Img/2-2-head.png';
+import Img2 from './Img/2-2-2.png';
+import Img3 from './Img/2-2-3.png';
+import Imgring from './Img/2-2-ring.png';
+import ImgS1 from './Img/2-3-1.png';
+import ImgS2 from './Img/2-3-2.png';
+import ImgS3 from './Img/2-3-3.png';
+import ImgS4 from './Img/2-3-4.png';
+import ImgM2 from './Img/2-6-2.png';
+import ImgM4 from './Img/2-6-1.png';
+import Codeafter from './Img/codeafter.png';
+import './code.scss';
+
+const code=[
+  {str:<span><span className='code-green'>git remote</span> add origin https://git.trustie.net/Gitlink/Gitlink.git</span>},
+  {str:<span><span className='code-red'>git push</span> -u origin master</span>},
+  {str:<span><span className='code-green'>git branch</span> dev</span>},
+  {str:<span><span className='code-blue'>git checkout</span> dev</span>},
+  {str:<span><span className='code-green'>git add</span> .</span>},
+  {str:<span><span className='code-red'>git commit</span> -m "xxx"</span>},
+  {str:<span><span className='code-red'>git push</span> origin dev</span>},
+  {str:<span><span className='code-blue'>git checkout</span> master</span>},
+  {str:<span><span className='code-green'>git pull</span> origin master</span>},
+  {str:<span><span className='code-green'>git merge</span> dev</span>},
+  {str:<span><span className='code-red'>git push</span> origin master</span>}
+]
+const codes=[
+  {str:<span><span className='code-blue'>latest:</span> Pulling from appleboy/drone-ssh</span>},
+  {str:<span><span className='code-red'>Digest:</span>sha256:095ca4ceafcb751f1f22fe416057d3e2a6302f7b1f7011b17010973cb6bbdd9f</span>},
+  {str:<span>Status:Image is up to date for appleboy/drone-ssh:latest</span>},
+  {str:<span><span className='code-green'>======CMD======</span></span>},
+  {str:<span><span className='code-green'>echo ====暂停容器开始======= </span></span>},
+  {str:<span><span className='code-red'>docker</span> rm -f mo-test</span>},
+  {str:<span><span className='code-red'>docker</span> rmi mo-test:1.0</span>},
+  {str:<span><span className='code-blue'>cd</span> /opt/demo</span>},
+  {str:<span><span className='code-green'>echo ====开始部署=======</span></span>},
+  {str:<span><span className='code-red'>docker </span>build -t mo-test:1.0 .</span>},
+  {str:<span><span className='code-red'>docker </span>run -d -p 8080:8080 --name mo-test mo-test:1.0</span>},
+  {str:<span><span className='code-green'>echo ====部署成功======</span></span>},
+  {str:<span><span className='code-green'>======END======</span></span>},
+]
+
+function SecondEdition({setValue}) {
+  useEffect(()=>{
+    window.addEventListener('scroll', handleScroll);
+  },[])
+
+  const [ hadoop , setHadoop ] = useState(false);
+  const [ highDevops , setHighDevops ] = useState(false);
+  const [ multipleAnalyse , setMultipleAnalyse ] = useState(false);
+  const [ multidimensional , setMultidimensional ] = useState(false);
+
+  const [ oneStop , setOneStop ] = useState(false);
+
+  function handleScroll() {
+    let clientHeight = document.documentElement.clientHeight; //可视区域高度
+    let scrollTop  = document.documentElement.scrollTop;  //滚动条滚动高度
+    let f = checkPosi("hadoop",clientHeight,scrollTop);
+    if(f){
+      setValue("#hadoop");
+      setHadoop(true);
+    }else{
+      setHadoop(false);
+    }
+    let f1 = checkPosi("oneStop",clientHeight,scrollTop);
+    if(f1){
+      setValue("#oneStop");
+      setOneStop(true);
+    }else{
+      setOneStop(false);
+      setOneStop(false);
+    }
+    let f3 = checkPosi("highDevops",clientHeight,scrollTop);
+    if(f3){
+      setValue("#highDevops");
+      setHighDevops(true);
+    }else{
+      setHighDevops(false);
+      setHighDevops(false);
+    }
+    let f4 = checkPosi("multipleAnalyse",clientHeight,scrollTop);
+    if(f4){
+      setValue("#multipleAnalyse");
+      setMultipleAnalyse(true);
+    }else{
+      setMultipleAnalyse(false);
+      setMultipleAnalyse(false);
+    }
+    let f5 = checkPosi("multidimensional",clientHeight,scrollTop);
+    if(f5){
+      setValue("#multidimensional");
+      setMultidimensional(true);
+    }else{
+      setMultidimensional(false);
+      setMultidimensional(false);
+    }
+  }
+
+  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;
+    }
+  }
+  return(
+    <div className="secondEditionContent">
+      <div className="hadoop" id="hadoop">
+        <div className="hadoopCon">
+          <div className="descBox">
+            <p className="desc1">分布式协作开发</p>
+            <p className="desc2">基于Git打造分布式代码托管环境，提供免费公、私有代码仓库；</p>
+            <p className="desc3">支持在线文件编辑、代码分支管理、协作贡献统计、代码仓库复刻（Fork）、贡献合并请求（PR）、群智贡献审阅等功能；</p>
+          </div>
+          <div className={hadoop ? "hadoopCode activeCode" :"hadoopCode"}>
+            {
+              code.map((i,k)=>{
+                return(
+                  <li><pre className="word-item" style={{animationDelay: `${k * 0.2 + .2}s`}}><span className="codenum">{k+1}</span>{i.str}</pre></li>
+                )
+              })
+            }
+            <img src={Codeafter} alt="运行结果" className={"activeImg"}/>
+          </div>
+        </div>
+        <p className="hadoopdesc">让您的项目在这里健康、快速的成长！</p>
+      </div>
+      <div className={oneStop ? "oneStop activeCode" :"oneStop"} id="oneStop">
+        <div className={"oneStopContent"}>
+          <div className={"osLeftMain"}>
+            <img src={Img1} alt="" width="520px" className="osleftPosi"/>
+            <img src={ImgHead} alt="" width="213px" style={{marginLeft:"-12px"}}/>
+            <img src={Img2} alt="" width="653px" className="osleftPosi1"/>
+            <img src={Img3} alt="" width="367px" className="osleftPosi2"/>
+          </div>
+          <div className="osRightMain">
+            <p className="osRightTitle">一站式过程管理</p>
+            <p>提供<span>易修（Issue）、里程碑、通知提醒、标签归档</span>等多样化任务管理工具，支持各类开发任务的发布、指派与跟踪；</p>
+            <p>同时提供<span>在线Wiki文档、组织多粒度管理</span>等功能，为您搭建一站式的项目过程管理环境；</p>
+            <p><span>让您的团队协作更高效、过程更透明！</span></p>
+          </div>
+        </div>
+        <img src={Imgring} alt="" height="83px" className="imgring"/>
+      </div>
+      <div className={highDevops ? "highDevops activeCode" : "highDevops"} id="highDevops">
+        <div className="highDoTitle">
+          <span>高效流水线运维</span>
+        </div>
+        <div className="highDoSubtitle">
+          融合DevOps思想，提供轻量级的工作流引擎（Engine），
+          <span>打通编码、测试、构建、部署</span>等开发运维环节；支持
+          <span>自定义配置、代码静态扫描、构建自动触发、容器镜像托管</span>等功能，同时支持接入第三方运维工具。
+        </div>
+        <div className="highDoContent">
+          <div>
+            <img src={ImgS1} alt="" width="794px"/>
+            <div style={{marginBottom:'74px',marginTop:"25px",position:"relative"}}>
+              <img src={ImgS2} alt="" width="520px"/>
+              {/* <div className="highCodes">
+                {
+                  codes.map((i,k)=>{
+                    return(
+                      <li><pre className="word-item" style={{animationDelay: `${k * 0.2 + .2}s`}}><span className="codenum">{k+1}</span>{i.str}</pre></li>
+                    )
+                  })
+                }
+              </div> */}
+            </div>
+            <img src={ImgS3} alt="" width="427px" className="highImg2"/>
+            <img src={ImgS4} alt="" width="413px" className="highImg1"/>
+          </div>
+          <p className="highDoBottondesc">让您的代码更加快速、可靠地形成高质量的产品！</p>
+        </div>
+      </div>
+      <div className={multipleAnalyse ? "multipleAnalyse activeCode":"multipleAnalyse"} id="multipleAnalyse">
+        <span className="title">多层次代码分析</span>
+        <div className="maContent"></div>
+        <p className="desc">提供软件软代码和芯片RTL代码的溯源分析、文件级和组件级许可证识别及风险分析、输入性开源漏洞检测和加固建议，支持分析结果的多层次可视化展示。</p>
+      </div>
+      <div className={"multidimensional"} style={{opacity:multidimensional?"1":"0.3"}}>
+        <div style={{height:"168px"}}></div>
+        <div className={multidimensional ? "activeCode":""} id="multidimensional">
+          <div className={"multidimensinalhalf"}>
+            <div>
+              <p className="halfTitle">多维度用户画像</p>
+              <p className="halfsubTitle"><span>实时采集和分析平台中的各类开源资源数<br/>据，</span>搭建多维度用户画像评估系统；</p>
+            </div>
+            <div style={{width:"820px",marginLeft:"40px"}}>
+              <img src={ImgM4} alt="" width="820px" />
+            </div>
+          </div>
+          <div className="multidimensinalPart">
+            <div style={{width:"614px",marginRight:"40px"}}>
+              <img src={ImgM2} alt="" width="614px" />
+            </div>
+            <div>
+              <p><span>提供</span>开发活动统计、贡献度日历、用户能力建模、角色与专业定位分析<span>等功能。</span></p>
+              <p>让您在个人主页展示开发动态与创新能力！</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+export default SecondEdition

src/home/ThirdEdition.jsx

@@ -0,0 +1,176 @@
+import React,{ useState , useEffect , useMemo } from 'react';
+import T311 from './Img/3-1-1.png';
+import T312 from './Img/3-1-2.png';
+import T321 from './Img/3-2-1.png';
+import T322 from './Img/3-2-2.png';
+import T331 from './Img/3-3-1.png';
+import T332 from './Img/3-3-2.png';
+import T341 from './Img/3-4-1.png';
+import T342 from './Img/3-4-2.png';
+import bg3 from './Img/3-1.png';
+import bg32 from './Img/3-2.png';
+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"},
+]
+
+function ThirdEdition() {
+  const [ active , setActive ] = useState(1);
+  const [ flag , setFlag ] = useState(true);
+  
+  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);
+    }
+  },[active,flag])
+
+  function intervalActive() {
+    if(doubleFlag){
+      if(active < 4){
+        let i = active + 1;
+        setActive(i);
+      }else{
+        setActive(1);
+      }
+    }
+  }
+
+  return(
+    <div className="thirdEdition">
+      <p className="title">开发者的家园</p>
+      <p className="subtitle">一个实现100%开源，产学研联合面向软件创新的开源社区</p>
+      <div id="thirdUl">
+        <ul className="thirdUl">
+          <li className={active===1?"active":""}onClick={()=>{setFlag(false);setActive(1)}}>
+            <div className="hoverli1">
+              <img src={T311} alt="" width="38px" style={{top:"8px",left:"10px"}}/>
+              <img src={T312} alt="" width="34px"/>
+            </div>
+            <span>平台动态</span>
+          </li>
+          <li className={active===2?"active":""}onClick={()=>{setFlag(false);setActive(2)}}>
+            <div className="hoverli2">
+              <img src={T321} alt="" width="32px" style={{left:"8px"}}/>
+              <img src={T322} alt="" width="26px" style={{top:"8px"}}/>
+            </div>
+            <span>优秀仓库</span>
+          </li>
+          <li className={active===3?"active":""}onClick={()=>{setFlag(false);setActive(3)}}>
+            <div className="hoverli3">
+              <img src={T331} alt="" width="33px" style={{right:"3px",top:"8px"}}/>
+              <img src={T332} alt="" width="29px" style={{top:"8px"}}/>
+            </div>
+            <span>精选文章</span>
+          </li>
+          <li className={active===4?"active":""}onClick={()=>{setFlag(false);setActive(4)}}>
+            <div className="hoverli4">
+              <img src={T341} alt="" width="42px"/>
+              <img src={T342} alt="" width="26px" style={{top:"11px",left:"7px"}}/>
+            </div>
+            <span>经验分享</span>
+          </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><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><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><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><i className="iconfont icon-a-liulanicon2x mr5"></i>{i.count}</span>
+                  <span>{i.time}</span>
+                </li>
+              )
+            })
+          }
+        </div>
+      </div>
+      </div>
+    </div>
+  )
+}
+export default ThirdEdition;

src/home/TopEdition.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Slider from 'react-slick';
+let setting={
+  dots:true,
+  infinite: true,
+  speed: 1000,
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  pauseOnDotsHover:true,
+  pauseOnFocus:true,
+  autoplay:true,
+  arrows:true,
+  prevArrow:<button type='button' class='slick-prev slick-arrow'><i className="iconfont icon-xiangzuojiantou"></i></button>,
+  nextArrow:<button type='button' class='slick-prev slick-arrow'><i className="iconfont icon-xiangyoujiantou"></i></button>
+}
+function TopEdition({register}) {
+  return(
+    <Slider {...setting}>
+      <div className="regform1"></div>
+      <div className="regform2"></div>
+      <div className="regform3">
+      </div>
+      <div className="regform4">
+        <p className="regPrg"><a href={register}>注册</a></p>
+      </div>
+    </Slider>
+  )
+}
+export default TopEdition;

src/home/code.scss

@@ -0,0 +1,79 @@
+.hadoopCode{
+  margin-left: 32px;
+  box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
+  border-radius: 10px;
+  padding:18px 20px;
+  flex: 1;
+  margin-top: 60px;
+  position: relative;
+  &>img{
+    position: absolute;
+    right: -50px;
+    bottom: -50px;
+    width: 805px;
+    border-radius: 4px;
+    opacity: 0;
+    z-index: 1;
+  }
+  li{
+    display: flex;
+    flex-wrap: wrap;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 30px;
+    color: #E1E1E1;
+  }
+}
+pre {
+  font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
+  word-break: break-all;
+  overflow: initial ;
+  .codenum{
+    display: inline-block;
+    width: 15px;
+    text-align: left;
+    margin-right: 15px;
+  }
+  .code-green{
+    color: #00FA30;
+  }
+  .code-red{
+    color: #FF5058;
+  }
+  .code-blue{
+    color: #05CFC8;
+  }
+}
+.highCodes{
+  position: absolute;
+  top:0px;
+  right:0px;
+  width: 50%;
+  height: 100%;
+  padding:40px 30px;
+  color: #E1E1E1;
+}
+.activeCode{
+  .word-item{
+    animation: show .2s 1 forwards;
+  }
+  &>img.activeImg{
+    right: 0px;
+    bottom: -20px;
+    opacity: 1;
+    width: 705px;
+    transition: 1s;
+    transition-delay: 3s;
+  }
+}
+.word-item {
+  opacity: 0;
+}
+@keyframes show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

src/modules/login/LoginDialog.css

@@ -157,5 +157,5 @@
 }
 
 .MuiModal-root-15 {
-    z-index: 1000 !important;
+    z-index: 10001 !important;
 }

src/modules/tpm/TPMIndexHOC.js

@@ -149,6 +149,11 @@ export function TPMIndexHOC(WrappedComponent) {
 		}
 		
 		fetchUsers = () => {
+			if (this.props.match.path === "/") {
+				this.setState({
+					publicNav:false
+				})
+			}
 			let url = `/users/get_user_info.json`;
 			axios.get(url).then((response) => {
 				if (response && response.data) {
@@ -157,9 +162,6 @@ export function TPMIndexHOC(WrappedComponent) {
 						tpmLoading: false,
 						completeProfile:response.data.profile_completed
 					})
-					if (this.props.match.path === "/" && response.data.login) {
-						this.props.history.push(`/${response.data.login}`);
-					}
 					if(response.data && response.data.login){
 						if(response.data.need_edit_info){
 							this.setState({
@@ -216,7 +218,7 @@ export function TPMIndexHOC(WrappedComponent) {
 
 
 		render() {
-			let { isRender , current_user , giteaVisible , email , completeProfile , showCP } = this.state;
+			let { isRender , current_user , giteaVisible , email , completeProfile , showCP , publicNav } = this.state;
 			const common = {
 				showLoginDialog: this.showLoginDialog,
 				checkIfLogin: this.checkIfLogin,
@@ -236,12 +238,12 @@ export function TPMIndexHOC(WrappedComponent) {
 						{...this.props}
 						{...this.state}
 					/> : ""}
-					<Header {...this.state} {...this.props} {...common}></Header>
+					{ publicNav && <Header {...this.state} {...this.props} {...common}></Header>}
 					<Spin spinning={this.state.globalLoading} delay={0} className="globalSpin"
 						size="large" tip={this._gLoadingTip || "加载中..."}
 					>
 						<div className="newContainer newContainers">
-							<div style={{height:"70px"}}></div>
+							{ publicNav && <div style={{height:"70px"}}></div> }
 							{
 								current_user &&
 								<WrappedComponent initCommonState={(user) => this.initCommonState(user)}
@@ -250,7 +252,7 @@ export function TPMIndexHOC(WrappedComponent) {
 							}
 						</div>
 					</Spin>
-					<NewFooter {...this.state} {...this.props} />
+					{ publicNav && <NewFooter {...this.state} {...this.props} />}
 				</div>
 			);
 		}