From e9b366523be094f9a15871c9f0a32ab539216ede Mon Sep 17 00:00:00 2001
From: harry <harry@fangmingyi.com>
Date: Wed, 18 Mar 2020 10:57:26 +0800
Subject: [PATCH] shixun-card-list

---
 public/react/config-overrides.js              |  2 +-
 .../src/components/nodata-panel/index.jsx     | 14 +++
 .../src/components/nodata-panel/index.less    | 22 +++++
 .../src/components/shixun-card-list/index.jsx | 74 ++++++++++++++
 .../components/shixun-card-list/index.less    | 36 +++++++
 public/react/src/modules/home/home.css        | 99 +++++++++----------
 .../src/modules/tpm/shixuns/shixun-card.js    | 72 +-------------
 .../tpm/shixuns/shixunCss/shixunCard.less     | 36 -------
 8 files changed, 199 insertions(+), 156 deletions(-)
 create mode 100644 public/react/src/components/nodata-panel/index.jsx
 create mode 100644 public/react/src/components/nodata-panel/index.less
 create mode 100644 public/react/src/components/shixun-card-list/index.jsx
 create mode 100644 public/react/src/components/shixun-card-list/index.less

diff --git a/public/react/config-overrides.js b/public/react/config-overrides.js
index b0e5e91e5..7a91afb73 100644
--- a/public/react/config-overrides.js
+++ b/public/react/config-overrides.js
@@ -72,7 +72,7 @@ module.exports = override(
     style: true
   }),
   addWebpackPlugin(new MonacoWebpackPlugin({})),
