update comment style

public/react/src/common/components/comment/CommentIcon.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2019-12-18 10:49:46
  * @LastEditors  : tangjiang
- * @LastEditTime : 2019-12-24 17:05:14
+ * @LastEditTime : 2019-12-24 18:04:52
  */
 import './index.scss';
 import React from 'react';
@@ -26,7 +26,11 @@ function CommentIcon ({
 
   const _className = [undefined, null, ''].includes(count) ? 'comment_count_none' : 'comment_count';
   return (
-    <span className={`comment_icon_count ${props.className}`} onClick={ handleSpanClick }>
+    <span 
+      style={props.style}
+      className={`comment_icon_count ${props.className}`} 
+      onClick={ handleSpanClick }
+    >
       <Icon className="comment_icon" type={type} style={{ color: iconColor }} theme={theme}/>
       <span className={_className}>{ count }</span>
     </span>

public/react/src/common/components/comment/CommentItem.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2019-12-17 17:35:17
  * @LastEditors  : tangjiang
- * @LastEditTime : 2019-12-24 17:11:59
+ * @LastEditTime : 2019-12-24 18:05:18
  */
 import './index.scss';
 import React, { useState } from 'react';
@@ -14,6 +14,7 @@ import { Icon } from 'antd';
 import CommentForm from './CommentForm';
 
 function CommentItem ({
+  isAdmin,
   options,
   confirm,
   comment,
@@ -60,7 +61,7 @@ function CommentItem ({
   const commentAvatar = (author) => ( 
     <img 
       className="item-flex flex-image" 
-      src={author.image_url ? getImageUrl(`/images/${author.image_url}`) : 'https://b-ssl.duitang.com/uploads/item/201511/13/20151113110434_kyReJ.jpeg'}
+      src={author.image_url ? getImageUrl(`images/${author.image_url}`) : 'https://b-ssl.duitang.com/uploads/item/201511/13/20151113110434_kyReJ.jpeg'}
       alt=""
     />
   );
@@ -175,7 +176,8 @@ function CommentItem ({
         {commentAppend(children)}
 
         <div className="comment_icon_area">
-          <CommentIcon 
+          <CommentIcon
+            style={{ display: isAdmin ? 'inline-block' : 'none'}}
             className='comment-icon-margin' 
             type={!hidden ? "eye" : 'eye-invisible'} 
             iconClick={() => handleShowOrHide(id, !hidden ? 1 : 0)}

public/react/src/common/components/comment/CommentList.js

@@ -4,13 +4,15 @@
  * @Github: 
  * @Date: 2019-12-17 17:34:00
  * @LastEditors  : tangjiang
- * @LastEditTime : 2019-12-24 11:30:14
+ * @LastEditTime : 2019-12-24 18:08:07
  */
 import './index.scss';
 import React from 'react';
 import CommentItem from './CommentItem';
+import { Empty } from 'antd';
 function CommentList (props) {
   const {
+    isAdmin,
     commentLists, // 评论列表
     submitChildComment,
     submitDeleteComment,
@@ -21,18 +23,27 @@ function CommentList (props) {
   const {comments = []} = commentLists;
 
   const renderLi = () => {
-    return comments.map((item, index) => {
+    if (comments.length > 0) {
+      return comments.map((item, index) => {
+        return (
+          <CommentItem 
+            isAdmin={isAdmin}
+            key={`item_${index}`}
+            submitChildComment={submitChildComment}
+            submitDeleteComment={submitDeleteComment}
+            comment={item} 
+            likeComment={likeComment}
+            showOrHideComment={showOrHideComment}
+          />
+        );
+      });
+    } else {
       return (
-        <CommentItem 
-          key={`item_${index}`}
-          submitChildComment={submitChildComment}
-          submitDeleteComment={submitDeleteComment}
-          comment={item} 
-          likeComment={likeComment}
-          showOrHideComment={showOrHideComment}
-        />
+        <div className="empty_comment">
+          <Empty />
+        </div>
       );
-    });
+    }
   }
 
   return (

public/react/src/common/components/comment/index.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2019-12-17 17:31:33
  * @LastEditors  : tangjiang
- * @LastEditTime : 2019-12-24 15:47:07
+ * @LastEditTime : 2019-12-24 18:03:21
  */
 import React from 'react';
 // import CommentForm from './CommentForm';
@@ -15,6 +15,7 @@ function Comment (props) {
     commentLists,
     // addComment,
     // cancelComment,
+    isAdmin,
     addChildComment,
     likeComment,
     showOrHideComment,
@@ -31,6 +32,7 @@ function Comment (props) {
         onSubmit={addComment}
       /> */}
       <CommentList 
+        isAdmin={isAdmin}
         likeComment={likeComment}
         showOrHideComment={showOrHideComment}
         commentLists={commentLists}

public/react/src/common/components/comment/index.scss

@@ -9,7 +9,13 @@ $ml: 20px;
 .comment_list_wrapper{
   box-sizing: border-box;
   // border-top: 1px solid $bdColor;
-
+  .empty_comment{
+    display: flex;
+    height: calc(100vh - 200px);
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+  }
   .comment_item_show{
     display: block;
   }

public/react/src/modules/developer/studentStudy/leftpane/comment/index.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2019-11-27 09:49:35
  * @LastEditors  : tangjiang
- * @LastEditTime : 2019-12-24 17:10:14
+ * @LastEditTime : 2019-12-24 17:58:26
  */
 import './index.scss';
 import React, { useEffect } from 'react';
@@ -15,6 +15,7 @@ import actions from '../../../../../redux/actions';
 const CommentTask = (props) => {
 
   const {
+    isAdmin,
     identifier,
     commentLists,
     addComment,
@@ -74,6 +75,7 @@ const CommentTask = (props) => {
   return (
     <div className="task_comment_task">
       <Comment 
+        isAdmin={isAdmin}
         commentLists={commentLists}
         addComment={handleAddComment}
         addChildComment={handleAddChildComment}
@@ -92,8 +94,10 @@ const mapStateToProps = (state) => {
   const {
     comment_identifier
   } = state.ojForUserReducer;
+  const { userInfo } = state.userReducer;
   return {
     commentLists,
+    isAdmin: userInfo.admin,
     identifier: comment_identifier
   }
 }