增加图片预览器

lib/components/ContentItem/index.css

@@ -1,74 +1,105 @@
 .comment-item-box {
-  margin: 10px 0 0 0;
-  padding: 15px 5px 0 5px;
-  border-top: 1px solid #eee;
+    margin: 10px 0 0 0;
+    padding: 15px 5px 0 5px;
+    border-top: 1px solid #eee;
 }
 
 .comment-item-left {
-  display: inline-block;
-  vertical-align: top;
-  width: 40px;
+    display: inline-block;
+    vertical-align: top;
+    width: 40px;
 }
 
 .comment-item-right {
-  display: inline-block;
-  width: 90%;
-  margin-left: 10px;
-  margin-bottom: 20px;
+    display: inline-block;
+    width: 90%;
+    margin-left: 10px;
+    margin-bottom: 20px;
 }
 
 .comment-item-content {
-  margin: 10px 0;
-  word-break: break-all;
+    margin: 10px 0;
+    word-break: break-all;
 }
 
 .comment-item-bottom {
-  margin: 20px auto;
+    margin: 20px auto;
 }
 
 .comment-item-bottom-left {
-  float: left;
-  user-select: none;
+    float: left;
+    user-select: none;
 }
 
 .comment-item-bottom-right {
-  float: right;
-  margin-left: 5px;
-  cursor: pointer;
+    float: right;
+    margin-left: 5px;
+    cursor: pointer;
 }
 
 .comment-favor {
-  font-size: 20px;
+    font-size: 20px;
 }
 
 .comment-favored {
-  color: #4a90e2;
+    color: #4a90e2;
+}
+
+.comment-item-image {
+    width: 400px;
+    max-width: 100%;
+}
+
+.comment-item-image .comment-item-image-wrapper {
+    float: left;
+    width: 25%;
+    box-sizing: border-box;
+    padding: 5px;
+}
+
+.comment-item-image .comment-item-image-wrapper .comment-img-thumbnail {
+    background-position: center;
+    background-size: cover;
+    display: inline-block;
+    width: 100%;
+    height: 0;
+    padding-bottom: 100%;
+    border-radius: 5px;
+    cursor: url('//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/QPI84fxmD.undefined'), auto;
+}
+
+.comment-item-image .comment-item-image-wrapper .comment-img-divider {
+    display: inline-block;
+    width: 100%;
+    height: 0;
+    padding-bottom: 100%;
+    border-radius: 5px;
 }
 
 .comment-item-image .comment-img {
-  margin-right: 10px;
+    margin-right: 10px;
 }
 
 @media screen and (max-width: 616px) and (min-width: 449px) {
-  .comment-item-right {
-    display: inline-block;
-    width: 85%;
-    margin-left: 10px;
-  }
+    .comment-item-right {
+        display: inline-block;
+        width: 85%;
+        margin-left: 10px;
+    }
 }
 
 @media screen and (max-width: 449px) and (min-width: 365px) {
-  .comment-item-right {
-    display: inline-block;
-    width: 80%;
-    margin-left: 10px;
-  }
+    .comment-item-right {
+        display: inline-block;
+        width: 80%;
+        margin-left: 10px;
+    }
 }
 
 @media screen and (max-width: 365px) {
-  .comment-item-right {
-    display: inline-block;
-    width: 75%;
-    margin-left: 10px;
-  }
-}
+    .comment-item-right {
+        display: inline-block;
+        width: 75%;
+        margin-left: 10px;
+    }
+}

lib/components/ContentItem/index.js

@@ -66,8 +66,14 @@ var _constant = require("../../constant");
 
 require("./index.css");
 