-  addWebpackPlugin(instance),
+  // addWebpackPlugin(instance),
   (config) => {
     config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin));
     if (process.env.NODE_ENV !== "development") {
diff --git a/public/react/src/components/nodata-panel/index.jsx b/public/react/src/components/nodata-panel/index.jsx
new file mode 100644
index 000000000..461323951
--- /dev/null
+++ b/public/react/src/components/nodata-panel/index.jsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { getUrl } from 'educoder'
+import './index.less'
+
+export default ({ height = 400 }) => {
+  return (
+    <div className="nodata-panel-wrapper" style={{ height }}>
+      <div className="nodata-panel">
+        <img width='128' src={getUrl("/images/educoder/nodata.png")} alt='no-data' />
+        <p>暂时还没有相关数据哦！</p>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/public/react/src/components/nodata-panel/index.less b/public/react/src/components/nodata-panel/index.less
new file mode 100644
index 000000000..3da37181c
--- /dev/null
+++ b/public/react/src/components/nodata-panel/index.less
@@ -0,0 +1,22 @@
+.nodata-panel-wrapper {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+
+  .nodata-panel {
+    width: 100%;
+  }
+
+  img {
+    display: block;
+    margin: 0 auto 20px auto;
+  }
+
+  p {
+    font-size: 20px;
+    text-align: center;
+    color: #999;
+  }
+}
\ No newline at end of file
diff --git a/public/react/src/components/shixun-card-list/index.jsx b/public/react/src/components/shixun-card-list/index.jsx
new file mode 100644
index 000000000..28c229c82
--- /dev/null
+++ b/public/react/src/components/shixun-card-list/index.jsx
@@ -0,0 +1,74 @@
+import React, { Fragment } from 'react'
+import { getImageUrl, setImagesUrl } from 'educoder';
+import { Tooltip, Rate } from 'antd';
+import './index.less'
+
+export default ({ list = [] }) => {
+  return (
+    <Fragment>
+      {list.map((item, key) => {
+        const { id, tag_name, is_jupyter, power, identifier, pic, name, score_info, stu_num, level, challenges_count } = item
+        return (
+          <div className="square-Item" key={id} id={id}>
+            {
+              tag_name === null ? null :
+                <div className="tag-green">
+                  <span className="tag-name"> {tag_name}</span>
+                </div>
+            }
+            {
+              is_jupyter === true ?
+                <div className="tag-org">
+                  <p className="tag-org-name intermediatecenter"> <span className="tag-org-name-test">Jupyter</span></p>
+                </div>
+                : null
+            }
+            {power ? null
+              : <div className="closeSquare">
+                <img src={getImageUrl("images/educoder/icon/lockclose.svg")}
+                  className="mt80 mb25" />
+                <p className="font-14 color-white">非试用内容，需要授权</p>
+              </div>
+            }
+            <a href={"/shixuns/" + identifier + "/challenges"} className="square-img" target="_blank">
+              <img src={setImagesUrl(`${pic}`)} />
+            </a>
+
+            <div className="square-main">
+              <p className="task-hide">
+                <a href={"/shixuns/" + identifier + "/challenges"} className="justify color-grey-name" title={name} target="_blank">
+                  {name}
+                </a>
+              </p>
+
+              <p className="clearfix mt8 ml-3">
+                <span className="rateYoStar fl" style={{ padding: '0px', height: '20px', lineHeight: '19px', cursor: 'default' }} title="">
+                  <Rate key={key} allowHalf defaultValue={score_info === null ? 5 : score_info} disabled />
+                </span>
+                <span className="fl ml25 font-12 color-grey-9 lineh-12 mt5">{score_info === null ? "5分" : score_info + "分"}</span>
+              </p>
+
+              <p className="clearfix mt8 font-12 color-grey-B4">
+                {is_jupyter === false ? <Tooltip placement="bottom" title={"关卡"}>
+                  <span className="mr10 fl squareIconSpan">
+                    <i className="iconfont icon-shixunguanqia fl mr3"></i>{challenges_count}
+                  </span>
+                </Tooltip> : ""}
+
+                {stu_num === 0 ? null :
+                  <Tooltip placement="bottom" title={"学习人数"}>
+                    <span className="mr10 fl squareIconSpan">
+                      <i className="iconfont icon-chengyuan fl mr3"></i>{stu_num}
+                    </span>
+                  </Tooltip>
+                }
+                <span className="fr color-grey-B3 squareIconSpan">{level}</span>
+              </p>
+
+            </div>
+          </div>
+        )
+      })}
+    </Fragment>
+  )
+}
\ No newline at end of file
diff --git a/public/react/src/components/shixun-card-list/index.less b/public/react/src/components/shixun-card-list/index.less
new file mode 100644
index 000000000..b2ed4aeb5
--- /dev/null
+++ b/public/react/src/components/shixun-card-list/index.less
@@ -0,0 +1,36 @@
+  .tag-green {
+    position: absolute;
+    left: 10px;
+    bottom: 125px;
+  }
+
+  .tag-org {
+    position: absolute;
+    left: 0px;
+    top: 20px;
+  }
+
+  .tag-org-name {
+    width: 66px;
+    height: 28px;
+    background: #FF6802;
+    width: 66px;
+    height: 28px;
+    border-radius: 0px 20px 20px 0px;
+  }
+
+  .tag-org-name-test {
+    width: 45px;
+    height: 23px;
+    font-size: 14px;
+    color: #FFFFFF;
+    line-height: 19px;
+    margin-right: 6px;
+  }
+
+  .intermediatecenter {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
\ No newline at end of file
diff --git a/public/react/src/modules/home/home.css b/public/react/src/modules/home/home.css
index 1e97d5ecf..0e5ae2e2d 100644
--- a/public/react/src/modules/home/home.css
+++ b/public/react/src/modules/home/home.css
@@ -1,79 +1,74 @@
 .slider-img-wrapper img {
-    width: 100%;
-    /*border-radius: 15px;*/
-    height: 350px;
-}
-.next-slick-list{
-    width: 100%;
-    position: relative;
-    overflow: hidden;
-    border-radius: 10px;
+  width: 100%;
+  height: 350px;
 }
 
-.user_navlist{
-    /*margin-left: 40px;*/
-}
-.next-slick-list{
-    /*margin-left: 12px;*/
+.next-slick-list {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  border-radius: 10px;
 }
 
-.black_nav_span{
-    display: block;
-    margin: 0px 20px;
-    border-bottom: 1px solid #4B4B4B;
-    padding-left: 8px;
-    color: #FAFAFA;
+.black_nav_span {
+  display: block;
+  margin: 0px 20px;
+  border-bottom: 1px solid #4B4B4B;
+  padding-left: 8px;
+  color: #FAFAFA;
 }
 
-.user_navlist_white{
-    z-index: 100 !important;
+.user_navlist_white {
+  z-index: 100 !important;
 }
 
-.next-slick.next-slick-horizontal.next-slick-outer{
-    height: 350px;
+.next-slick.next-slick-horizontal.next-slick-outer {
+  height: 350px;
 }
 
-.black_nav_list li span a{
-    color:#fff;
+.black_nav_list li span a {
+  color: #fff;
 }
-.black_nav_list li span a:hover{
-    color:#000;
-}
-.black_nav_list li:hover  span a{
-    color:#000;
+
+.black_nav_list li span a:hover {
+  color: #000;
 }
-.little-titles{
-    height: 22px !important;
+
+.black_nav_list li:hover span a {
+  color: #000;
 }
 
-.user_navlist_white a{
-    color: #989898 !important;
+.little-titles {
+  height: 22px !important;
 }
-.user_navlist_white .navlistpanel-line .little-titles a{
-    color: #000 !important;
+
+.user_navlist_white a {
+  color: #989898 !important;
 }
 
-.newnext-loading{
-    display:block;
+.user_navlist_white .navlistpanel-line .little-titles a {
+  color: #000 !important;
 }
 
-.educontentSlider{
-    /*width: 1282px !important;*/
+.newnext-loading {
+  display: block;
 }
-.user_navlist_white{
-    max-height:350px  !important;
-    overflow-y: auto;
+
+.user_navlist_white {
+  max-height: 350px !important;
+  overflow-y: auto;
 }
 
-.iconfontzhangjie{
-    font-size: 10px !important;
-    line-height: 23px;
+.iconfontzhangjie {
+  font-size: 10px !important;
+  line-height: 23px;
 }
-.iconfontshixundaibeijing{
-    font-size: 18px !important;
-    line-height: 24px;
+
+.iconfontshixundaibeijing {
+  font-size: 18px !important;
+  line-height: 24px;
 }
 
-.next-slick.next-slick-horizontal.next-slick-outer{
-    padding:0px !important;
+.next-slick.next-slick-horizontal.next-slick-outer {
+  padding: 0px !important;
 }
\ No newline at end of file
diff --git a/public/react/src/modules/tpm/shixuns/shixun-card.js b/public/react/src/modules/tpm/shixuns/shixun-card.js
index c673ac4e2..edd254427 100644
--- a/public/react/src/modules/tpm/shixuns/shixun-card.js
+++ b/public/react/src/modules/tpm/shixuns/shixun-card.js
@@ -1,8 +1,10 @@
 import React from 'react';
-import { getImageUrl, setImagesUrl, getUrl } from 'educoder';
+import { getImageUrl, setImagesUrl } from 'educoder';
 import { Spin, Tooltip, Rate } from 'antd';
 import './shixunCss/shixunCard.less';
 import Pagination from '../../../components/mini-pagination'
+import NodataPanel from '../../../components/nodata-panel'
+import List from '../../../components/shixun-card-list'
 
 export default ({ middleshixundata, pagination, typepvisible, pages, totalcount, shixunsPage }) => {
   function onPageChange(number) {
@@ -12,76 +14,12 @@ export default ({ middleshixundata, pagination, typepvisible, pages, totalcount,
   return (
     <div className="educontent mb80 shixun-card">
       <Spin spinning={typepvisible} tip="正在获取相关数据..." size="large" style={{ marginTop: '15%' }}>
-        {middleshixundata === undefined ? "" : middleshixundata.length === 0 ? <div className="edu-tab-con-box clearfix edu-txt-center">
-          <img className="edu-nodata-img mb20" src={getUrl("/images/educoder/nodata.png")} />
-          <p className="edu-nodata-p mb20">暂时还没有相关数据哦！</p>
-        </div> : ""}
+        {middleshixundata === undefined ? "" : middleshixundata.length === 0 ? <NodataPanel /> : ""}
 
         <div className="mb20 clearfix">
           <div className="shixun_list_content">
             <div className="square-list clearfix">
-              {middleshixundata === undefined || middleshixundata.length === 0 ? " " : middleshixundata.map((item, key) => {
-                return (
-                  <div className="square-Item" key={item.id} id={item.id}>
-                    {
-                      item.tag_name === null ? "" :
-                        <div className="tag-green">
-                          <span className="tag-name"> {item.tag_name}</span>
-                        </div>
-                    }
-                    {
-                      item.is_jupyter === true ?
-                        <div className="tag-org">
-                          <p className="tag-org-name intermediatecenter"> <span className="tag-org-name-test">Jupyter</span></p>
-                        </div>
-                        : ""}
-
-                    <div className={item.power === false ? "closeSquare" : "none"}>
-                      <img src={getImageUrl("images/educoder/icon/lockclose.svg")}
-                        className="mt80 mb25" />
-                      <p className="font-14 color-white">非试用内容，需要授权</p>
-                    </div>
-
-                    <a href={"/shixuns/" + item.identifier + "/challenges"} className="square-img" target="_blank">
-                      <img src={setImagesUrl(`${item.pic}`)} />
-                    </a>
-
-                    <div className="square-main">
-                      <p className="task-hide">
-                        <a href={"/shixuns/" + item.identifier + "/challenges"} className="justify color-grey-name" title={item.name} target="_blank">
-                          {item.name}
-                        </a>
-                      </p>
-
-                      <p className="clearfix mt8 ml-3">
-                        <span className="rateYoStar fl" style={{ padding: '0px', height: '20px', lineHeight: '19px', cursor: 'default' }} title="">
-                          <Rate key={key} allowHalf defaultValue={item.score_info === null ? 5 : item.score_info} disabled />
-                        </span>
-                        <span className="fl ml25 font-12 color-grey-9 lineh-12 mt5">{item.score_info === null ? "5分" : item.score_info + "分"}</span>
-                      </p>
-
-                      <p className="clearfix mt8 font-12 color-grey-B4">
-                        {item.is_jupyter === false ? <Tooltip placement="bottom" title={"关卡"}>
-                          <span className="mr10 fl squareIconSpan">
-                            <i className="iconfont icon-shixunguanqia fl mr3"></i>{item.challenges_count}
-                          </span>
-                        </Tooltip> : ""}
-
-                        <Tooltip placement="bottom" title={"学习人数"}>
-                          <span className="mr10 fl squareIconSpan" style={{ display: item.stu_num === 0 ? "none" : "block" }}>
-                            <i className="iconfont icon-chengyuan fl mr3"></i>{item.stu_num}
-                          </span>
-                        </Tooltip>
-
-                        <span className="fr color-grey-B3 squareIconSpan">{item.level}</span>
-                      </p>
-
-                    </div>
-                  </div>
-                )
-              })
-              }
-
+              <List list={middleshixundata} />
             </div>
             <div className="both"></div>
             <div className={"educontent edu-txt-center mt10"}
diff --git a/public/react/src/modules/tpm/shixuns/shixunCss/shixunCard.less b/public/react/src/modules/tpm/shixuns/shixunCss/shixunCard.less
index 8ff3390a3..7791839a1 100644
--- a/public/react/src/modules/tpm/shixuns/shixunCss/shixunCard.less
+++ b/public/react/src/modules/tpm/shixuns/shixunCss/shixunCard.less
@@ -62,40 +62,4 @@
     margin-top: 5px;
   }
 
-  .tag-green {
-    position: absolute;
-    left: 10px;
-    bottom: 125px;
-  }
-
-  .tag-org {
-    position: absolute;
-    left: 0px;
-    top: 20px;
-  }
-
-  .tag-org-name {
-    width: 66px;
-    height: 28px;
-    background: #FF6802;
-    width: 66px;
-    height: 28px;
-    border-radius: 0px 20px 20px 0px;
-  }
-
-  .tag-org-name-test {
-    width: 45px;
-    height: 23px;
-    font-size: 14px;
-    color: #FFFFFF;
-    line-height: 19px;
-    margin-right: 6px;
-  }
-
-  .intermediatecenter {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
 }
\ No newline at end of file