支持两种分页模式

README.md

@@ -27,6 +27,7 @@ import Comment, { Editor, RenderText } from 'comment';
 | onError          | function(msg) |                                    | false    | 错误回调, 出错了会被调用                                                          |
 | userId           | number        |                                    | false    | 用户id, comment内部不维护用户id, 调用组件时传递过来, 目前用于判断是否显示删除按钮 |
 | token            | string        |                                    | false    | [deprecated] token，用于身份认证，非必须。默认使用 cookie                         |
+| pageType         | string        | more                               | false    | 分页类别， more-加载更多 pagination-页码                                          |
 
 
 ## Editor

lib/App.css

@@ -3,20 +3,28 @@
   padding: 10px;
   margin-bottom: 100px;
 }
-.comment .ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {
+
+.comment .ant-spin-nested-loading>div>.ant-spin .ant-spin-dot {
   position: fixed;
   top: 45%;
 }
+
 .comment-header-tag {
   border: 1px solid #cecece;
   border-radius: 0;
   color: #666;
 }
+
 .comment-header-tip {
   color: #5198eb;
   margin-right: 15px;
   margin-left: 5px;
 }
+
 .comment-header-text {
   color: #666;
 }
+
+.comment-img {
+  max-width: 100%;
+}

lib/App.js

@@ -164,6 +164,8 @@ var App = function (_Component) {
           _ref$page = _ref.page,
           page = _ref$page === undefined ? 1 : _ref$page;
 
+      var pageType = this.props.pageType;
+
       this.handleChangeLoading("sGetComment", true);
       var _props = this.props,
           API = _props.API,
@@ -178,15 +180,21 @@ var App = function (_Component) {
 
         if (list) {
           var newList = list;
-          if (page > 1) {
-            var oldList = _this2.state.list;
-            // 删除临时数据
-
-            oldList = oldList.filter(function (o) {
-              return !o.isTemporary;
-            });
-            newList = oldList.concat(newList);
+          var oldList = _this2.state.list;
+
+          if (pageType === 'more') {
+            if (page > 1) {
+              // 删除临时数据
+              oldList = oldList.filter(function (o) {
+                return !o.isTemporary;
+              });
+              newList = oldList.concat(newList);
+            }
+          } else if (pageType === 'pagination') {
+            // TODO 滚动到顶部
+            window.scrollTo(0, 0);
           }
+
           _this2.setState({
             list: newList,
             page: page,
@@ -554,7 +562,8 @@ App.propTypes = {
   showAlertFavor: _propTypes2.default.bool, // 点赞/取消点赞成功之后，是否通过 Antd 的 Message 组件进行提示
   showError: _propTypes2.default.bool, // 是否使用Antd的Message组件提示错误信息
   onError: _propTypes2.default.func, // 错误回调, 出错了会被调用
-  userId: _propTypes2.default.number // 用户id, comment内部不维护用户id, 调用组件时传递过来, 目前用于判断是否显示删除按钮
+  userId: _propTypes2.default.number, // 用户id, comment内部不维护用户id, 调用组件时传递过来, 目前用于判断是否显示删除按钮
+  pageType: _propTypes2.default.string // 分页类型
 };
 
 App.defaultProps = {
@@ -564,7 +573,8 @@ App.defaultProps = {
   showAlertComment: false,
   showAlertReply: false,
   showAlertFavor: false,
-  showError: true
+  showError: true,
+  pageType: "more"
 };
 
 exports.Editor = _Editor2.default;

lib/components/CommentList/index.css

@@ -8,7 +8,12 @@
   margin: 40px auto;
   transition: all 0.3s;
 }
+
 .comment-list-show-more:hover {
   background-color: #f5f5f5;
   color: #1890ff;
 }
+
+.comment-list-pagination {
+  text-align: center;
+}

lib/components/CommentList/index.js

@@ -8,10 +8,16 @@ var _spin = require("antd/es/spin");
 
 var _spin2 = _interopRequireDefault(_spin);
 
+var _pagination = require("antd/es/pagination");
+
+var _pagination2 = _interopRequireDefault(_pagination);
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 require("antd/es/spin/style/css");
 
+require("antd/es/pagination/style/css");
+
 var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
@@ -26,6 +32,8 @@ var _CommentBox2 = _interopRequireDefault(_CommentBox);
 
 require("./index.css");
 
+var _constant = require("../../constant");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -52,16 +60,58 @@ var CommentList = function (_Component) {
       this.props.app.sGetComment();
     }
   }, {
-    key: "render",
-    value: function render() {
+    key: "renderPagination",
+    value: function renderPagination() {
       var _props$app = this.props.app,
           list = _props$app.list,
           total = _props$app.total,
           page = _props$app.page,
-          loading = _props$app.loading,
+          pageType = _props$app.pageType,
           isNoMoreComment = _props$app.isNoMoreComment,
           sGetComment = _props$app.sGetComment;
 
+      if (pageType === 'more') {
+        if (!isNoMoreComment && list.length !== total) {
+          return _react2.default.createElement(
+            "div",
+            {
+              className: "comment-list-show-more",
+              onClick: function onClick() {
+                return sGetComment({ page: page + 1 });
+              }
+            },
+            _react2.default.createElement(
+              "span",
+              null,
+              "\u67E5\u770B\u66F4\u591A\u8BC4\u8BBA"
+            )
+          );
+        } else {
+          return null;
+        }
+      } else if (pageType === 'pagination') {
+        return _react2.default.createElement(
+          "div",
+          { className: "comment-list-pagination" },
+          _react2.default.createElement(_pagination2.default, {
+            pageSize: _constant.LIMIT,
+            current: page,
+            total: total,
+            onChange: function onChange(p) {
+              sGetComment({ page: p });
+            }
+          })
+        );
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _props$app2 = this.props.app,
+          list = _props$app2.list,
+          total = _props$app2.total,
+          loading = _props$app2.loading;
+
 
       var spinning = Boolean(loading.sGetComment || loading.sCommentFavor || loading.sReplyFavor);
       return _react2.default.createElement(
@@ -80,20 +130,7 @@ var CommentList = function (_Component) {
           list.map(function (item) {
             return _react2.default.createElement(_CommentBox2.default, { content: item, key: item.id, commentId: item.id });
           }),
-          !isNoMoreComment && list.length !== total && _react2.default.createElement(
-            "div",
-            {
-              className: "comment-list-show-more",
-              onClick: function onClick() {
-                return sGetComment({ page: page + 1 });
-              }
-            },
-            _react2.default.createElement(
-              "span",
-              null,
-              "\u67E5\u770B\u66F4\u591A\u8BC4\u8BBA"
-            )
-          )
+          this.renderPagination()
         )
       );
     }

lib/components/CommentList/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CommentList/index.js"],"names":["CommentList","props","state","app","sGetComment","list","total","page","loading","isNoMoreComment","spinning","Boolean","sCommentFavor","sReplyFavor","map","item","id","length","Component","propTypes"],"mappings":";;;;;;;;;;;;;;AAAA;;;;AAEA;;;;AACA;;;;AACA;;;;;;;;;;IAEMA,W;;;AACJ,uBAAYC,KAAZ,EAAmB;AAAA;;AAAA,0HACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa,EAAb;AAFiB;AAGlB;;;;yCAEoB;AACnB,WAAKD,KAAL,CAAWE,GAAX,CAAeC,WAAf;AACD;;;6BAEQ;AAAA,uBAQH,KAAKH,KAAL,CAAWE,GARR;AAAA,UAELE,IAFK,cAELA,IAFK;AAAA,UAGLC,KAHK,cAGLA,KAHK;AAAA,UAILC,IAJK,cAILA,IAJK;AAAA,UAKLC,OALK,cAKLA,OALK;AAAA,UAMLC,eANK,cAMLA,eANK;AAAA,UAOLL,WAPK,cAOLA,WAPK;;;AAUP,UAAMM,WAAWC,QACfH,QAAQJ,WAAR,IAAuBI,QAAQI,aAA/B,IAAgDJ,QAAQK,WADzC,CAAjB;AAGA,aACE;AAAA;AAAA;AACE;AAAA;AAAA,YAAM,UAAUH,QAAhB;AACE;AAAA;AAAA;AAAA;AAAQJ,iBAAR;AAAA;AAAA,WADF;AAEGD,eAAKS,GAAL,CAAS;AAAA,mBACR,8BAAC,oBAAD,IAAY,SAASC,IAArB,EAA2B,KAAKA,KAAKC,EAArC,EAAyC,WAAWD,KAAKC,EAAzD,GADQ;AAAA,WAAT,CAFH;AAMG,WAACP,eAAD,IACCJ,KAAKY,MAAL,KAAgBX,KADjB,IAEG;AAAA;AAAA;AACE,yBAAU,wBADZ;AAEE,uBAAS;AAAA,uBAAMF,YAAY,EAAEG,MAAMA,OAAO,CAAf,EAAZ,CAAN;AAAA;AAFX;AAIE;AAAA;AAAA;AAAA;AAAA;AAJF;AARN;AADF,OADF;AAoBD;;;;EA3CuBW,gB;;AA8C1BlB,YAAYmB,SAAZ,GAAwB,EAAxB;;kBAEe,uBAAQnB,WAAR,C","file":"index.js","sourcesContent":["import React, { Component } from \"react\";\r\nimport { Spin } from \"antd\";\r\nimport Comment from \"../../Comment\";\r\nimport CommentBox from \"../CommentBox\";\r\nimport \"./index.css\";\r\n\r\nclass CommentList extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {};\r\n  }\r\n\r\n  componentWillMount() {\r\n    this.props.app.sGetComment();\r\n  }\r\n\r\n  render() {\r\n    const {\r\n      list,\r\n      total,\r\n      page,\r\n      loading,\r\n      isNoMoreComment,\r\n      sGetComment\r\n    } = this.props.app;\r\n\r\n    const spinning = Boolean(\r\n      loading.sGetComment || loading.sCommentFavor || loading.sReplyFavor\r\n    );\r\n    return (\r\n      <div>\r\n        <Spin spinning={spinning}>\r\n          <div>共 {total} 条评论</div>\r\n          {list.map(item => (\r\n            <CommentBox content={item} key={item.id} commentId={item.id} />\r\n          ))}\r\n\r\n          {!isNoMoreComment &&\r\n            list.length !== total && (\r\n              <div\r\n                className=\"comment-list-show-more\"\r\n                onClick={() => sGetComment({ page: page + 1 })}\r\n              >\r\n                <span>查看更多评论</span>\r\n              </div>\r\n            )}\r\n        </Spin>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\nCommentList.propTypes = {};\r\n\r\nexport default Comment(CommentList);\r\n"]}
+{"version":3,"sources":["../../../src/components/CommentList/index.js"],"names":["CommentList","props","state","app","sGetComment","list","total","page","pageType","isNoMoreComment","length","LIMIT","p","loading","spinning","Boolean","sCommentFavor","sReplyFavor","map","item","id","renderPagination","Component","propTypes"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;AAEA;;;;AACA;;;;AACA;;AACA;;;;;;;;;;IAEMA,W;;;AACJ,uBAAYC,KAAZ,EAAmB;AAAA;;AAAA,0HACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa,EAAb;AAFiB;AAGlB;;;;yCAEoB;AACnB,WAAKD,KAAL,CAAWE,GAAX,CAAeC,WAAf;AACD;;;uCAEkB;AAAA,uBAQb,KAAKH,KAAL,CAAWE,GARE;AAAA,UAEfE,IAFe,cAEfA,IAFe;AAAA,UAGfC,KAHe,cAGfA,KAHe;AAAA,UAIfC,IAJe,cAIfA,IAJe;AAAA,UAKfC,QALe,cAKfA,QALe;AAAA,UAMfC,eANe,cAMfA,eANe;AAAA,UAOfL,WAPe,cAOfA,WAPe;;AASjB,UAAII,aAAa,MAAjB,EAAyB;AACvB,YAAI,CAACC,eAAD,IAAoBJ,KAAKK,MAAL,KAAgBJ,KAAxC,EAA+C;AAC7C,iBACE;AAAA;AAAA;AACE,yBAAU,wBADZ;AAEE,uBAAS;AAAA,uBAAMF,YAAY,EAAEG,MAAMA,OAAO,CAAf,EAAZ,CAAN;AAAA;AAFX;AAIE;AAAA;AAAA;AAAA;AAAA;AAJF,WADF;AAQD,SATD,MASO;AACL,iBAAO,IAAP;AACD;AACF,OAbD,MAaO,IAAIC,aAAa,YAAjB,EAA+B;AACpC,eACE;AAAA;AAAA,YAAK,WAAU,yBAAf;AACE;AACE,sBAAUG,eADZ;AAEE,qBAASJ,IAFX;AAGE,mBAAOD,KAHT;AAIE,sBAAU,kBAACM,CAAD,EAAO;AACfR,0BAAY,EAAEG,MAAMK,CAAR,EAAZ;AACD;AANH;AADF,SADF;AAYD;AACF;;;6BAEQ;AAAA,wBAKH,KAAKX,KAAL,CAAWE,GALR;AAAA,UAELE,IAFK,eAELA,IAFK;AAAA,UAGLC,KAHK,eAGLA,KAHK;AAAA,UAILO,OAJK,eAILA,OAJK;;;AAOP,UAAMC,WAAWC,QACfF,QAAQT,WAAR,IAAuBS,QAAQG,aAA/B,IAAgDH,QAAQI,WADzC,CAAjB;AAGA,aACE;AAAA;AAAA;AACE;AAAA;AAAA,YAAM,UAAUH,QAAhB;AACE;AAAA;AAAA;AAAA;AAAQR,iBAAR;AAAA;AAAA,WADF;AAEGD,eAAKa,GAAL,CAAS;AAAA,mBACR,8BAAC,oBAAD,IAAY,SAASC,IAArB,EAA2B,KAAKA,KAAKC,EAArC,EAAyC,WAAWD,KAAKC,EAAzD,GADQ;AAAA,WAAT,CAFH;AAMI,eAAKC,gBAAL;AANJ;AADF,OADF;AAaD;;;;EAvEuBC,gB;;AA0E1BtB,YAAYuB,SAAZ,GAAwB,EAAxB;;kBAEe,uBAAQvB,WAAR,C","file":"index.js","sourcesContent":["import React, { Component } from \"react\";\r\nimport { Spin, Pagination } from \"antd\";\r\nimport Comment from \"../../Comment\";\r\nimport CommentBox from \"../CommentBox\";\r\nimport \"./index.css\";\r\nimport { LIMIT } from \"../../constant\";\r\n\r\nclass CommentList extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {};\r\n  }\r\n\r\n  componentWillMount() {\r\n    this.props.app.sGetComment();\r\n  }\r\n\r\n  renderPagination() {\r\n    const {\r\n      list,\r\n      total,\r\n      page,\r\n      pageType,\r\n      isNoMoreComment,\r\n      sGetComment\r\n    } = this.props.app;\r\n    if (pageType === 'more') {\r\n      if (!isNoMoreComment && list.length !== total) {\r\n        return (\r\n          <div\r\n            className=\"comment-list-show-more\"\r\n            onClick={() => sGetComment({ page: page + 1 })}\r\n          >\r\n            <span>查看更多评论</span>\r\n          </div>\r\n        );\r\n      } else {\r\n        return null;\r\n      }\r\n    } else if (pageType === 'pagination') {\r\n      return (\r\n        <div className=\"comment-list-pagination\">\r\n          <Pagination\r\n            pageSize={LIMIT}\r\n            current={page}\r\n            total={total}\r\n            onChange={(p) => {\r\n              sGetComment({ page: p })\r\n            }}\r\n          />\r\n        </div>\r\n      )\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const {\r\n      list,\r\n      total,\r\n      loading,\r\n    } = this.props.app;\r\n\r\n    const spinning = Boolean(\r\n      loading.sGetComment || loading.sCommentFavor || loading.sReplyFavor\r\n    );\r\n    return (\r\n      <div>\r\n        <Spin spinning={spinning}>\r\n          <div>共 {total} 条评论</div>\r\n          {list.map(item => (\r\n            <CommentBox content={item} key={item.id} commentId={item.id} />\r\n          ))}\r\n          {\r\n            this.renderPagination()\r\n          }\r\n        </Spin>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\nCommentList.propTypes = {};\r\n\r\nexport default Comment(CommentList);\r\n"]}

lib/components/ContentItem/index.css

@@ -3,39 +3,52 @@
   padding: 15px 5px 0 5px;
   border-top: 1px solid #eee;
 }
+
 .comment-item-left {
   display: inline-block;
   vertical-align: top;
   width: 40px;
 }
+
 .comment-item-right {
   display: inline-block;
   width: 90%;
   margin-left: 10px;
   margin-bottom: 20px;
 }
+
 .comment-item-content {
   margin: 10px 0;
   word-break: break-all;
 }
+
 .comment-item-bottom {
   margin: 20px auto;
 }
+
 .comment-item-bottom-left {
   float: left;
   user-select: none;
 }
+
 .comment-item-bottom-right {
   float: right;
   margin-left: 5px;
   cursor: pointer;
 }
+
 .comment-favor {
   font-size: 20px;
 }
+
 .comment-favored {
   color: #4a90e2;
 }
+
+.comment-item-image .comment-img {
+  margin-right: 10px;
+}
+
 @media screen and (max-width: 616px) and (min-width: 449px) {
   .comment-item-right {
     display: inline-block;
@@ -43,6 +56,7 @@
     margin-left: 10px;
   }
 }
+
 @media screen and (max-width: 449px) and (min-width: 365px) {
   .comment-item-right {
     display: inline-block;
@@ -50,10 +64,11 @@
     margin-left: 10px;
   }
 }
+
 @media screen and (max-width: 365px) {
   .comment-item-right {
     display: inline-block;
     width: 75%;
     margin-left: 10px;
   }
-}
+}

lib/components/ContentItem/index.js

@@ -188,12 +188,20 @@ var CommentItem = function (_Component) {
             "div",
             { className: "comment-item-image" },
             imageList.map(function (item, index) {
-              return _react2.default.createElement("img", {
-                key: index,
-                src: item,
-                alt: item,
-                style: { maxWidth: "100%" }
-              });
+              return _react2.default.createElement(
+                "a",
+                {
+                  href: item,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  key: index
+                },
+                _react2.default.createElement("img", {
+                  src: item,
+                  alt: item,
+                  className: "comment-img"
+                })
+              );
             })
           ),
           _react2.default.createElement(

lib/helper.js

@@ -74,12 +74,12 @@ function renderContent(content, onClick) {
     // 兼容旧的评
     // 因为旧的评论用 [img url] 方式存储的
     if (isUrl(src)) {
-      return "<br/><img src=\"" + src + "\" alt=\"" + src + "\" style=\"max-width: 100%\" />";
+      return "<a href=\"" + src + "\" rel=\"noopener noreferrer\" target=\"_blank\"><img class=\"comment-img\" src=\"" + src + "\" alt=\"" + src + "\" /></a>";
     }
     // 如果不存在对应的表情, 则返回原文
     var emoji = emojiObejct[src];
     if (emoji) {
-      return "<img src=\"" + _emoji.prefixUrl + emoji.value + "." + emoji.ext + "\" alt=\"" + emoji.title + "\" />";
+      return "<img class=\"comment-emoji\" src=\"" + _emoji.prefixUrl + emoji.value + "." + emoji.ext + "\" alt=\"" + emoji.title + "\" />";
     }
     return "[" + src + "]";
   }).replace(innerUrl, function (a, b) {

lib/index.js

@@ -82,6 +82,7 @@ var Index = function (_Component) {
           showAlertFavor: true,
           showError: false,
           userId: 71299,
+          pageType: "pagination",
           onError: function onError(msg, _ref2) {
             var response = _ref2.response;
 

src/App.css

@@ -3,20 +3,28 @@
   padding: 10px;
   margin-bottom: 100px;
 }
+
 .comment .ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {
   position: fixed;
   top: 45%;
 }
+
 .comment-header-tag {
   border: 1px solid #cecece;
   border-radius: 0;
   color: #666;
 }
+
 .comment-header-tip {
   color: #5198eb;
   margin-right: 15px;
   margin-left: 5px;
 }
+
 .comment-header-text {
   color: #666;
 }
+
+.comment-img {
+  max-width: 100%;
+}

src/App.js

@@ -89,6 +89,7 @@ class App extends Component {
    * 获取评论列表
    */
   sGetComment({ page = 1 } = {}) {
+    const { pageType } = this.props;
     this.handleChangeLoading("sGetComment", true);
     const { API, type, businessId } = this.props;
     this.axios
@@ -99,12 +100,18 @@ class App extends Component {
         const { list, page, total } = response.data;
         if (list) {
           let newList = list;
-          if (page > 1) {
-            let { list: oldList } = this.state;
-            // 删除临时数据
-            oldList = oldList.filter(o => !o.isTemporary);
-            newList = oldList.concat(newList);
+          let { list: oldList } = this.state;
+          if (pageType === "more") {
+            if (page > 1) {
+              // 删除临时数据
+              oldList = oldList.filter(o => !o.isTemporary);
+              newList = oldList.concat(newList);
+            }
+          } else if (pageType === "pagination") {
+            // TODO 滚动到顶部
+            window.scrollTo(0, 0);
           }
+
           this.setState({
             list: newList,
             page,
@@ -429,7 +436,8 @@ App.propTypes = {
   showAlertFavor: PropTypes.bool, // 点赞/取消点赞成功之后，是否通过 Antd 的 Message 组件进行提示
   showError: PropTypes.bool, // 是否使用Antd的Message组件提示错误信息
   onError: PropTypes.func, // 错误回调, 出错了会被调用
-  userId: PropTypes.number // 用户id, comment内部不维护用户id, 调用组件时传递过来, 目前用于判断是否显示删除按钮
+  userId: PropTypes.number, // 用户id, comment内部不维护用户id, 调用组件时传递过来, 目前用于判断是否显示删除按钮
+  pageType: PropTypes.string // 分页类型
 };
 
 App.defaultProps = {
@@ -439,7 +447,8 @@ App.defaultProps = {
   showAlertComment: false,
   showAlertReply: false,
   showAlertFavor: false,
-  showError: true
+  showError: true,
+  pageType: "more"
 };
 
 export { Editor, RenderText };

src/components/CommentList/index.css

@@ -8,7 +8,12 @@
   margin: 40px auto;
   transition: all 0.3s;
 }
+
 .comment-list-show-more:hover {
   background-color: #f5f5f5;
   color: #1890ff;
 }
+
+.comment-list-pagination {
+  text-align: center;
+}

src/components/CommentList/index.js

@@ -1,8 +1,9 @@
 import React, { Component } from "react";
-import { Spin } from "antd";
+import { Spin, Pagination } from "antd";
 import Comment from "../../Comment";
 import CommentBox from "../CommentBox";
 import "./index.css";
+import { LIMIT } from "../../constant";
 
 class CommentList extends Component {
   constructor(props) {
@@ -14,15 +15,46 @@ class CommentList extends Component {
     this.props.app.sGetComment();
   }
 
-  render() {
+  renderPagination() {
     const {
       list,
       total,
       page,
-      loading,
+      pageType,
       isNoMoreComment,
       sGetComment
     } = this.props.app;
+    if (pageType === "more") {
+      if (!isNoMoreComment && list.length !== total) {
+        return (
+          <div
+            className="comment-list-show-more"
+            onClick={() => sGetComment({ page: page + 1 })}
+          >
+            <span>查看更多评论</span>
+          </div>
+        );
+      } else {
+        return null;
+      }
+    } else if (pageType === "pagination") {
+      return (
+        <div className="comment-list-pagination">
+          <Pagination
+            pageSize={LIMIT}
+            current={page}
+            total={total}
+            onChange={p => {
+              sGetComment({ page: p });
+            }}
+          />
+        </div>
+      );
+    }
+  }
+
+  render() {
+    const { list, total, loading } = this.props.app;
 
     const spinning = Boolean(
       loading.sGetComment || loading.sCommentFavor || loading.sReplyFavor
@@ -34,16 +66,7 @@ class CommentList extends Component {
           {list.map(item => (
             <CommentBox content={item} key={item.id} commentId={item.id} />
           ))}
-
-          {!isNoMoreComment &&
-            list.length !== total && (
-              <div
-                className="comment-list-show-more"
-                onClick={() => sGetComment({ page: page + 1 })}
-              >
-                <span>查看更多评论</span>
-              </div>
-            )}
+          {this.renderPagination()}
         </Spin>
       </div>
     );

src/components/ContentItem/index.css

@@ -3,39 +3,52 @@
   padding: 15px 5px 0 5px;
   border-top: 1px solid #eee;
 }
+
 .comment-item-left {
   display: inline-block;
   vertical-align: top;
   width: 40px;
 }
+
 .comment-item-right {
   display: inline-block;
   width: 90%;
   margin-left: 10px;
   margin-bottom: 20px;
 }
+
 .comment-item-content {
   margin: 10px 0;
   word-break: break-all;
 }
+
 .comment-item-bottom {
   margin: 20px auto;
 }
+
 .comment-item-bottom-left {
   float: left;
   user-select: none;
 }
+
 .comment-item-bottom-right {
   float: right;
   margin-left: 5px;
   cursor: pointer;
 }
+
 .comment-favor {
   font-size: 20px;
 }
+
 .comment-favored {
   color: #4a90e2;
 }
+
+.comment-item-image .comment-img {
+  margin-right: 10px;
+}
+
 @media screen and (max-width: 616px) and (min-width: 449px) {
   .comment-item-right {
     display: inline-block;
@@ -43,6 +56,7 @@
     margin-left: 10px;
   }
 }
+
 @media screen and (max-width: 449px) and (min-width: 365px) {
   .comment-item-right {
     display: inline-block;
@@ -50,6 +64,7 @@
     margin-left: 10px;
   }
 }
+
 @media screen and (max-width: 365px) {
   .comment-item-right {
     display: inline-block;

src/components/ContentItem/index.js

@@ -108,12 +108,14 @@ class CommentItem extends Component {
               <div className="comment-item-image">
                 {imageList.map((item, index) => {
                   return (
-                    <img
+                    <a
+                      href={item}
+                      target="_blank"
+                      rel="noopener noreferrer"
                       key={index}
-                      src={item}
-                      alt={item}
-                      style={{ maxWidth: "100%" }}
-                    />
+                    >
+                      <img src={item} alt={item} className="comment-img" />
+                    </a>
                   );
                 })}
               </div>

src/helper.js

@@ -62,14 +62,14 @@ export function renderContent(content, onClick) {
       // 兼容旧的评
       // 因为旧的评论用 [img url] 方式存储的
       if (isUrl(src)) {
-        return `<br/><img src="${src}" alt="${src}" style="max-width: 100%" />`;
+        return `<a href="${src}" rel="noopener noreferrer" target="_blank"><img class="comment-img" src="${src}" alt="${src}" /></a>`;
       }
       // 如果不存在对应的表情, 则返回原文
       const emoji = emojiObejct[src];
       if (emoji) {
-        return `<img src="${prefixUrl}${emoji.value}.${emoji.ext}" alt="${
-          emoji.title
-        }" />`;
+        return `<img class="comment-emoji" src="${prefixUrl}${emoji.value}.${
+          emoji.ext
+        }" alt="${emoji.title}" />`;
       }
       return `[${src}]`;
     })

src/index.js

@@ -42,6 +42,7 @@ class Index extends Component {
         showAlertFavor
         showError={false}
         userId={71299}
+        pageType="pagination"
         onError={(msg, { response }) => {
           if (response.status === 401) {
             console.log("unlogined");