新增icon+添加右侧的返回顶部等按钮（接口没有，先隐藏、需要合并到其它分支，上一个提交也一样）

package-lock.json

@@ -990,6 +990,18 @@
             "react-lifecycles-compat": "^3.0.4",
             "warning": "^4.0.3"
           }
+        },
+        "react-slick": {
+          "version": "0.25.2",
+          "resolved": "https://registry.nlark.com/react-slick/download/react-slick-0.25.2.tgz",
+          "integrity": "sha1-VjMbZ9R9i8/i3OtqyrHI/VvR9rw=",
+          "requires": {
+            "classnames": "^2.2.5",
+            "enquire.js": "^2.1.6",
+            "json2mq": "^0.2.0",
+            "lodash.debounce": "^4.0.8",
+            "resize-observer-polyfill": "^1.5.0"
+          }
         }
       }
     },
@@ -2065,7 +2077,7 @@
     },
     "babel-polyfill": {
       "version": "6.26.0",
-      "resolved": "https://registry.nlark.com/babel-polyfill/download/babel-polyfill-6.26.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/babel-polyfill/download/babel-polyfill-6.26.0.tgz",
       "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
       "requires": {
         "babel-runtime": "^6.26.0",
@@ -2075,7 +2087,7 @@
       "dependencies": {
         "regenerator-runtime": {
           "version": "0.10.5",
-          "resolved": "https://registry.nlark.com/regenerator-runtime/download/regenerator-runtime-0.10.5.tgz",
+          "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.10.5.tgz?cache=0&sync_timestamp=1595456367497&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fregenerator-runtime%2Fdownload%2Fregenerator-runtime-0.10.5.tgz",
           "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg="
         }
       }
@@ -15243,9 +15255,9 @@
       }
     },
     "react-slick": {
-      "version": "0.25.2",
+      "version": "0.28.1",
-      "resolved": "https://registry.nlark.com/react-slick/download/react-slick-0.25.2.tgz",
+      "resolved": "https://registry.nlark.com/react-slick/download/react-slick-0.28.1.tgz",
-      "integrity": "sha1-VjMbZ9R9i8/i3OtqyrHI/VvR9rw=",
+      "integrity": "sha1-EsGNmRtZQy35w3V7pUCiJ7P7hbk=",
       "requires": {
         "classnames": "^2.2.5",
         "enquire.js": "^2.1.6",
@@ -17028,6 +17040,11 @@
         "is-fullwidth-code-point": "^2.0.0"
       }
     },
+    "slick-carousel": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npm.taobao.org/slick-carousel/download/slick-carousel-1.8.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fslick-carousel%2Fdownload%2Fslick-carousel-1.8.1.tgz",
+      "integrity": "sha1-pL+ykBSIe7Zs5Si5C9DNomLMj40="
+    },
     "snapdragon": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",

package.json

@@ -14,6 +14,7 @@
     "babel-jest": "20.0.3",
     "babel-loader": "7.1.2",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-polyfill": "^6.26.0",
     "babel-preset-react-app": "^3.1.1",
     "babel-runtime": "6.26.0",
     "bizcharts": "^3.5.8",
@@ -92,6 +93,7 @@
     "react-resizable": "^1.10.1",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
+    "react-slick": "^0.28.1",
     "react-split-pane": "^0.1.91",
     "react-url-query": "^1.5.0",
     "react-zmage": "^0.8.5-beta.31",
@@ -102,6 +104,7 @@
     "scroll-into-view": "^1.14.2",
     "showdown": "^1.9.1",
     "showdown-katex": "^0.8.0",
+    "slick-carousel": "^1.8.1",
     "store": "^2.0.12",
     "style-loader": "0.19.0",
     "styled-components": "^4.4.1",
@@ -113,8 +116,7 @@
     "whatwg-fetch": "2.0.3",
     "wrap-md-editor": "^0.2.20",
     "xterm": "4.8.1",
