feature: 评论移动端初适配

src/App.js

@@ -411,6 +411,8 @@ class App extends Component {
       sDeleteReply: this.sDeleteReply
     };
 
+    console.log(this.props.isMobile);
+
     return (
       <CommentContext.Provider value={value}>
         <div className="comment">
@@ -445,6 +447,7 @@ App.propTypes = {
   limit: PropTypes.number, // 一次加载评论数量
   onPageChange: PropTypes.func, // 页码变化回调
   onGetMoreBtnClick: PropTypes.func, // 点击查看更多按钮回调
+  isMobile: PropTypes.bool,
   onDelete: PropTypes.func
 };
 

src/components/CommentBox/index.js

@@ -43,7 +43,7 @@ class CommentBox extends Component {
    * @param {boolean} isNoMoreReply 是否没有更多回复
    */
   renderReplies(replies, replyCount, isNoMoreReply) {
-    const { commentId } = this.props;
+    const { commentId, isMobile } = this.props;
     const { showReply } = this.state;
     if (showReply && replies && replies.length) {
       const len = replies.length;
@@ -54,21 +54,21 @@ class CommentBox extends Component {
               return [
                 <ContentItem
                   commentId={commentId}
+                  isMobile={isMobile}
                   replyId={item.id}
                   key={item.id}
                   content={item}
                   action="replyToReply" // 回复的回复
                 />,
                 <div className="comment-more-box" key="show_more_button">
-                  {!isNoMoreReply &&
-                    replyCount !== len && (
-                      <span
-                        className="comment-show-more"
-                        onClick={() => this.handleGetMoreReply(commentId)}
-                      >
-                        查看更多回复
-                      </span>
-                    )}
+                  {!isNoMoreReply && replyCount !== len && (
+                    <span
+                      className="comment-show-more"
+                      onClick={() => this.handleGetMoreReply(commentId)}
+                    >
+                      查看更多回复
+                    </span>
+                  )}
 
                   <a
                     style={{ float: "right" }}
@@ -81,6 +81,7 @@ class CommentBox extends Component {
             }
             return (
               <ContentItem
+                isMobile={isMobile}
                 commentId={commentId}
                 replyId={item.id}
                 key={item.id}
@@ -96,11 +97,13 @@ class CommentBox extends Component {
   }
 
   render() {
-    const { content } = this.props;
+    const { content, isMobile } = this.props;
     const { showReply } = this.state;
+
     return (
       <div>
         <ContentItem
+          isMobile={isMobile}
           content={content}
           onShowReply={this.handleToggleReply}
           showReply={showReply}

src/components/CommentList/index.js

@@ -67,7 +67,7 @@ class CommentList extends Component {
   }
 
   render() {
-    const { list, total, loading } = this.props.app;
+    const { list, total, loading, isMobile } = this.props.app;
 
     const spinning = Boolean(
       loading.sGetComment || loading.sCommentFavor || loading.sReplyFavor
@@ -77,7 +77,12 @@ class CommentList extends Component {
         <Spin spinning={spinning}>
           <div>共 {total} 条评论</div>
           {list.map(item => (
-            <CommentBox content={item} key={item.id} commentId={item.id} />
+            <CommentBox
+              isMobile={isMobile}
+              content={item}
+              key={item.id}
+              commentId={item.id}
+            />
           ))}
           {this.renderPagination()}
         </Spin>

src/components/ContentItem/index.css

@@ -10,18 +10,28 @@
   width: 40px;
 }
 
-.comment-item-right {
+.comment-item-middle {
   display: inline-block;
-  width: 90%;
+  width: 80%;
   margin-left: 10px;
   margin-bottom: 20px;
 }
 
+.comment-item-right {
+  display: inline-block;
+  vertical-align: top;
+  width: 10%;
+}
+
 .comment-item-content {
   margin: 10px 0;
   word-break: break-all;
 }
 
+.comment-item-top-right {
+  margin: 20px auto;
+}
+
 .comment-item-bottom {
   margin: 20px auto;
 }
@@ -81,8 +91,12 @@
   margin-right: 10px;
 }
 
+.text-center {
+  text-align: center;
+}
+
 @media screen and (max-width: 616px) and (min-width: 449px) {
-  .comment-item-right {
+  .comment-item-middle {
     display: inline-block;
     width: 85%;
     margin-left: 10px;
@@ -90,17 +104,17 @@
 }
 
 @media screen and (max-width: 449px) and (min-width: 365px) {
-  .comment-item-right {
+  .comment-item-middle {
     display: inline-block;
-    width: 80%;
+    width: 70%;
     margin-left: 10px;
   }
 }
 
 @media screen and (max-width: 365px) {
-  .comment-item-right {
+  .comment-item-middle {
     display: inline-block;
-    width: 75%;
+    width: 65%;
     margin-left: 10px;
   }
 }

src/components/ContentItem/index.js

@@ -75,6 +75,7 @@ class CommentItem extends Component {
       action,
       showReply,
       onShowReply,
+      isMobile,
       app
     } = this.props;
 
@@ -105,39 +106,26 @@ class CommentItem extends Component {
       }
     }
 
-    return (
-      <div className="comment-item-box">
-        <div className="comment-item-left">
-          <Avatar src={content.user_avatar || avatar} size="large" />
-        </div>
-        <div className="comment-item-right">
-          <div>
-            {/* <a href={`/${content.user_id}`}>
-              {content.user_name || "暂无昵称"}
-            </a> */}
-            <strong>{content.user_name || "游客"}</strong>
-            <span style={{ marginLeft: 10 }}>
-              <Tooltip
-                placement="top"
-                title={dayjs(content.created * 1000).format(
-                  "YYYY-MM-DD HH:mm:ss"
-                )}
-              >
-                {dayjs(content.created * 1000).fromNow()}
-              </Tooltip>
-            </span>
+    if (isMobile) {
+      return (
+        <div className="comment-item-box">
+          <div className="comment-item-left">
+            <Avatar src={content.user_avatar || avatar} size="large" />
           </div>
-          <div
-            className="comment-item-content"
-            dangerouslySetInnerHTML={{
-              __html: renderContent(
-                this.renderTextWithReply(newContent, content)
-              )
-            }}
-          />
-          {// image为空时不渲染comment-item-image
-          imageList.length > 0 &&
-            imageList[0] !== "" && (
+          <div className="comment-item-middle">
+            <div>
+              <strong>{content.user_name || "游客"}</strong>
+            </div>
+            <div
+              className="comment-item-content"
+              dangerouslySetInnerHTML={{
+                __html: renderContent(
+                  this.renderTextWithReply(newContent, content)
+                )
+              }}
+            />
+            {// image为空时不渲染comment-item-image
+            imageList.length > 0 && imageList[0] !== "" && (
               <div className="comment-item-image">
                 {!this.state.showPreviewer &&
                   imgs.map((item, index) => {
@@ -184,6 +172,160 @@ class CommentItem extends Component {
                 <div className="clearfix" />
               </div>
             )}
+            <div>
+              <Tooltip
+                placement="top"
+                title={dayjs(content.created * 1000).format(
+                  "YYYY-MM-DD HH:mm:ss"
+                )}
+              >
+                {dayjs(content.created * 1000).fromNow()}
+              </Tooltip>
+            </div>
+            <div className="comment-item-bottom">
+              {content.reply_count ? (
+                <div>
+                  <a className="comment-item-bottom-left" onClick={onShowReply}>
+                    {content.reply_count} 条回复
+                    {showReply ? <Icon type="up" /> : <Icon type="down" />}
+                  </a>
+                </div>
+              ) : null}
+              {app.userId === content.user_id && (
+                <Popconfirm
+                  title="确定要删除吗?"
+                  onConfirm={() => {
+                    if (replyId) {
+                      app.sDeleteReply(content.id, commentId);
+                      return;
+                    }
+                    app.sDeleteComment(content.id);
+                  }}
+                  okText="确定"
+                  cancelText="取消"
+                >
+                  <a className="comment-item-bottom-right">&nbsp; 删除</a>
+                </Popconfirm>
+              )}
+            </div>
+          </div>
+
+          <div className="comment-item-right">
+            <div
+              className="comment-item-top-right"
+              onClick={() => {
+                if (replyId) {
+                  // 如果有 replyId，则说明是评论的回复
+                  app.sReplyFavor(content.id, commentId, content.favored);
+                  return;
+                }
+                app.sCommentFavor(content.id, content.favored);
+              }}
+            >
+              <div className="text-center">
+                <Icon
+                  type="heart"
+                  className={
+                    content.favored
+                      ? "comment-favor comment-favored"
+                      : "comment-favor"
+                  }
+                />
+              </div>
+              <div className="text-center">{content.favor_count}</div>
+            </div>
+          </div>
+          {showInput && (
+            <CommentInput
+              content={app.children}
+              action={action}
+              replyId={replyId}
+              commentId={commentId}
+              callback={this.handleToggleInput}
+            />
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <div className="comment-item-box">
+        <div className="comment-item-left">
+          <Avatar src={content.user_avatar || avatar} size="large" />
+        </div>
+        <div className="comment-item-right">
+          <div>
+            {/* <a href={`/${content.user_id}`}>
+              {content.user_name || "暂无昵称"}
+            </a> */}
+            <strong>{content.user_name || "游客"}</strong>
+            <span style={{ marginLeft: 10 }}>
+              <Tooltip
+                placement="top"
+                title={dayjs(content.created * 1000).format(
+                  "YYYY-MM-DD HH:mm:ss"
+                )}
+              >
+                {dayjs(content.created * 1000).fromNow()}
+              </Tooltip>
+            </span>
+          </div>
+          <div
+            className="comment-item-content"
+            dangerouslySetInnerHTML={{
+              __html: renderContent(
+                this.renderTextWithReply(newContent, content)
+              )
+            }}
+          />
+          {// image为空时不渲染comment-item-image
+          imageList.length > 0 && imageList[0] !== "" && (
+            <div className="comment-item-image">
+              {!this.state.showPreviewer &&
+                imgs.map((item, index) => {
+                  if (item.type === "divider") {
+                    return (
+                      <div className="comment-item-image-wrapper" key={index}>
+                        <div className="comment-img-divider" />
+                        {/* <img src={item} alt={item} className="comment-img" /> */}
+                      </div>
+                    );
+                  }
+                  return (
+                    <div
+                      className="comment-item-image-wrapper"
+                      key={index}
+                      onClick={() => {
+                        let i = index;
+                        if (needClear) {
+                          if (index > 3) {
+                            i -= 1;
+                          }
+                          if (index > 7) {
+                            i -= 1;
+                          }
+                        }
+                        this.showPreviewer(i);
+                      }}
+                    >
+                      <div
+                        style={{ backgroundImage: `url(${item})` }}
+                        className="comment-img-thumbnail"
+                      />
+                      {/* <img src={item} alt={item} className="comment-img" /> */}
+                    </div>
+                  );
+                })}
+              {this.state.showPreviewer && (
+                <ImagePreviewer
+                  list={imageList}
+                  index={this.state.previewerIndex}
+                  onFold={this.hidePreviewer}
+                />
+              )}
+              <div className="clearfix" />
+            </div>
+          )}
           <div className="comment-item-bottom">
             {content.reply_count ? (
               <div>

src/index.js

@@ -4,7 +4,14 @@ import App, { Editor } from "./App";
 // import registerServiceWorker from "./registerServiceWorker";
 
 const Index = props => (
-  <App showAlertComment showAlertReply showAlertFavor showError {...props}>
+  <App
+    isMobile
+    showAlertComment
+    showAlertReply
+    showAlertFavor
+    showError
+    {...props}
+  >
     <Editor maxUpload={9} autoFocus />
   </App>
 );