新增bot市场

src/App.css

@@ -22,6 +22,13 @@
   font-size: large;
 }
 
+.main-content{
+  width: 1200px;
+  min-width: 62.5vw;
+  max-width: 98vw;
+  margin: 0 auto;
+}
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

src/App.js

@@ -120,13 +120,17 @@ const Glcc = Loadable({
   loading: Loading,
 })
 
+const Market = Loadable({
+  loader : () => import("./market"),
+  loading: Loading,
+})
 // const CreateMerge = Loadable({
 //   loader: () => import('./forge/Merge/NewMerge'),
 //   loading: Loading,
 // })
 
 // 此处仅维护前端可能的一级路由，不用进行项目或者组织判断的字段。
-const keyWord = ["explore", "settings", "setting", "mulan", "wiki", "issues", "setting", "trending", "code", "projects", "pulls", "mine", "login", "register", "email", "export", "nopage", "404", "403", "500", "501", "search", "organize", "login", "register", "resetPassword", "aboutus","educoder", "glcc"];
+const keyWord = ["explore", "settings", "setting", "mulan", "wiki", "issues", "setting", "trending", "code", "projects", "pulls", "mine", "login", "register", "email", "export", "nopage", "404", "403", "500", "501", "search", "organize", "login", "register", "resetPassword", "aboutus","educoder", "glcc","market"];
 
 class App extends Component {
   constructor(props) {
@@ -391,6 +395,13 @@ class App extends Component {
                 render={(props) => <Glcc {...this.props} {...props} />}
               ></Route>
 
+              
+              {/*market/softbot */}
+              <Route
+                path="/market"
+                render={(props) => <Market {...this.props} {...props} />}
+              ></Route>
+
               {/* 组织 */}
               <Route path={"/organize"}
                 render={

src/market/index.jsx

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from "react";
+import { Route, Switch } from "react-router-dom";
+import { withRouter } from "react-router";
+import { SnackbarHOC } from "educoder";
+import { CNotificationHOC } from "../modules/courses/common/CNotificationHOC";
+import { TPMIndexHOC } from "../modules/tpm/TPMIndexHOC";
+import Loadable from "react-loadable";
+import Loading from "../Loading";
+import { ImageLayerOfCommentHOC } from "../modules/page/layers/ImageLayerOfCommentHOC";
+
+import "./index.scss";
+
+
+// 市场
+const MarketList = Loadable({
+  loader: () => import("./list"),
+  loading: Loading,
+});
+
+
+const Market = (propsF) => {
+  
+
+  return (
+    <div className="newMain clearfix market">
+      <Switch {...propsF}>
+        {/* 开源夏令营报名页面 */}
+        <Route
+          path="/"
+          render={(props) => (
+            <MarketList {...propsF} {...props} />
+          )}
+        ></Route>
+        
+
+      </Switch>
+    </div>
+  );
+}
+
+export default withRouter(
+  ImageLayerOfCommentHOC({
+    imgSelector: ".imageLayerParent img, .imageLayerParent .imageTarget",
+    parentSelector: ".newMain",
+  })(CNotificationHOC()(SnackbarHOC()(TPMIndexHOC(Market))))
+);

src/market/list/index.jsx

@@ -0,0 +1,145 @@
+import React, { useState } from "react";
+import { Tabs, Input, Pagination } from 'antd';
+import banner from '../img/banner.png';
+import './index.scss';
+
+const { Search } = Input;
+
+const typeArr = [{
+    type: 'all',
+    typeName: '全部分类',
+}, {
+    type: 'api',
+    typeName: '接口管理',
+}, {
+    type: 'check',
+    typeName: '代码审阅',
+}, {
+    type: 'quality',
+    typeName: '代码质量',
+}, {
+    type: 'integration',
+    typeName: '持续集成',
+}, {
+    type: 'rely',
+    typeName: '依赖管理',
+}, {
+    type: 'deploy',
+    typeName: '部署',
+}, {
+    type: 'test',
+    typeName: '测试',
+}, {
+    type: 'safety',
+    typeName: '安全',
+}, {
+    type: 'project',
+    typeName: '项目管理',
+}, {
+    type: 'other',
+    typeName: '其它',
+},
+];
+
+const data = [{
+    title: '法洛斯人工智能工智能',
+    author: 'dsdss',
+    content: '法洛斯人工智能工智能法洛斯人工智能工智能法洛斯人工智能工智能',
+    num: 121,
+    img: '	https://www.gitlink.org.cn/api/attachments/387043',
+}, {
+    title: '法洛斯人工智能工智能',
+    author: 'dsdss',
+    content: '法洛斯人工智能工智能法洛斯人工智能工法洛斯人工智能工智能法洛斯人工智能工智能法洛斯人工智能工智能智能法洛斯人工智能工智能',
+    img: '	https://www.gitlink.org.cn/api/attachments/387043',
+    num: 121
+}, {
+    title: '法洛斯人工智能工智能',
+    author: 'dsdss',
+    content: '法洛斯人工智能工智能法洛斯人工智能工智能法洛斯人工智能工智能',
+    img: '	https://www.gitlink.org.cn/api/attachments/387043',
+    num: 121
+}, {
+    title: '法洛斯人工智能工智能',
+    author: 'dsdss',
+    content: '法洛斯人工智能工智能法洛斯人工智能工智能法洛斯人工智能工智能',
+    img: '	https://www.gitlink.org.cn/api/attachments/387043',
+    num: 121
+}, {
+    title: '法洛斯人工智能工智能',
+    author: 'dsdss',
+    content: '法洛斯人工智能工智能法洛斯人工智能工智能法洛斯人工智能工智能',
+    img: '	https://www.gitlink.org.cn/api/attachments/387043',
+    num: 121
+},]
+
+const MarketList = ({ props }) => {
+
+    const [active, setActive] = useState({
+        type: 'all',
+        typeName: '全部分类',
+    });
+
+    const [keyword, setKeyword] = useState('');
+    const [pageSize, setPagesize] = useState(10);
+    const [total, setTotal] = useState(50);
+
+    return <div className="market-list">
+        <img className="market-banner" src={banner} />
+        <div className="main-content">
+            <div className="bot-type">
+                {
+                    typeArr.map(i => {
+                        return <div className={`bot-type-item ${active.type === i.type ? 'active' : ''}`} key={i.type} onClick={() => { setActive(i) }}>{i.typeName}</div>
+                    })
+                }
+            </div>
+            <div>
+                <div className="bot-list">
+                    <Search
+                        placeholder='请输入关键字搜索bot'
+                        allowClear
+                        enterButton
+                        onSearch={(value) => { setKeyword(value) }}
+                        className="bot-search"
+                    />
+
+                    <div className="bot-list-data clearfix">
+                        {
+                            data.map((item, i) => {
+                                return <div key={i} className="bot-list-item">
+                                    <div className="bot-title">
+                                        <div className="bot-author-img">
+                                            <img className="" src={item.img} />
+                                        </div>
+                                        <div>
+                                            <div className="bot-title-content ellipsis-1">{item.title}</div>
+                                            <div className="bot-title-author">{item.author}</div>
+                                        </div>
+                                    </div>
+                                    <div className="bot-body">
+                                        <div className="bot-content ellipsis-2">{item.content}</div>
+                                        <div className="bot-down-times"><i className="iconfont icon-xiazai-icon"></i>{item.num} <span >次</span></div>
+                                    </div>
+                                </div>
+
+                            })
+                        }
+                    </div>
+                </div>
+                <Pagination
+                    // simple
+                    total={total}
+                    pageSize={pageSize}
+                    onChange={(e) => { }}
+                ></Pagination>
+            </div>
+
+
+
+        </div>
+
+    </div>
+}
+
+export default MarketList;

src/market/list/index.scss

@@ -0,0 +1,151 @@
+.market-list {
+  background-color: #f5f7fa;
+  .market-banner {
+    width: 100%;
+  }
+  .main-content {
+    display: flex;
+    margin-top: 50px;
+  }
+  .bot-type {
+    padding-bottom:20px;
+    background-image: linear-gradient(180deg, #f4f5f8 0%, #fbfcfd 100%);
+    border: 2px solid#ffffff;
+    width: 218px;
+    font-weight: 500;
+    color: #4c5b76;
+    font-size: 16px;
+    line-height: 54px;
+
+    .bot-type-item {
+      position: relative;
+      padding-left: 35px;
+      &.active {
+        &::before {
+          position: absolute;
+          left: 0;
+          content: "";
+          width: 4px;
+          top: 17%;
+          height: 66%;
+          background: $primary-color;
+        }
+        color: $primary-color;
+        background-color: #e5e9fa;
+      }
+    }
+  }
+
+  .bot-list {
+    width: 982px;
+    background-image: linear-gradient(180deg, #f3f5f8 0%, #ffffff 100%);
+    box-shadow: 8px 6px 18px rgba(171, 202, 255, 0.24) inset;
+    padding: 30px 22px 70px 40px;
+  }
+
+  .bot-search {
+    height: 42px;
+    .ant-btn{
+        width: 61px;
+        height: 42px;
+        font-size: 30px;
+    }
+  }
+
+  .bot-list-item {
+    float: left;
+    width: 280px;
+    height: 194px;
+    background-color: #f4f5f8;
+    border: 1px solid;
+    border-color: #ffffff;
+    border-radius: 2px;
+    box-shadow: 0px 0px 12px rgba(82, 101, 223, 0.09);
+    margin: 25px 40px 0 0;
+    &:nth-child(3n) {
+      margin-right: 0px;
+    }
+  }
+
+  .bot-title {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 89px;
+    background-image: url("../img/title_bg.png");
+    background-size: 100% 100%;
+  }
+  .bot-author-img {
+    display: flex;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 1px solid #fff;
+    margin: 0 11px 0 14px;
+    img {
+      width: 100%;
+    }
+  }
+
+  .bot-title-content {
+    color: #151d40;
+    font-size: 16px;
+    line-height: 22px;
+  }
+
+  .bot-title-author {
+    font-weight: 500;
+    color: rgba(13, 22, 71, 0.65);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .bot-body {
+    display: flex;
+    flex-direction: column;
+    padding: 14px;
+
+    .iconfont {
+      font-size: 15px !important;
+      color: #8893af !important;
+      margin-right: 10px;
+    }
+  }
+  .bot-content {
+    font-weight: 500;
+    color: #8893af;
+    line-height: 24px;
+  }
+
+  .ellipsis-1 {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  
+  .ellipsis-2 {
+    text-overflow: -o-ellipsis-lastline;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+  .bot-down-times {
+    color: #151d40;
+    font-size: 16px;
+    // line-height: 24px;
+
+    span {
+      font-size: 0.9em;
+    }
+  }
+
+  .ant-pagination{
+      padding:30px 0;
+      text-align: right;
+  }
+}