-    "xterm-addon-fit": "0.4.0",
+    "xterm-addon-fit": "0.4.0"
-    "babel-polyfill": "^6.26.0"
   },
   "scripts": {
     "start": "node --max_old_space_size=15360 scripts/start.js",

public/css/edu-purge.css

@@ -3584,42 +3584,6 @@ a.user_bluebg_btn {
   margin-right: 5px;
 }
 
-/*-------------------个人主页：右侧提示区域--------------------------*/
-.-task-sidebar {
-  position: fixed;
-  width: 40px;
-  height: 180px;
-  right: 0;
-  bottom: 80px;
-  z-index: 10;
-}
-
-.-task-sidebar div {
-  height: 40px;
-  line-height: 40px;
-  box-sizing: border-box;
-  width: 40px;
-  background: #4CACFF;
-  color: #fff;
-  font-size: 20px;
-  text-align: center;
-  margin-bottom: 5px;
-  border-radius: 4px;
-}
-
-.-task-sidebar div i {
-  color: #fff;
-}
-
-.-task-sidebar div i:hover {
-  color: #fff !important;
-}
-
-.gotop {
-  background-color: rgba(208, 207, 207, 0.5) !important;
-  padding: 0px !important;
-}
-
 
 /***** loading ******/
 /*****载入中******/

public/css/iconfont.json

@@ -5,6 +5,27 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "21568989",
+      "name": "分享",
+      "font_class": "fenxiang1",
+      "unicode": "e89c",
+      "unicode_decimal": 59548
+    },
+    {
+      "icon_id": "21568990",
+      "name": "回到顶部",
+      "font_class": "huidaodingbu1",
+      "unicode": "e89d",
+      "unicode_decimal": 59549
+    },
+    {
+      "icon_id": "21568993",
+      "name": "帮助",
+      "font_class": "bangzhu",
+      "unicode": "e8a0",
+      "unicode_decimal": 59552
+    },
     {
       "icon_id": "991344",
       "name": "提交",

src/App.js

@@ -17,8 +17,7 @@ import marked from './common/marked';
 import moment from 'moment'
 
 import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
-
+import SiderBar from './forge/Component/SiderBar'
-import history from './history';
 
 import { SnackbarHOC } from 'educoder'
 import { initAxiosInterceptors } from './AppConfig'
@@ -206,6 +205,7 @@ class App extends Component {
 				<ConfigProvider locale={zhCN}>
 					<MuiThemeProvider theme={theme}>
 						<LoginDialog {...this.props} {...this.state} Modifyloginvalue={() => this.Modifyloginvalue()}></LoginDialog>
+						{/* <SiderBar /> */}
 						<Router>
 							<Switch>
 								{/*项目*/}

src/forge/Component/Component.scss

@@ -192,4 +192,115 @@ li.ant-menu-item{
       border-right: none;
     }
   }
-}
+}
+
+/*-------------------个人主页：右侧提示区域--------------------------*/
+.-task-sidebar {
+  position: fixed;
+  width: 40px;
+  height: 180px;
+  right: 0;
+  bottom: 20px !important;
+  z-index: 10;
+}
+
+@media screen and (max-width: 1920px){
+  .-task-sidebar{
+    right:240px;
+  }
+}
+@media screen and (max-width: 1500px){
+  .-task-sidebar{
+    right:100px;
+  }
+}
+@media screen and (max-width: 1200px){
+  .-task-sidebar{
+    right:0px;
+  }
+}
+.-task-sidebar>div {
+  height: 40px;
+  line-height: 40px;
+  box-sizing: border-box;
+  width: 40px;
+  color: #999;
+  font-size: 20px;
+  text-align: center;
+  margin-bottom: 20px;
+  border-radius: 50%;
+  background: #FFFFFF;
+  box-shadow: 0px 0px 10px 1px #F1F1F1;
+}
+
+.-task-sidebar>div i {
+  color: #999;
+}
+
+.-task-sidebar>div:hover i {
+  color: #fff !important;
+}
+.-task-sidebar>div:hover{
+  background: #1890FF;
+  box-shadow: 0px 0px 10px 2px #B6D0FC;
+}
+.helpBox{
+  width: 260px;
+  .ant-popover-inner-content{
+    padding:15px 20px;
+  }
+  &>p.title{
+    font-size: 18px;
+    color: #333;
+    line-height: 20px;
+    margin-bottom: 15px;
+  }
+}
+
+
+.-task-desc {
+  background: #494949;
+  width: 90px;
+  line-height: 36px;
+  text-align: center;
+  position: absolute;
+  color: #fff;
+  font-size: 13px;
+  z-index: 999999;
+  opacity: 0;
+}
+
+.-task-desc div {
+  position: absolute;
+  top: 10px;
+  right: -7px;
+  height: 13px;
+}
+
+.-task-desc div img {
+  float: left
+}
+
+.-task-sidebar .scan_ewm {
+  position: absolute !important;
+  right: 45px !important;
+  bottom: 0px !important;
+  background-color: #494949 !important;
+  -webkit-box-sizing: border-box !important;
+  box-sizing: border-box !important;
+  font-size: 14px !important;
+  line-height: 16px !important;
+  display: none;
+  height: 213px !important;
+}
+
+.trangle_right {
+  position: absolute;
+  right: -5px;
+  bottom: 15px;
+  width: 0;
+  height: 0px;
+  border-top: 6px solid transparent;
+  border-left: 5px solid #494949;
+  border-bottom: 6px solid transparent
+}