+var _ImagePreviewer = require("../ImagePreviewer/ImagePreviewer");
+
+var _ImagePreviewer2 = _interopRequireDefault(_ImagePreviewer);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
@@ -86,14 +92,33 @@ var CommentItem = function (_Component) {
     var _this = _possibleConstructorReturn(this, (CommentItem.__proto__ || Object.getPrototypeOf(CommentItem)).call(this, props));
 
     _this.state = {
-      showInput: false
+      showInput: false,
+      showPreviewer: false,
+      previewerIndex: 0
     };
     _this.handleToggleInput = _this.handleToggleInput.bind(_this);
     _this.renderTextWithReply = _this.renderTextWithReply.bind(_this);
+    _this.showPreviewer = _this.showPreviewer.bind(_this);
+    _this.hidePreviewer = _this.hidePreviewer.bind(_this);
     return _this;
   }
 
   _createClass(CommentItem, [{
+    key: "showPreviewer",
+    value: function showPreviewer(index) {
+      this.setState({
+        showPreviewer: true,
+        previewerIndex: index
+      });
+    }
+  }, {
+    key: "hidePreviewer",
+    value: function hidePreviewer() {
+      this.setState({
+        showPreviewer: false
+      });
+    }
+  }, {
     key: "handleToggleInput",
     value: function handleToggleInput() {
       this.setState({ showInput: !this.state.showInput });
@@ -124,6 +149,8 @@ var CommentItem = function (_Component) {
   }, {
     key: "render",
     value: function render() {
+      var _this2 = this;
+
       var _props = this.props,
           commentId = _props.commentId,
           replyId = _props.replyId,
@@ -145,6 +172,18 @@ var CommentItem = function (_Component) {
 
       var imageList = images.split(",");
 
+      // 在3, 7前需要换行
+      var needClear = imageList.length === 5 || imageList.length === 6 || imageList.length === 9;
+      var imgs = [].concat(_toConsumableArray(imageList));
+      if (needClear) {
+        if (imgs.length > 6) {
+          imgs.splice(3, 0, { type: 'divider' });
+          imgs.splice(7, 0, { type: 'divider' });
+        } else {
+          imgs.splice(3, 0, { type: 'divider' });
+        }
+      }
+
       return _react2.default.createElement(
         "div",
         { className: "comment-item-box" },
@@ -187,18 +226,44 @@ var CommentItem = function (_Component) {
           imageList.length > 0 && imageList[0] !== "" && _react2.default.createElement(
             "div",
             { className: "comment-item-image" },
-            imageList.map(function (item, index) {
+            !this.state.showPreviewer && imgs.map(function (item, index) {
+              if (item.type === 'divider') {
+                return _react2.default.createElement(
+                  "div",
+                  {
+                    className: "comment-item-image-wrapper",
+                    key: index
+                  },
+                  _react2.default.createElement("div", { className: "comment-img-divider" })
+                );
+              }
               return _react2.default.createElement(
-                "a",
+                "div",
                 {
-                  href: item,
-                  target: "_blank",
-                  rel: "noopener noreferrer",
-                  key: index
+                  className: "comment-item-image-wrapper",
+                  key: index,
+                  onClick: function onClick() {
+                    var i = index;
+                    if (needClear) {
+                      if (index > 3) {
+                        i -= 1;
+                      }
+                      if (index > 7) {
+                        i -= 1;
+                      }
+                    }
+                    _this2.showPreviewer(i);
+                  }
                 },
-                _react2.default.createElement("img", { src: item, alt: item, className: "comment-img" })
+                _react2.default.createElement("div", { style: { backgroundImage: "url(" + item + ")" }, className: "comment-img-thumbnail" })
               );
-            })
+            }),
+            this.state.showPreviewer && _react2.default.createElement(_ImagePreviewer2.default, {
+              list: imageList,
+              index: this.state.previewerIndex,
+              onFold: this.hidePreviewer
+            }),
+            _react2.default.createElement("div", { className: "clearfix" })
           ),
           _react2.default.createElement(
             "div",

lib/components/Editor/Emoji.css

@@ -1,4 +1,4 @@
-.item {
+.emoji .item {
   float: left;
   width: 40px;
   height: 40px;
@@ -9,19 +9,19 @@
   margin: 0;
 }
 
-.item .helper {
+.emoji .item .helper {
   display: inline-block;
   height: 100%;
   vertical-align: middle;
 }
 
-.item img {
+.emoji .item img {
   margin: 0 auto;
   vertical-align: middle;
   padding: 3px;
 }
 
-.item img:hover {
+.emoji .item img:hover {
   border: 1px solid #40a9ff;
 }
 

lib/components/Editor/Emoji.js

@@ -49,7 +49,7 @@ var Emoji = function Emoji(_ref) {
     content.map(function (page, index) {
       return _react2.default.createElement(
         "div",
-        { key: index },
+        { key: index, className: "emoji" },
         page.map(function (item, index) {
           return _react2.default.createElement(
             "div",

lib/components/Editor/Emoji.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Editor/Emoji.js"],"names":["Emoji","onClick","content","curPage","i","length","push","emoji","map","page","index","item","value","prefixUrl","ext","title","display"],"mappings":";;;;;;;;;;;;AAAA;;;;AAEA;;;;AACA;;;;AACA;AACA;;AAEA;;AAEA,IAAMA,QAAQ,SAARA,KAAQ,OAAiB;AAAA,MAAdC,QAAc,QAAdA,OAAc;;AAC7B,MAAMC,UAAU,EAAhB;AACA,MAAIC,UAAU,EAAd;AACA,OAAK,IAAIC,IAAI,CAAb,EAAgBA,IAAI,GAApB,EAAyBA,GAAzB,EAA8B;AAC5B,QAAID,QAAQE,MAAR,GAAiB,EAArB,EAAyB;AACvBF,cAAQG,IAAR,CAAaC,gBAAMH,CAAN,CAAb;AACD,KAFD,MAEO;AACLF,cAAQI,IAAR,CAAaH,OAAb;AACAA,gBAAU,EAAV;AACD;AACF;AACD,MAAIA,QAAQE,MAAR,GAAiB,CAArB,EAAwB;AACtBH,YAAQI,IAAR,CAAaH,OAAb;AACD;AACD,SACE;AAAA;AAAA;AACGD,YAAQM,GAAR,CAAY,UAACC,IAAD,EAAOC,KAAP;AAAA,aACX;AAAA;AAAA,UAAK,KAAKA,KAAV;AACGD,aAAKD,GAAL,CAAS,UAACG,IAAD,EAAOD,KAAP;AAAA,iBACR;AAAA;AAAA,cAAK,WAAU,MAAf,EAAsB,KAAKC,KAAKC,KAAhC;AACE,oDAAM,WAAU,QAAhB,GADF;AAEE;AACE,wBAAQC,gBAAR,GAAoBF,KAAKC,KAAzB,SAAkCD,KAAKG,GADzC;AAEE,mBAAKH,KAAKI,KAFZ;AAGE,qBAAO,EAAEC,SAAS,cAAX,EAHT;AAIE,uBAAS;AAAA,uBAAMf,SAAQU,KAAKI,KAAb,CAAN;AAAA;AAJX;AAFF,WADQ;AAAA,SAAT;AADH,OADW;AAAA,KAAZ;AADH,GADF;AAmBD,CAjCD;;kBAmCef,K","file":"Emoji.js","sourcesContent":["import React from \"react\";\r\nimport { Carousel } from \"antd\";\r\nimport emoji, { prefixUrl } from \"../../emoji\";\r\nimport \"./Emoji.css\";\r\n// 每页 20  5*4\r\n// 共 20 * 3 = 60 (实际是 54)\r\n\r\n// class Emoji\r\n\r\nconst Emoji = ({ onClick }) => {\r\n  const content = [];\r\n  let curPage = [];\r\n  for (let i = 0; i < 115; i++) {\r\n    if (curPage.length < 20) {\r\n      curPage.push(emoji[i]);\r\n    } else {\r\n      content.push(curPage);\r\n      curPage = [];\r\n    }\r\n  }\r\n  if (curPage.length > 0) {\r\n    content.push(curPage);\r\n  }\r\n  return (\r\n    <Carousel>\r\n      {content.map((page, index) => (\r\n        <div key={index}>\r\n          {page.map((item, index) => (\r\n            <div className=\"item\" key={item.value}>\r\n              <span className=\"helper\" />\r\n              <img\r\n                src={`${prefixUrl}${item.value}.${item.ext}`}\r\n                alt={item.title}\r\n                style={{ display: \"inline-block\" }}\r\n                onClick={() => onClick(item.title)}\r\n              />\r\n            </div>\r\n          ))}\r\n        </div>\r\n      ))}\r\n    </Carousel>\r\n  );\r\n};\r\n\r\nexport default Emoji;\r\n"]}
+{"version":3,"sources":["../../../src/components/Editor/Emoji.js"],"names":["Emoji","onClick","content","curPage","i","length","push","emoji","map","page","index","item","value","prefixUrl","ext","title","display"],"mappings":";;;;;;;;;;;;AAAA;;;;AAEA;;;;AACA;;;;AACA;AACA;;AAEA;;AAEA,IAAMA,QAAQ,SAARA,KAAQ,OAAiB;AAAA,MAAdC,QAAc,QAAdA,OAAc;;AAC7B,MAAMC,UAAU,EAAhB;AACA,MAAIC,UAAU,EAAd;AACA,OAAK,IAAIC,IAAI,CAAb,EAAgBA,IAAI,GAApB,EAAyBA,GAAzB,EAA8B;AAC5B,QAAID,QAAQE,MAAR,GAAiB,EAArB,EAAyB;AACvBF,cAAQG,IAAR,CAAaC,gBAAMH,CAAN,CAAb;AACD,KAFD,MAEO;AACLF,cAAQI,IAAR,CAAaH,OAAb;AACAA,gBAAU,EAAV;AACD;AACF;AACD,MAAIA,QAAQE,MAAR,GAAiB,CAArB,EAAwB;AACtBH,YAAQI,IAAR,CAAaH,OAAb;AACD;AACD,SACE;AAAA;AAAA;AACGD,YAAQM,GAAR,CAAY,UAACC,IAAD,EAAOC,KAAP;AAAA,aACX;AAAA;AAAA,UAAK,KAAKA,KAAV,EAAiB,WAAU,OAA3B;AACGD,aAAKD,GAAL,CAAS,UAACG,IAAD,EAAOD,KAAP;AAAA,iBACR;AAAA;AAAA,cAAK,WAAU,MAAf,EAAsB,KAAKC,KAAKC,KAAhC;AACE,oDAAM,WAAU,QAAhB,GADF;AAEE;AACE,wBAAQC,gBAAR,GAAoBF,KAAKC,KAAzB,SAAkCD,KAAKG,GADzC;AAEE,mBAAKH,KAAKI,KAFZ;AAGE,qBAAO,EAAEC,SAAS,cAAX,EAHT;AAIE,uBAAS;AAAA,uBAAMf,SAAQU,KAAKI,KAAb,CAAN;AAAA;AAJX;AAFF,WADQ;AAAA,SAAT;AADH,OADW;AAAA,KAAZ;AADH,GADF;AAmBD,CAjCD;;kBAmCef,K","file":"Emoji.js","sourcesContent":["import React from \"react\";\r\nimport { Carousel } from \"antd\";\r\nimport emoji, { prefixUrl } from \"../../emoji\";\r\nimport \"./Emoji.css\";\r\n// 每页 20  5*4\r\n// 共 20 * 3 = 60 (实际是 54)\r\n\r\n// class Emoji\r\n\r\nconst Emoji = ({ onClick }) => {\r\n  const content = [];\r\n  let curPage = [];\r\n  for (let i = 0; i < 115; i++) {\r\n    if (curPage.length < 20) {\r\n      curPage.push(emoji[i]);\r\n    } else {\r\n      content.push(curPage);\r\n      curPage = [];\r\n    }\r\n  }\r\n  if (curPage.length > 0) {\r\n    content.push(curPage);\r\n  }\r\n  return (\r\n    <Carousel>\r\n      {content.map((page, index) => (\r\n        <div key={index} className=\"emoji\">\r\n          {page.map((item, index) => (\r\n            <div className=\"item\" key={item.value}>\r\n              <span className=\"helper\" />\r\n              <img\r\n                src={`${prefixUrl}${item.value}.${item.ext}`}\r\n                alt={item.title}\r\n                style={{ display: \"inline-block\" }}\r\n                onClick={() => onClick(item.title)}\r\n              />\r\n            </div>\r\n          ))}\r\n        </div>\r\n      ))}\r\n    </Carousel>\r\n  );\r\n};\r\n\r\nexport default Emoji;\r\n"]}

lib/components/Editor/Upload.css

@@ -1,9 +1,9 @@
 .ant-upload-select-picture-card i {
-    font-size: 32px;
-    color: #999;
+  font-size: 32px;
+  color: #999;
 }
 
 .ant-upload-select-picture-card .ant-upload-text {
-    margin-top: 8px;
-    color: #666;
+  margin-top: 8px;
+  color: #666;
 }

lib/components/Editor/index.css

@@ -1,102 +1,102 @@
 .comment-editor-toolbar {
-    text-align: right;
-    padding: 0 20px 10px 0;
+  text-align: right;
+  padding: 0 20px 10px 0;
 }
 
 .comment-editor-toolbar-error {
-    color: red;
+  color: red;
 }
 
 .comment-editor {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    max-width: 100%;
-    list-style: none;
-    position: relative;
-    display: block;
-    font-size: 14px;
-    line-height: 1.5;
-    color: rgba(0, 0, 0, 0.65);
-    background-color: #fff;
-    background-image: none;
-    border: 1px solid #d9d9d9;
-    border-radius: 4px;
-    transition: all 0.3s, height 0s;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  max-width: 100%;
+  list-style: none;
+  position: relative;
+  display: block;
+  font-size: 14px;
+  line-height: 1.5;
+  color: rgba(0, 0, 0, 0.65);
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  transition: all 0.3s, height 0s;
 }
 
 .comment-editor textarea.ant-input {
-    border: none;
-    border-bottom: 1px solid #eee;
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
+  border: none;
+  border-bottom: 1px solid #eee;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
 }
 
 .comment-editor textarea.ant-input:hover {
-    border: none;
-    border-bottom: 1px solid #eee;
+  border: none;
+  border-bottom: 1px solid #eee;
 }
 
 .comment-editor textarea.ant-input:focus {
-    box-shadow: none;
-    border-bottom: 1px solid #eee;
+  box-shadow: none;
+  border-bottom: 1px solid #eee;
 }
 
 .comment-editor [contentEditable="true"]:empty:not(:focus):before {
-    content: attr(data-text);
-    color: #bfbfbf;
+  content: attr(data-text);
+  color: #bfbfbf;
 }
 
 .comment-editor:focus,
 .comment-editor:hover {
-    border-color: #40a9ff;
-    outline: 0;
-    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+  border-color: #40a9ff;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
 }
 
 .comment-toolbar {
-    display: inline-block;
-    width: 100%;
-    margin: 5px 0 0 0;
+  display: inline-block;
+  width: 100%;
+  margin: 5px 0 0 0;
 }
 
 .comment-toolbar .comment-toolbar-icon {
-    font-size: 23px;
-    cursor: pointer;
-    transition: color 0.3s;
+  font-size: 23px;
+  cursor: pointer;
+  transition: color 0.3s;
 }
 
 .comment-toolbar .comment-toolbar-icon:hover {
-    color: #40a9ff;
+  color: #40a9ff;
 }
 
 .comment-toolbar-left {
-    float: left;
-    margin: 8px 11px;
+  float: left;
+  margin: 8px 11px;
 }
 
 .comment-toolbar-right {
-    float: right;
-    margin: 5px 11px;
+  float: right;
+  margin: 5px 11px;
 }
 
 .comment-emoji-popover .ant-popover-inner-content {
-    padding: 12px 16px 20px 16px;
+  padding: 12px 16px 20px 16px;
 }
 
 .comment-emoji-popover .ant-carousel .slick-dots {
-    bottom: -10px;
+  bottom: -10px;
 }
 
 .comment-emoji-popover .ant-carousel .slick-dots li.slick-active button {
-    background-color: #7b868a;
+  background-color: #7b868a;
 }
 
 .comment-emoji-popover .ant-carousel .slick-dots li button {
-    background-color: #a2aeb5;
+  background-color: #a2aeb5;
 }
 
 .clearfix {
-    clear: both;
-}
+  clear: both;
+}

lib/components/ImagePreviewer/ImagePreviewer.css

@@ -0,0 +1,109 @@
+.container .toolbar {
+  border-bottom: 1px solid #f2f2f2;
+  margin: 0 5px;
+  padding-bottom: 10px;
+}
+.container .toolbar .button {
+  padding: 5px 10px;
+  cursor: pointer;
+}
+.container .toolbar .button.reversal i {
+  transform: rotate3d(0, 1, 0, 180deg);
+}
+.container .pictureWrapper {
+  position: relative;
+  text-align: center;
+  margin-top: 15px;
+  padding: 0 5px;
+}
+.container .pictureWrapper .tools {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+}
+.container .pictureWrapper .tools .item {
+  width: 33%;
+  display: inline-block;
+  height: 100%;
+}
+.container .pictureWrapper .tools .item.left {
+  cursor: url('//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined'), auto;
+}
+.container .pictureWrapper .tools .item.shrink {
+  cursor: url('//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined'), auto;
+}
+.container .pictureWrapper .tools .item.right {
+  cursor: url('//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined'), auto;
+}
+.container .pictureWrapper .picture {
+  max-width: 100%;
+  max-height: 400px;
+}
+.container .pictureWrapper .prev {
+  position: absolute;
+  width: 50px;
+  background-color: transparent;
+  z-index: 100;
+  opacity: 0.5;
+  font-size: 50px;
+  text-align: left;
+  cursor: pointer;
+  left: 5px;
+  top: 0;
+  bottom: 0;
+}
+.container .pictureWrapper .prev:hover {
+  background-color: #fff;
+}
+.container .pictureWrapper .next {
+  position: absolute;
+  width: 50px;
+  background-color: transparent;
+  z-index: 100;
+  opacity: 0.5;
+  font-size: 50px;
+  text-align: left;
+  cursor: pointer;
+  right: 5px;
+  top: 0;
+  bottom: 0;
+}
+.container .pictureWrapper .next:hover {
+  background-color: #fff;
+}
+.container .pictureWrapper .middle {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.container .list {
+  font-size: 0;
+  margin-top: 25px;
+}
+.container .list .wrapper {
+  width: 11.1%;
+  height: 0;
+  padding-bottom: 11.1%;
+  position: relative;
+  display: inline-block;
+  border-radius: 5px;
+  border: 1px solid transparent;
+  opacity: 0.5;
+}
+.container .list .wrapper.active {
+  border: 1px solid #fc4747;
+  opacity: 1;
+}
+.container .list .wrapper .thumbnail {
+  position: absolute;
+  top: 5px;
+  bottom: 5px;
+  left: 5px;
+  right: 5px;
+  background-size: cover;
+  background-position: center;
+  border-radius: 5px;
+  cursor: pointer;
+}

lib/components/ImagePreviewer/ImagePreviewer.js

@@ -0,0 +1,243 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _spin = require('antd/es/spin');
+
+var _spin2 = _interopRequireDefault(_spin);
+
+var _icon = require('antd/es/icon');
+
+var _icon2 = _interopRequireDefault(_icon);
+
+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/icon/style/css');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+require('./ImagePreviewer.css');
+
+var _helper = require('../../helper');
+
+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"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var ImagePreviewer = function (_React$Component) {
+    _inherits(ImagePreviewer, _React$Component);
+
+    function ImagePreviewer(props) {
+        _classCallCheck(this, ImagePreviewer);
+
+        var _this = _possibleConstructorReturn(this, (ImagePreviewer.__proto__ || Object.getPrototypeOf(ImagePreviewer)).call(this, props));
+
+        _this.setIndex = _this.setIndex.bind(_this);
+        _this.onPrev = _this.onPrev.bind(_this);
+        _this.onNext = _this.onNext.bind(_this);
+        _this.onOrigin = _this.onOrigin.bind(_this);
+        _this.rotateLeft = _this.rotateLeft.bind(_this);
+        _this.rotateRight = _this.rotateRight.bind(_this);
+        _this.onImgLoad = _this.onImgLoad.bind(_this);
+        _this.onImageError = _this.onImageError.bind(_this);
+        _this.state = {
+            cIndex: props.index,
+            direction: 0, // 0- 0deg 1- 90deg 2- 180deg 3- 270deg
+            loading: false
+        };
+        return _this;
+    }
+
+    _createClass(ImagePreviewer, [{
+        key: 'componentWillReceiveProps',
+        value: function componentWillReceiveProps(nextProps) {
+            if (nextProps.index !== this.props.index) {
+                this.setIndex(nextProps.index);
+            }
+        }
+    }, {
+        key: 'onPrev',
+        value: function onPrev() {
+            var prev = this.state.cIndex === 0 ? this.props.list.length - 1 : this.state.cIndex - 1;
+            this.setIndex(prev);
+        }
+    }, {
+        key: 'onNext',
+        value: function onNext() {
+            var next = this.state.cIndex === this.props.list.length - 1 ? 0 : this.state.cIndex + 1;
+            this.setIndex(next);
+        }
+    }, {
+        key: 'onOrigin',
+        value: function onOrigin() {
+            window.open(this.props.list[this.state.cIndex]);
+        }
+    }, {
+        key: 'onImgLoad',
+        value: function onImgLoad() {
+            this.setState({
+                loading: false
+            });
+        }
+    }, {
+        key: 'onImageError',
+        value: function onImageError() {
+            this.setState({
+                loading: false
+            });
+        }
+    }, {
+        key: 'setIndex',
+        value: function setIndex(index) {
+            this.setState({
+                cIndex: index,
+                direction: 0,
+                loading: true
+            });
+        }
+    }, {
+        key: 'rotateLeft',
+        value: function rotateLeft() {
+            var direction = this.state.direction - 1;
+            if (direction === -1) {
+                direction = 3;
+            }
+            this.setState({
+                direction: direction
+            });
+        }
+    }, {
+        key: 'rotateRight',
+        value: function rotateRight() {
+            var direction = this.state.direction + 1;
+            if (direction === 4) {
+                direction = 0;
+            }
+            this.setState({
+                direction: direction
+            });
+        }
+
+        // calcHeight(node) {
+        //     const { naturalHeight, naturalWidth } = node;
+        // }
+
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this2 = this;
+
+            var _props = this.props,
+                list = _props.list,
+                onFold = _props.onFold;
+            var cIndex = this.state.cIndex;
+
+            return _react2.default.createElement(
+                'div',
+                { className: 'container' },
+                _react2.default.createElement(
+                    'div',
+                    { className: 'toolbar' },
+                    _react2.default.createElement(
+                        'span',
+                        { className: 'button', onClick: onFold },
+                        _react2.default.createElement(_icon2.default, { type: 'to-top' }),
+                        '\u6536\u8D77'
+                    ),
+                    _react2.default.createElement(
+                        'span',
+                        { className: 'button', onClick: this.onOrigin },
+                        _react2.default.createElement(_icon2.default, { type: 'search' }),
+                        ' \u67E5\u770B\u539F\u56FE'
+                    )
+                ),
+                _react2.default.createElement(
+                    'div',
+                    { className: 'pictureWrapper' },
+                    _react2.default.createElement(
+                        _spin2.default,
+                        { spinning: this.state.loading },
+                        _react2.default.createElement('img', {
+                            // ref={node => {
+                            //     if (node) {
+                            //         this.calcHeight(node);
+                            //     }
+                            // }}
+                            className: 'picture',
+                            src: (0, _helper.addImageProcess)(list[cIndex], { large: true }),
+                            alt: list[cIndex],
+                            style: {
+                                transform: 'rotate(' + this.state.direction * 90 + 'deg)',
+                                opacity: this.state.loading ? 0 : 1,
+                                transition: '0.3s opacity'
+                            },
+                            onLoad: this.onImgLoad,
+                            onError: this.onImageError
+                        })
+                    ),
+                    _react2.default.createElement(
+                        'div',
+                        { className: 'tools' },
+                        list.length > 1 && _react2.default.createElement('div', {
+                            onClick: this.onPrev,
+                            className: (0, _classnames2.default)("item", "left")
+                        }),
+                        _react2.default.createElement('div', { onClick: onFold, className: (0, _classnames2.default)("item", "shrink") }),
+                        list.length > 1 && _react2.default.createElement('div', {
+                            onClick: this.onNext,
+                            className: (0, _classnames2.default)("item", "right")
+                        })
+                    )
+                ),
+                list.length > 1 && _react2.default.createElement(
+                    'div',
+                    { className: 'list' },
+                    list.map(function (item, index) {
+                        return _react2.default.createElement(
+                            'div',
+                            {
+                                className: (0, _classnames2.default)({
+                                    "wrapper": true,
+                                    "active": index === cIndex
+                                }),
+                                key: item
+                            },
+                            _react2.default.createElement('div', {
+                                className: (0, _classnames2.default)({
+                                    "thumbnail": true
+                                }),
+                                style: {
+                                    backgroundImage: 'url(' + (0, _helper.addImageProcess)(item, {
+                                        small: true
+                                    }) + ')'
+                                },
+                                onClick: function onClick() {
+                                    _this2.setIndex(index);
+                                }
+                            })
+                        );
+                    })
+                )
+            );
+        }
+    }]);
+
+    return ImagePreviewer;
+}(_react2.default.Component);
+
+exports.default = ImagePreviewer;
+//# sourceMappingURL=ImagePreviewer.js.map

lib/components/ImagePreviewer/ImagePreviewer.less

@@ -0,0 +1,114 @@
+.container {
+    .toolbar {
+        border-bottom: 1px solid #f2f2f2;
+        margin: 0 5px;
+        padding-bottom: 10px;
+        .button {
+            padding: 5px 10px;
+            cursor: pointer;
+            &.reversal i {
+                transform: rotate3d(0, 1, 0, 180deg);
+            }
+        }
+    }
+    .pictureWrapper {
+        position: relative; // width: 100%;
+        // padding-bottom: 68%;
+        // height: 0;
+        text-align: center;
+        margin-top: 15px;
+        padding: 0 5px;
+        .tools {
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            right: 0;
+            .item {
+                width: 33%;
+                display: inline-block;
+                height: 100%;
+                &.left {
+                    cursor: url('//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined'), auto;
+                }
+                &.shrink {
+                    cursor: url('//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined'), auto;
+                }
+                &.right {
+                    cursor: url('//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined'), auto;
+                }
+            }
+        }
+        .picture {
+            max-width: 100%;
+            max-height: 400px;
+        }
+        .tool() {
+            position: absolute;
+            width: 50px;
+            background-color: transparent;
+            z-index: 100;
+            opacity: 0.5;
+            font-size: 50px;
+            text-align: left;
+            cursor: pointer;
+            &:hover {
+                background-color: #fff;
+            }
+        }
+        .prev {
+            .tool();
+            left: 5px;
+            top: 0;
+            bottom: 0;
+        }
+        .next {
+            .tool();
+            right: 5px;
+            top: 0;
+            bottom: 0;
+        }
+        .middle {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+        } // .picture {
+        //     position: absolute;
+        //     bottom: 0;
+        //     top: 0;
+        //     left: 5px;
+        //     right: 5px;
+        //     background-size: contain;
+        //     background-position: center;
+        // }
+    }
+    .list {
+        font-size: 0;
+        margin-top: 25px;
+        .wrapper {
+            width: 11.1%;
+            height: 0;
+            padding-bottom: 11.1%;
+            position: relative;
+            display: inline-block;
+            border-radius: 5px;
+            border: 1px solid transparent;
+            opacity: 0.5;
+            &.active {
+                border: 1px solid #fc4747;
+                opacity: 1;
+            }
+            .thumbnail {
+                position: absolute;
+                top: 5px;
+                bottom: 5px;
+                left: 5px;
+                right: 5px;
+                background-size: cover;
+                background-position: center;
+                border-radius: 5px;
+                cursor: pointer;
+            }
+        }
+    }
+}

lib/components/ImagePreviewer/README.md

@@ -0,0 +1,4 @@
++ big //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/QPI84fxmD.undefined
++ small //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined
++ prev //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined
++ next //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined

lib/constant.js

@@ -22,4 +22,8 @@ var REGEXP = exports.REGEXP = /\[[^[\]]+?\]/g;
 var AVATAR = exports.AVATAR = "";
 
 var IMAGE_SPLIT = exports.IMAGE_SPLIT = "IMAGE_SPLIT";
+
+var IMAGE_PROCESS = exports.IMAGE_PROCESS = '?x-oss-process=image/resize,h_350';
+var IMAGE_PROCESS_SMALL = exports.IMAGE_PROCESS_SMALL = '?x-oss-process=image/resize,h_100';
+var IMAGE_PROCESS_LARGE = exports.IMAGE_PROCESS_LARGE = '?x-oss-process=image/resize,h_500';
 //# sourceMappingURL=constant.js.map

lib/constant.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/constant.js"],"names":["ERROR_DEFAULT","LIMIT","OSS_ENDPOINT","OSS_BUCKET","DRIVER_LICENSE_PATH","OSS_LINK","MAX_UPLOAD_NUMBER","URL_REGEXP","REGEXP","AVATAR","IMAGE_SPLIT"],"mappings":";;;;;AAAO,IAAMA,wCAAgB,MAAtB;;AAEA,IAAMC,wBAAQ,EAAd,C,CAAkB;;AAElB,IAAMC,sCAAe,6BAArB;AACA,IAAMC,kCAAa,eAAnB;AACA,IAAMC,oDAAsB,UAA5B;;AAEA,IAAMC,8BAAW,6CAAjB;;AAEA,IAAMC,gDAAoB,CAA1B;;AAEA,IAAMC,kCAAa,oGAAnB;;AAEA,IAAMC,0BAAS,eAAf;;AAEA,IAAMC,0BAAS,EAAf;;AAEA,IAAMC,oCAAc,aAApB","file":"constant.js","sourcesContent":["export const ERROR_DEFAULT = \"出错了！\";\r\n\r\nexport const LIMIT = 10; // 默认 limit\r\n\r\nexport const OSS_ENDPOINT = \"oss-cn-beijing.aliyuncs.com\";\r\nexport const OSS_BUCKET = \"links-comment\";\r\nexport const DRIVER_LICENSE_PATH = \"/comment\";\r\n\r\nexport const OSS_LINK = \"//links-comment.oss-cn-beijing.aliyuncs.com\";\r\n\r\nexport const MAX_UPLOAD_NUMBER = 4;\r\n\r\nexport const URL_REGEXP = /((http(s)?:)?\\/\\/)?(www\\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\\.[a-z]{2,6}\\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g;\r\n\r\nexport const REGEXP = /\\[[^[\\]]+?\\]/g;\r\n\r\nexport const AVATAR = \"\";\r\n\r\nexport const IMAGE_SPLIT = \"IMAGE_SPLIT\";\r\n"]}
+{"version":3,"sources":["../src/constant.js"],"names":["ERROR_DEFAULT","LIMIT","OSS_ENDPOINT","OSS_BUCKET","DRIVER_LICENSE_PATH","OSS_LINK","MAX_UPLOAD_NUMBER","URL_REGEXP","REGEXP","AVATAR","IMAGE_SPLIT","IMAGE_PROCESS","IMAGE_PROCESS_SMALL","IMAGE_PROCESS_LARGE"],"mappings":";;;;;AAAO,IAAMA,wCAAgB,MAAtB;;AAEA,IAAMC,wBAAQ,EAAd,C,CAAkB;;AAElB,IAAMC,sCAAe,6BAArB;AACA,IAAMC,kCAAa,eAAnB;AACA,IAAMC,oDAAsB,UAA5B;;AAEA,IAAMC,8BAAW,6CAAjB;;AAEA,IAAMC,gDAAoB,CAA1B;;AAEA,IAAMC,kCAAa,oGAAnB;;AAEA,IAAMC,0BAAS,eAAf;;AAEA,IAAMC,0BAAS,EAAf;;AAEA,IAAMC,oCAAc,aAApB;;AAEA,IAAMC,wCAAgB,mCAAtB;AACA,IAAMC,oDAAsB,mCAA5B;AACA,IAAMC,oDAAsB,mCAA5B","file":"constant.js","sourcesContent":["export const ERROR_DEFAULT = \"出错了！\";\r\n\r\nexport const LIMIT = 10; // 默认 limit\r\n\r\nexport const OSS_ENDPOINT = \"oss-cn-beijing.aliyuncs.com\";\r\nexport const OSS_BUCKET = \"links-comment\";\r\nexport const DRIVER_LICENSE_PATH = \"/comment\";\r\n\r\nexport const OSS_LINK = \"//links-comment.oss-cn-beijing.aliyuncs.com\";\r\n\r\nexport const MAX_UPLOAD_NUMBER = 4;\r\n\r\nexport const URL_REGEXP = /((http(s)?:)?\\/\\/)?(www\\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\\.[a-z]{2,6}\\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g;\r\n\r\nexport const REGEXP = /\\[[^[\\]]+?\\]/g;\r\n\r\nexport const AVATAR = \"\";\r\n\r\nexport const IMAGE_SPLIT = \"IMAGE_SPLIT\";\r\n\r\nexport const IMAGE_PROCESS = '?x-oss-process=image/resize,h_350';\r\nexport const IMAGE_PROCESS_SMALL = '?x-oss-process=image/resize,h_100';\r\nexport const IMAGE_PROCESS_LARGE = '?x-oss-process=image/resize,h_500';\r\n"]}

lib/helper.js

@@ -8,6 +8,7 @@ exports.isUrl = isUrl;
 exports.arrayToObject = arrayToObject;
 exports.htmlEncode = htmlEncode;
 exports.renderContent = renderContent;
+exports.addImageProcess = addImageProcess;
 
 var _constant = require("./constant");
 
@@ -92,4 +93,16 @@ function renderContent(content, onClick) {
   }).replace(/\n/g, "<br />");
   return data;
 }
+
+function addImageProcess(url) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+  if (options.small) {
+    return url + _constant.IMAGE_PROCESS_SMALL;
+  }
+  if (options.large) {
+    return url + _constant.IMAGE_PROCESS_LARGE;
+  }
+  return url + _constant.IMAGE_PROCESS;
+}
 //# sourceMappingURL=helper.js.map

src/components/ContentItem/index.css

@@ -45,6 +45,38 @@
   color: #4a90e2;
 }
 
+.comment-item-image {
+  width: 400px;
+  max-width: 100%;
+}
+
+.comment-item-image .comment-item-image-wrapper {
+  float: left;
+  width: 25%;
+  box-sizing: border-box;
+  padding: 5px;
+}
+
+.comment-item-image .comment-item-image-wrapper .comment-img-thumbnail {
+  background-position: center;
+  background-size: cover;
+  display: inline-block;
+  width: 100%;
+  height: 0;
+  padding-bottom: 100%;
+  border-radius: 5px;
+  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/QPI84fxmD.undefined"),
+    auto;
+}
+
+.comment-item-image .comment-item-image-wrapper .comment-img-divider {
+  display: inline-block;
+  width: 100%;
+  height: 0;
+  padding-bottom: 100%;
+  border-radius: 5px;
+}
+
 .comment-item-image .comment-img {
   margin-right: 10px;
 }

src/components/ContentItem/index.js

@@ -10,6 +10,7 @@ import avatar from "../../avatar";
 import { renderContent } from "../../helper";
 import { IMAGE_SPLIT } from "../../constant";
 import "./index.css";
+import ImagePreviewer from "../ImagePreviewer/ImagePreviewer";
 
 dayjs.locale("zh-cn");
 dayjs.extend(relativeTime);
@@ -18,10 +19,27 @@ class CommentItem extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      showInput: false
+      showInput: false,
+      showPreviewer: false,
+      previewerIndex: 0
     };
     this.handleToggleInput = this.handleToggleInput.bind(this);
     this.renderTextWithReply = this.renderTextWithReply.bind(this);
+    this.showPreviewer = this.showPreviewer.bind(this);
+    this.hidePreviewer = this.hidePreviewer.bind(this);
+  }
+
+  showPreviewer(index) {
+    this.setState({
+      showPreviewer: true,
+      previewerIndex: index
+    });
+  }
+
+  hidePreviewer() {
+    this.setState({
+      showPreviewer: false
+    });
   }
 
   handleToggleInput() {
@@ -72,6 +90,21 @@ class CommentItem extends Component {
 
     const imageList = images.split(",");
 
+    // 在3, 7前需要换行
+    const needClear =
+      imageList.length === 5 ||
+      imageList.length === 6 ||
+      imageList.length === 9;
+    const imgs = [...imageList];
+    if (needClear) {
+      if (imgs.length > 6) {
+        imgs.splice(3, 0, { type: "divider" });
+        imgs.splice(7, 0, { type: "divider" });
+      } else {
+        imgs.splice(3, 0, { type: "divider" });
+      }
+    }
+
     return (
       <div className="comment-item-box">
         <div className="comment-item-left">
@@ -106,18 +139,49 @@ class CommentItem extends Component {
           imageList.length > 0 &&
             imageList[0] !== "" && (
               <div className="comment-item-image">
-                {imageList.map((item, index) => {
-                  return (
-                    <a
-                      href={item}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      key={index}
-                    >
-                      <img src={item} alt={item} className="comment-img" />
-                    </a>
-                  );
-                })}
+                {!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">

src/components/Editor/Emoji.css

@@ -1,4 +1,4 @@
-.item {
+.emoji .item {
   float: left;
   width: 40px;
   height: 40px;
@@ -9,19 +9,19 @@
   margin: 0;
 }
 
-.item .helper {
+.emoji .item .helper {
   display: inline-block;
   height: 100%;
   vertical-align: middle;
 }
 
-.item img {
+.emoji .item img {
   margin: 0 auto;
   vertical-align: middle;
   padding: 3px;
 }
 
-.item img:hover {
+.emoji .item img:hover {
   border: 1px solid #40a9ff;
 }
 

src/components/Editor/Emoji.js

@@ -24,7 +24,7 @@ const Emoji = ({ onClick }) => {
   return (
     <Carousel>
       {content.map((page, index) => (
-        <div key={index}>
+        <div key={index} className="emoji">
           {page.map((item, index) => (
             <div className="item" key={item.value}>
               <span className="helper" />

src/components/ImagePreviewer/ImagePreviewer.css

@@ -0,0 +1,112 @@
+.container .toolbar {
+  border-bottom: 1px solid #f2f2f2;
+  margin: 0 5px;
+  padding-bottom: 10px;
+}
+.container .toolbar .button {
+  padding: 5px 10px;
+  cursor: pointer;
+}
+.container .toolbar .button.reversal i {
+  transform: rotate3d(0, 1, 0, 180deg);
+}
+.container .pictureWrapper {
+  position: relative;
+  text-align: center;
+  margin-top: 15px;
+  padding: 0 5px;
+}
+.container .pictureWrapper .tools {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+}
+.container .pictureWrapper .tools .item {
+  width: 33%;
+  display: inline-block;
+  height: 100%;
+}
+.container .pictureWrapper .tools .item.left {
+  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined"),
+    auto;
+}
+.container .pictureWrapper .tools .item.shrink {
+  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined"),
+    auto;
+}
+.container .pictureWrapper .tools .item.right {
+  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined"),
+    auto;
+}
+.container .pictureWrapper .picture {
+  max-width: 100%;
+  max-height: 400px;
+}
+.container .pictureWrapper .prev {
+  position: absolute;
+  width: 50px;
+  background-color: transparent;
+  z-index: 100;
+  opacity: 0.5;
+  font-size: 50px;
+  text-align: left;
+  cursor: pointer;
+  left: 5px;
+  top: 0;
+  bottom: 0;
+}
+.container .pictureWrapper .prev:hover {
+  background-color: #fff;
+}
+.container .pictureWrapper .next {
+  position: absolute;
+  width: 50px;
+  background-color: transparent;
+  z-index: 100;
+  opacity: 0.5;
+  font-size: 50px;
+  text-align: left;
+  cursor: pointer;
+  right: 5px;
+  top: 0;
+  bottom: 0;
+}
+.container .pictureWrapper .next:hover {
+  background-color: #fff;
+}
+.container .pictureWrapper .middle {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.container .list {
+  font-size: 0;
+  margin-top: 25px;
+}
+.container .list .wrapper {
+  width: 11.1%;
+  height: 0;
+  padding-bottom: 11.1%;
+  position: relative;
+  display: inline-block;
+  border-radius: 5px;
+  border: 1px solid transparent;
+  opacity: 0.5;
+}
+.container .list .wrapper.active {
+  border: 1px solid #fc4747;
+  opacity: 1;
+}
+.container .list .wrapper .thumbnail {
+  position: absolute;
+  top: 5px;
+  bottom: 5px;
+  left: 5px;
+  right: 5px;
+  background-size: cover;
+  background-position: center;
+  border-radius: 5px;
+  cursor: pointer;
+}

src/components/ImagePreviewer/ImagePreviewer.jsx

@@ -0,0 +1,189 @@
+import React from "react";
+import classnames from "classnames";
+import { Icon, Spin } from "antd";
+
+import "./ImagePreviewer.css";
+import { addImageProcess } from "../../helper";
+
+export default class ImagePreviewer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.setIndex = this.setIndex.bind(this);
+    this.onPrev = this.onPrev.bind(this);
+    this.onNext = this.onNext.bind(this);
+    this.onOrigin = this.onOrigin.bind(this);
+    this.rotateLeft = this.rotateLeft.bind(this);
+    this.rotateRight = this.rotateRight.bind(this);
+    this.onImgLoad = this.onImgLoad.bind(this);
+    this.onImageError = this.onImageError.bind(this);
+    this.state = {
+      cIndex: props.index,
+      direction: 0, // 0- 0deg 1- 90deg 2- 180deg 3- 270deg
+      loading: false
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.index !== this.props.index) {
+      this.setIndex(nextProps.index);
+    }
+  }
+
+  onPrev() {
+    const prev =
+      this.state.cIndex === 0
+        ? this.props.list.length - 1
+        : this.state.cIndex - 1;
+    this.setIndex(prev);
+  }
+
+  onNext() {
+    const next =
+      this.state.cIndex === this.props.list.length - 1
+        ? 0
+        : this.state.cIndex + 1;
+    this.setIndex(next);
+  }
+
+  onOrigin() {
+    window.open(this.props.list[this.state.cIndex]);
+  }
+
+  onImgLoad() {
+    this.setState({
+      loading: false
+    });
+  }
+
+  onImageError() {
+    this.setState({
+      loading: false
+    });
+  }
+
+  setIndex(index) {
+    this.setState({
+      cIndex: index,
+      direction: 0,
+      loading: true
+    });
+  }
+
+  rotateLeft() {
+    let direction = this.state.direction - 1;
+    if (direction === -1) {
+      direction = 3;
+    }
+    this.setState({
+      direction
+    });
+  }
+
+  rotateRight() {
+    let direction = this.state.direction + 1;
+    if (direction === 4) {
+      direction = 0;
+    }
+    this.setState({
+      direction
+    });
+  }
+
+  // calcHeight(node) {
+  //     const { naturalHeight, naturalWidth } = node;
+  // }
+
+  render() {
+    const { list, onFold } = this.props;
+    const { cIndex } = this.state;
+    return (
+      <div className="container">
+        <div className="toolbar">
+          <span className="button" onClick={onFold}>
+            <Icon type="to-top" />收起
+          </span>
+          <span className="button" onClick={this.onOrigin}>
+            <Icon type="search" /> 查看原图
+          </span>
+          {/* <span className="button" onClick={this.rotateRight}>
+                        <Icon type="reload" /> 向右旋转
+                    </span>
+                    <span className={classnames("button", "reversal")} onClick={this.rotateLeft}>
+                        <Icon type="reload" /> 向左旋转
+                    </span> */}
+        </div>
+        <div className="pictureWrapper">
+          <Spin spinning={this.state.loading}>
+            <img
+              // ref={node => {
+              //     if (node) {
+              //         this.calcHeight(node);
+              //     }
+              // }}
+              className="picture"
+              src={addImageProcess(list[cIndex], { large: true })}
+              alt={list[cIndex]}
+              style={{
+                transform: `rotate(${this.state.direction * 90}deg)`,
+                opacity: this.state.loading ? 0 : 1,
+                transition: "0.3s opacity"
+              }}
+              onLoad={this.onImgLoad}
+              onError={this.onImageError}
+            />
+          </Spin>
+          <div className="tools">
+            {list.length > 1 && (
+              <div
+                onClick={this.onPrev}
+                className={classnames("item", "left")}
+              />
+            )}
+
+            <div onClick={onFold} className={classnames("item", "shrink")} />
+            {list.length > 1 && (
+              <div
+                onClick={this.onNext}
+                className={classnames("item", "right")}
+              />
+            )}
+          </div>
+          {/* <div className="prev" onClick={this.onPrev}>
+                        <Icon className="middle" type="left" />
+                    </div>
+                    <div className="next" onClick={this.onNext}>
+                        <Icon className="middle" type="right" />
+                    </div> */}
+          {/* <div className="picture" style={{ backgroundImage: `url(${addImageProcess(list[cIndex])})` }} /> */}
+        </div>
+        {list.length > 1 && (
+          <div className="list">
+            {list.map((item, index) => (
+              <div
+                className={classnames({
+                  wrapper: true,
+                  active: index === cIndex
+                })}
+                key={item}
+              >
+                <div
+                  className={classnames({
+                    thumbnail: true
+                  })}
+                  style={{
+                    backgroundImage: `url(${addImageProcess(item, {
+                      small: true
+                    })})`
+                  }}
+                  onClick={() => {
+                    this.setIndex(index);
+                  }}
+                />
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+}

src/components/ImagePreviewer/ImagePreviewer.less

@@ -0,0 +1,117 @@
+.container {
+  .toolbar {
+    border-bottom: 1px solid #f2f2f2;
+    margin: 0 5px;
+    padding-bottom: 10px;
+    .button {
+      padding: 5px 10px;
+      cursor: pointer;
+      &.reversal i {
+        transform: rotate3d(0, 1, 0, 180deg);
+      }
+    }
+  }
+  .pictureWrapper {
+    position: relative; // width: 100%;
+    // padding-bottom: 68%;
+    // height: 0;
+    text-align: center;
+    margin-top: 15px;
+    padding: 0 5px;
+    .tools {
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      .item {
+        width: 33%;
+        display: inline-block;
+        height: 100%;
+        &.left {
+          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined"),
+            auto;
+        }
+        &.shrink {
+          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined"),
+            auto;
+        }
+        &.right {
+          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined"),
+            auto;
+        }
+      }
+    }
+    .picture {
+      max-width: 100%;
+      max-height: 400px;
+    }
+    .tool() {
+      position: absolute;
+      width: 50px;
+      background-color: transparent;
+      z-index: 100;
+      opacity: 0.5;
+      font-size: 50px;
+      text-align: left;
+      cursor: pointer;
+      &:hover {
+        background-color: #fff;
+      }
+    }
+    .prev {
+      .tool();
+      left: 5px;
+      top: 0;
+      bottom: 0;
+    }
+    .next {
+      .tool();
+      right: 5px;
+      top: 0;
+      bottom: 0;
+    }
+    .middle {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+    } // .picture {
+    //     position: absolute;
+    //     bottom: 0;
+    //     top: 0;
+    //     left: 5px;
+    //     right: 5px;
+    //     background-size: contain;
+    //     background-position: center;
+    // }
+  }
+  .list {
+    font-size: 0;
+    margin-top: 25px;
+    .wrapper {
+      width: 11.1%;
+      height: 0;
+      padding-bottom: 11.1%;
+      position: relative;
+      display: inline-block;
+      border-radius: 5px;
+      border: 1px solid transparent;
+      opacity: 0.5;
+      &.active {
+        border: 1px solid #fc4747;
+        opacity: 1;
+      }
+      .thumbnail {
+        position: absolute;
+        top: 5px;
+        bottom: 5px;
+        left: 5px;
+        right: 5px;
+        background-size: cover;
+        background-position: center;
+        border-radius: 5px;
+        cursor: pointer;
+      }
+    }
+  }
+}

src/components/ImagePreviewer/README.md

@@ -0,0 +1,4 @@
++ big //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/QPI84fxmD.undefined
++ small //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined
++ prev //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined
++ next //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined

src/constant.js

@@ -17,3 +17,7 @@ export const REGEXP = /\[[^[\]]+?\]/g;
 export const AVATAR = "";
 
 export const IMAGE_SPLIT = "IMAGE_SPLIT";
+
+export const IMAGE_PROCESS = "?x-oss-process=image/resize,h_350";
+export const IMAGE_PROCESS_SMALL = "?x-oss-process=image/resize,h_100";
+export const IMAGE_PROCESS_LARGE = "?x-oss-process=image/resize,h_500";

src/helper.js

@@ -1,4 +1,10 @@
-import { REGEXP, IMAGE_SPLIT } from "./constant";
+import {
+  REGEXP,
+  IMAGE_SPLIT,
+  IMAGE_PROCESS_SMALL,
+  IMAGE_PROCESS_LARGE,
+  IMAGE_PROCESS
+} from "./constant";
 import emoji, { prefixUrl } from "./emoji";
 
 const emojiObejct = arrayToObject(emoji, "title");
@@ -84,3 +90,13 @@ export function renderContent(content, onClick) {
     .replace(/\n/g, "<br />");
   return data;
 }
+
+export function addImageProcess(url, options = {}) {
+  if (options.small) {
+    return url + IMAGE_PROCESS_SMALL;
+  }
+  if (options.large) {
+    return url + IMAGE_PROCESS_LARGE;
+  }
+  return url + IMAGE_PROCESS;
+}