src/forge/Component/SiderBar.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Popover } from 'antd';
+import './Component.scss';
+
+const $ = window.$;
+
+$(window).scroll(function () {
+  if ($(".gotop").length > 0) {
+    if ($(document).scrollTop() > 0) {
+      $(".-task-sidebar .gotop").show();
+      $(".gotop").click(function () {
+        $("html,body").scrollTop(0);
+      });
+    }
+    if ($(document).scrollTop() === 0) {
+      $(".-task-sidebar .gotop").hide();
+    }
+  }
+});
+
+function SiderBar() {
+  const content = (
+    <div>
+      <p>帮助</p>
+    </div>
+  )
+  return (
+    <div className={"-task-sidebar"} >
+        <div className="feedback" title="意见反馈">
+          <Popover content={content} overlayClassName="helpBox" placement={"left"}>
+            <i className="iconfont icon-bangzhu font-22"></i>
+          </Popover>
+        </div>
+        {/* <div className="scan pr" title="微信扫一扫">
+          <span className="inline erweima"><i className="iconfont icon-erweima color-white font-22 fl"></i></span>
+        </div>
+        <div className="consult" title='在线咨询'>
+          <a target="_blank" className="color_white" href="//shang.qq.com/wpa/qunwpa?idkey=2f2043d88c1bd61d182b98bf1e061c6185e23055bec832c07d8148fe11c5a6cd">
+            <i className="iconfont icon-qqzaixianzixun color-white font-22"></i>
+          </a>
+        </div> */}
+        <div className="gotop" title="返回顶部">
+          <a>
+            <i className="iconfont icon-huidaodingbu1"></i>
+          </a>
+        </div>
+    </div>
+  )
+}
+
+export default SiderBar;

src/forge/Main/Index.js

@@ -1,7 +1,10 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 import { Menu, Input , Spin, Pagination , Popover , Select } from 'antd';
+import Slider from "react-slick";
 import { getImageUrl } from 'educoder';
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
 import '../css/index.scss'
 import './list.css';
 import './Index.scss';
@@ -30,6 +33,8 @@ class Index extends Component {
       categoryList: undefined,
       recommendList:undefined,
 
+      recommendOriList:undefined,
+
       languageList:undefined,
       languageId:undefined
     }
@@ -47,6 +52,8 @@ class Index extends Component {
     this.getRecommand();
 
     this.getLanguage();
+
+    // this.getRecommandOri();
   }
 
   // 获取语言列表
@@ -72,6 +79,17 @@ class Index extends Component {
     }).catch(error=>{})
   }
 
+  getRecommandOri=()=>{
+    const url = `/organizations/recommend.json`;
+    axios.get(url).then(result=>{
+      if(result){
+        this.setState({
+          recommendOriList:result.data.organizations
+        })
+      }
+    }).catch(error=>{})
+  }
+
   // 获取列表
   getListData = (page, limit, search, sort, project_type, category_id,languageId) => {
     const { current_user } = this.props;
@@ -256,22 +274,56 @@ class Index extends Component {
     const { current_user } = this.props;
 
     const { projectsList , recommendList , languageList , languageId , 
-      isSpin, total, search, limit, page, typeList, categoryList } = this.state;
+      isSpin, total, search, limit, page, typeList, categoryList , recommendOriList } = this.state;
+
+      const setting={
+        dots: true,
+        infinite: true,
+        speed: 500,
+        slidesToShow: 5,
+        slidesToScroll: 5,
+        autoplay:false,
+        arrows:false,
+        adaptiveHeight:true
+      }
+      const settings={
+        dots: true,
+        infinite: true,
+        speed: 500,
+        slidesToShow: 6,
+        slidesToScroll: 6,
+        autoplay:false,
+        arrows:false,
+        adaptiveHeight:true
+      }
 
     return (
       <div>
         <p className="t_project_banner">
           <img src={banner} width="100%" alt=""/>
         </p>
+        {/* {
+          recommendOriList && recommendOriList.length>0?
+            <Slider {...settings} className="recommandOri">
+              {
+                recommendOriList.map((i,k)=>{
+                  return(
+                    <li><Link to={''}><img src={getImageUrl(`/${i.avatar_url}`)} alt={i.name} title={i.name} width="80px"/></Link></li>
+                  )
+                })
+              }
+            </Slider>
+          :""
+        } */}
         {
           recommendList && recommendList.length>0 &&
-          <div className="recommandProjects">
+          <Slider {...setting} className={recommendList.length>5 ? "recommandProjects":"recommandProjects mb20"}>
             {
               recommendList.map((item,key)=>{
                 return(
-                  <div onClick={()=>this.getoDetail(item.author && item.author.login,item.identifier)}>
+                  <div className="items" onClick={()=>this.getoDetail(item.author && item.author.login,item.identifier)}>
                     <div className="mainInfo">
-                      <img src={getImageUrl(`/${item.author && item.author.image_url}`)} alt=""/>
+                      <img src={getImageUrl(`/${item.author && item.author.image_url}`)} width="50px" height="50px"alt=""/>
                       <p className="school">{item.name}</p>
                       <p className="name">{item.author && item.author.name}</p>
                     </div>
@@ -283,9 +335,8 @@ class Index extends Component {
                 )
               })
             }
-          </div>
+          </Slider>
         }
-        
         <div className="ProjectListIndex">
           <div className="list-left">
             <ul className="list-l-Menu">

src/forge/Main/Index.scss

@@ -1,57 +1,53 @@
+.recommandOri.slick-slider{
+  width: 1300px;
+  margin:20px auto 40px;
+  .slick-track{
+    margin-left: 0px;
+  }
+  .slick-slide{
+    li > a{
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
 /* recommandProjects */
-.recommandProjects{
+.recommandProjects.slick-slider{
-  display: flex;
+  width: 1230px;
-  max-width: 1200px;
+  margin:20px auto 40px;
-  margin:20px auto;
+  .slick-track{
-}
+    margin-left: 0px;
-.recommandProjects >div{
-  background-color: #fff;
-  border-radius: 10px;
-  width: 220px;
-  margin-right: 25px;
-  cursor: pointer;
-  border: 1px solid #eee;
-  &:last-child{
-    margin-right: 0px;
   }
-}
+  .slick-arrow.slick-prev,.slick-arrow.slick-next{
-.recommandProjects > div:hover{
+    &:before{
-  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
+      color: #999;
-}
+    }
-.recommandProjects > div .mainInfo{
+    li.slick-active button:before{
-  display: flex;
+      color: #999;
-  flex-direction: column;
+    }
-  align-items: center;
-  justify-content: center;
-  min-height: 160px;
-  border-bottom: 1px solid #eee;
-  padding:20px;
-  box-sizing: border-box;
-  img{
-    height: 50px;
-    width:50px;
-    border-radius: 50%;
   }
-  .name{
+  .slick-dots{
-    font-size: 13px;
+    bottom: -29px;
-    color: #666;
+    li button:before{
-    height: 18px;
+      color: #909090;
-    line-height: 18px;
+    }
-    margin-top:12px;
   }
-  .school{
+  .slick-slide{
-    margin-top:12px;
+    padding:0px 15px;
-    color: #333;
+    box-sizing: border-box;
-    font-size: 16px;
+    & > div{
-    height: 22px;
+      background-color: #fff;
-    line-height: 22px;
+      border-radius: 10px;
-    overflow: hidden;
+      width: 100%;
-    white-space: nowrap;
+      cursor: pointer;
-    text-overflow: ellipsis;
+      border: 1px solid #eee;
-    max-width:100%;
+      &:hover{
+        box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
+      }
+    }
   }
-}
-.recommandProjects{
   .baseInfo{
     padding:18px 15px;
     display: flex;
@@ -72,6 +68,39 @@
       text-align: right;
     }
   }
+  .mainInfo{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 160px;
+    border-bottom: 1px solid #eee;
+    padding:20px;
+    box-sizing: border-box;
+    img{
+      height: 50px;
+      width:50px;
+      border-radius: 50%;
+    }
+    .name{
+      font-size: 13px;
+      color: #666;
+      height: 18px;
+      line-height: 18px;
+      margin-top:12px;
+    }
+    .school{
+      margin-top:12px;
+      color: #333;
+      font-size: 16px;
+      height: 22px;
+      line-height: 22px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      max-width:100%;
+    }
+  }
 }
 
 // coderDepot

src/modules/tpm/SiderBar.js

@@ -1,79 +0,0 @@
-import React, { Component } from 'react';
-import './TPMIndex.css';
-
-const $ = window.$;
-
-$(window).resize(function () {
-  rightSlider();
-});
-
-$(window).scroll(function () {
-  if ($(".gotop").length > 0) {
-    if ($(document).scrollTop() > 0) {
-      $(".-task-sidebar .gotop").show();
-      $(".gotop").click(function () {
-        $("html,body").scrollTop(0);
-      });
-    }
-    if ($(document).scrollTop() == 0) {
-      $(".-task-sidebar .gotop").hide();
-    }
-  }
-});
-
-function rightSlider() {
-  var poi = parseInt((parseInt($(window).width()) - 1200) / 2) - 81;
-  // console.log(parseInt($(window).width())+"  "+poi);
-  if (poi > 0) {
-    $(".-task-sidebar").css("right", poi);
-  } else {
-    $(".-task-sidebar").css("right", "0px");
-  }
-  $(".-task-sidebar").show();
-}
-
-
-class SiderBar extends Component {
-  constructor(props) {
-    super(props)
-
-  }
-
-  render() {
-    return (
-
-      <div className={"-task-sidebar"} >
-
-        {this.props.mygetHelmetapi && this.props.mygetHelmetapi.main_site === true ? <div>
-
-          <div className="gotop" title="返回顶部">
-            <a>
-              <i className="iconfont icon-shangjiantou color-white"></i>
-            </a>
-          </div>
-
-          <div className="feedback" title="意见反馈">
-            <a target="_blank" className="color_white" href="/help/feedback">
-              <i className="iconfont icon-yijianfankui color-white font-22"></i>
-            </a>
-          </div>
-
-          <div className="scan pr" title="微信扫一扫">
-            <span className="inline erweima"><i className="iconfont icon-erweima color-white font-22 fl"></i></span>
-          </div>
-
-
-          <div className="consult" title='在线咨询'>
-            <a target="_blank" className="color_white" href="//shang.qq.com/wpa/qunwpa?idkey=2f2043d88c1bd61d182b98bf1e061c6185e23055bec832c07d8148fe11c5a6cd">
-              <i className="iconfont icon-qqzaixianzixun color-white font-22"></i>
-            </a>
-          </div>
-
-
-        </div> : ""}
-      </div>
-    );
-  }
-}
-
-export default SiderBar;

src/modules/tpm/TPMIndex.css

@@ -135,88 +135,6 @@ body>.-task-title {
   height: 60px !important;
 }
 
-/*-------------------个人主页：右侧提示区域--------------------------*/
-.-task-sidebar {
-  position: fixed;
-  width: 40px;
-  height: 180px;
-  right: 0;
-  bottom: 20px !important;
-  z-index: 10;
-}
-
-.-task-sidebar>div {
-  height: 40px;
-  line-height: 40px;
-  box-sizing: border-box;
-  width: 40px;
-  background: #4CACFF;
-  color: #fff;
-  font-size: 20px;
-  text-align: center;
-  margin-bottom: 5px;
-  border-radius: 4px;
-}
-
-.-task-sidebar>div i {
-  color: #fff;
-}
-
-.-task-sidebar>div i:hover {
-  color: #fff !important;
-}
-
-.gotop {
-  background-color: rgba(208, 207, 207, 0.5) !important;
-  padding: 0px !important;
-}
-
-.-task-desc {
-  background: #494949;
-  width: 90px;
-  line-height: 36px;
-  text-align: center;
-  position: absolute;
-  color: #fff;
-  font-size: 13px;
-  z-index: 999999;
-  opacity: 0;
-}
-
-.-task-desc div {
-  position: absolute;
-  top: 10px;
-  right: -7px;
-  height: 13px;
-}
-
-.-task-desc div img {
-  float: left
-}
-
-.-task-sidebar .scan_ewm {
-  position: absolute !important;
-  right: 45px !important;
-  bottom: 0px !important;
-  background-color: #494949 !important;
-  -webkit-box-sizing: border-box !important;
-  box-sizing: border-box !important;
-  font-size: 14px !important;
-  line-height: 16px !important;
-  display: none;
-  height: 213px !important;
-}
-
-.trangle_right {
-  position: absolute;
-  right: -5px;
-  bottom: 15px;
-  width: 0;
-  height: 0px;
-  border-top: 6px solid transparent;
-  border-left: 5px solid #494949;
-  border-bottom: 6px solid transparent
-}
 
 .HeaderSearch {
   margin-top: 18px;