README.md

 - [ ] 头像 404 `https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/`
 - [ ] 上传图片的时候偶尔会出现InvalidPart
 - [ ] 上传图片失败时, 提示并且不显示缩略图
+- [x] 支持Ente事件(PC端和手机键盘Enter)

lib/App.js

 
       var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
           _ref2$page = _ref2.page,
-          page = _ref2$page === undefined ? 1 : _ref2$page;
+          page = _ref2$page === undefined ? 1 : _ref2$page,
+          _ref2$filterSpeak = _ref2.filterSpeak,
+          filterSpeak = _ref2$filterSpeak === undefined ? 0 : _ref2$filterSpeak;
 
       var pageType = this.props.pageType;
 
           businessId = _props.businessId,
           limit = _props.limit;
 
-      this.axios.get(API + "/comments?type=" + type + "&business_id=" + businessId + "&page=" + page + "&limit=" + limit).then(function (response) {
+      this.axios.get(API + "/comments?type=" + type + "&business_id=" + businessId + "&is_speak=" + filterSpeak + "&page=" + page + "&limit=" + limit).then(function (response) {
         var _response$data = response.data,
             list = _response$data.list,
             page = _response$data.page,
         sUpdateComment: this.sUpdateComment,
         handleEdit: this.handleEdit
       });
+
       return this.state.initDone && _react2.default.createElement(
         _Comment.CommentContext.Provider,
         { value: value },
           commentId: this.state.commentId,
           userId: this.state.content.user_id,
           content: this.state.content,
-          handleClose: this.handleClose
+          handleClose: this.handleClose,
+          preRenderValue: this.props.preRenderValue
         })
       );
     }
   onUpdateComment: _propTypes2.default.func,
   locales: _propTypes2.default.string, //  传入的语言环境， en-US/zh-CN
   onCountChange: _propTypes2.default.func, // 评论数量变更时的回调
-  onCommentFail: _propTypes2.default.func // 评论失败时的回调
+  onCommentFail: _propTypes2.default.func, // 评论失败时的回调
+  preRenderValue: _propTypes2.default.func // 编辑器渲染前对值需要做的工作
 };
 
 App.defaultProps = {
   onUpdateComment: function onUpdateComment() {},
   onBeforeUpdateComment: function onBeforeUpdateComment() {},
   onCountChange: function onCountChange() {},
-  onCommentFail: function onCommentFail() {}
+  onCommentFail: function onCommentFail() {},
+  preRenderValue: function preRenderValue(v) {
+    return v;
+  }
 };
 
 exports.Editor = _Editor2.default;

lib/components/AudioPlayer/index.js

+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _slider = require("antd/es/slider");
+
+var _slider2 = _interopRequireDefault(_slider);
+
+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/slider/style");
+
+require("antd/es/icon/style");
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _dayjs = require("dayjs");
+
+var _dayjs2 = _interopRequireDefault(_dayjs);
+
+var _duration = require("dayjs/plugin/duration");
+
+var _duration2 = _interopRequireDefault(_duration);
+
+var _utc = require("dayjs/plugin/utc");
+
+var _utc2 = _interopRequireDefault(_utc);
+
+require("./index.less");
+
+var _loading = require("../../assert/loading.gif");
+
+var _loading2 = _interopRequireDefault(_loading);
+
+var _btn_audio_play = require("../../assert/btn_audio_play.png");
+
+var _btn_audio_play2 = _interopRequireDefault(_btn_audio_play);
+
+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; }
+
+_dayjs2.default.extend(_duration2.default);
+_dayjs2.default.extend(_utc2.default);
+
+var AudioPlayer = function (_React$Component) {
+  _inherits(AudioPlayer, _React$Component);
+
+  function AudioPlayer(props) {
+    _classCallCheck(this, AudioPlayer);
+
+    var _this = _possibleConstructorReturn(this, (AudioPlayer.__proto__ || Object.getPrototypeOf(AudioPlayer)).call(this, props));
+
+    _this.state = {
+      duration: 0,
+      currentDuration: 0,
+      isPlaying: false,
+      isLoading: false
+    };
+    return _this;
+  }
+
+  _createClass(AudioPlayer, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      if (this.player) {
+        var src = this.props.src;
+
+        this.player.oncanplay = function (event) {
+          return _this2.setState({ duration: event.target.duration });
+        };
+        this.player.onended = function () {
+          return _this2.setState({ isPlaying: false, currentDuration: 0 });
+        };
+        this.player.onpause = function () {
+          return _this2.setState({ isPlaying: false, isLoading: false });
+        };
+        this.player.onplay = function () {
+          return _this2.setState({ isPlaying: false, isLoading: true });
+        };
+        this.player.onplaying = function () {
+          return _this2.setState({ isPlaying: true, isLoading: false });
+        };
+        this.player.ontimeupdate = function (event) {
+          return _this2.setState({ currentDuration: event.target.currentTime });
+        };
+        this.player.src = src;
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this3 = this;
+
+      if (this.props.src !== prevProps.src) {
+        this.player.oncanplay = function (event) {
+          return _this3.setState({ duration: event.target.duration });
+        };
+        this.player.onended = function () {
+          return _this3.setState({ isPlaying: false, currentDuration: 0 });
+        };
+        this.player.onpause = function () {
+          return _this3.setState({ isPlaying: false, isLoading: false });
+        };
+        this.player.onplay = function () {
+          return _this3.setState({ isPlaying: false, isLoading: true });
+        };
+        this.player.onplaying = function () {
+          return _this3.setState({ isPlaying: true, isLoading: false });
+        };
+        this.player.ontimeupdate = function (event) {
+          return _this3.setState({ currentDuration: event.target.currentTime });
+        };
+        this.player.src = this.props.src;
+      }
+    }
+  }, {
+    key: "clickPlayOrPause",
+    value: function clickPlayOrPause(isPlaying) {
+      if (!this.player) {
+        return;
+      }
+      if (isPlaying) {
+        this.player.pause();
+      } else {
+        // 如果是播放，先暂停其他的播放
+        var playerList = document.getElementsByTagName("audio");
+        if (playerList) {
+          Array.from(playerList).forEach(function (player) {
+            if (!player.paused) {
+              player.pause();
+            }
+          });
+        }
+        this.player.play();
+      }
+    }
+  }, {
+    key: "getPlayIcon",
+    value: function getPlayIcon() {
+      var _state = this.state,
+          isPlaying = _state.isPlaying,
+          isLoading = _state.isLoading;
+
+      var playIconElem = void 0;
+
+      if (isLoading) {
+        playIconElem = _react2.default.createElement("img", { className: "icon-loading", src: _loading2.default, alt: "iconLoading" });
+      } else if (isPlaying) {
+        playIconElem = _react2.default.createElement(_icon2.default, { className: "pause", type: "pause" });
+      } else {
+        playIconElem = _react2.default.createElement("img", { className: "icon-loading", src: _btn_audio_play2.default, alt: "iconPlaying" });
+      }
+      return playIconElem;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+
+      var _state2 = this.state,
+          currentDuration = _state2.currentDuration,
+          isPlaying = _state2.isPlaying,
+          duration = _state2.duration;
+
+      return _react2.default.createElement(
+        "div",
+        { className: "comment-item-speak-audio-container" },
+        _react2.default.createElement("audio", {
+          ref: function ref(_ref) {
+            _this4.player = _ref;
+          },
+          style: { display: "none" }
+        }),
+        _react2.default.createElement(
+          "span",
+          {
+            className: "icon",
+            onClick: function onClick() {
+              _this4.clickPlayOrPause(isPlaying);
+            }
+          },
+          this.getPlayIcon()
+        ),
+        _react2.default.createElement(_slider2.default, {
+          step: 0.001,
+          className: "slider",
+          tooltipVisible: false,
+          value: currentDuration,
+          max: duration,
+          onChange: function onChange(value) {
+            if (_this4.player) {
+              _this4.player.currentTime = value;
+            }
+          }
+        }),
+        _react2.default.createElement(
+          "span",
+          { className: "time" },
+          _dayjs2.default.utc(_dayjs2.default.duration(currentDuration, "seconds").asMilliseconds()).format("mm:ss"),
+          "/",
+          _dayjs2.default.utc(_dayjs2.default.duration(duration, "seconds").asMilliseconds()).format("mm:ss")
+        )
+      );
+    }
+  }]);
+
+  return AudioPlayer;
+}(_react2.default.Component);
+
+exports.default = AudioPlayer;
+//# sourceMappingURL=index.js.map

lib/components/AudioPlayer/index.less

+.comment-item-speak-audio-container {
+  background-color: #f5f5f5;
+  border: 1px solid rgba(210, 210, 210, 1);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  .icon {
+    cursor: pointer;
+    width: 28px;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    border-radius: 14px;
+    background-color: #fff;
+    color: #71c135;
+    margin-left: 12px;
+    font-size: 14px;
+  }
+
+  .icon-loading {
+    width: 100%;
+    height: 100%;
+  }
+
+  .slider {
+    margin: 0 0 0 16px;
+    width: 195px;
+
+    :global {
+      .ant-slider-rail {
+        background-color: #dfdfdf;
+      }
+    }
+  }
+
+  .time {
+    margin-left: 14px;
+    color: #848484;
+    font-size: 12px;
+  }
+}
+
+@media screen and (max-width: 616px) and (min-width: 449px) {
+  .comment-item-speak-audio-container {
+    .slider {
+      width: 195px;
+    }
+  }
+}
+@media screen and (max-width: 449px) and (min-width: 365px) {
+  .comment-item-speak-audio-container {
+    .slider {
+      width: 114px;
+    }
+  }
+}
+@media screen and (max-width: 365px) {
+  .comment-item-speak-audio-container {
+    .slider {
+      width: 60px;
+    }
+  }
+}

lib/components/CommentList/index.css

 .comment-list-pagination {
   text-align: center;
 }
+
+.comment-list-filter-speak {
+  margin-left: 20px;
+  font-size: 14px;
+  color: rgba(93, 93, 93, 0.65);
+}
+
+@media screen and (max-width: 365px) {
+  .comment-list-filter-speak {
+    float: right;
+  }
+}

lib/components/CommentList/index.js

 
 var _spin2 = _interopRequireDefault(_spin);
 
+var _checkbox = require("antd/es/checkbox");
+
+var _checkbox2 = _interopRequireDefault(_checkbox);
+
 var _pagination = require("antd/es/pagination");
 
 var _pagination2 = _interopRequireDefault(_pagination);
 
 require("antd/es/spin/style");
 
+require("antd/es/checkbox/style");
+
 require("antd/es/pagination/style");
 
 var _react = require("react");
 
     var _this = _possibleConstructorReturn(this, (CommentList.__proto__ || Object.getPrototypeOf(CommentList)).call(this, props));
 
-    _this.state = {};
+    _this.state = {
+      filterSpeak: 0
+    };
     return _this;
   }
 
           sGetComment = _props$app.sGetComment,
           onPageChange = _props$app.onPageChange,
           onGetMoreBtnClick = _props$app.onGetMoreBtnClick;
+      var filterSpeak = this.state.filterSpeak;
 
       if (pageType === "slice") {
         // 截断多余评论，通过点击查看更多跳转
             {
               className: "comment-list-show-more",
               onClick: function onClick() {
-                sGetComment({ page: page + 1 });
+                sGetComment({ page: page + 1, filterSpeak: filterSpeak });
                 onPageChange(page + 1);
               }
             },
             current: page,
             total: total,
             onChange: function onChange(p) {
-              sGetComment({ page: p });
+              sGetComment({ page: p, filterSpeak: filterSpeak });
               onPageChange(p);
             }
           })
   }, {
     key: "render",
     value: function render() {
+      var _this2 = this;
+
       var _props$app2 = this.props.app,
           list = _props$app2.list,
           total = _props$app2.total,
-          loading = _props$app2.loading;
+          loading = _props$app2.loading,
+          isSpeak = _props$app2.isSpeak,
+          sGetComment = _props$app2.sGetComment,
+          onPageChange = _props$app2.onPageChange;
 
 
       var spinning = Boolean(loading.sGetComment || loading.sCommentFavor || loading.sReplyFavor);
           _react2.default.createElement(
             "div",
             null,
-            _reactIntlUniversal2.default.get("comment.totalComment", { total: total })
+            _reactIntlUniversal2.default.get("comment.totalComment", { total: total }),
+            isSpeak && _react2.default.createElement(
+              _checkbox2.default,
+              {
+                className: "comment-list-filter-speak",
+                onChange: function onChange(e) {
+                  _this2.setState({
+                    filterSpeak: e.target.checked ? 1 : 0
+                  });
+                  sGetComment({
+                    page: 1,
+                    filterSpeak: e.target.checked ? 1 : 0
+                  });
+                  onPageChange(1);
+                }
+              },
+              _reactIntlUniversal2.default.get("comment.filterSpeak")
+            )
           ),
           list.map(function (item) {
             return _react2.default.createElement(_CommentBox2.default, {

lib/components/ContentItem/index.css

   word-break: break-all;
 }
 
+.comment-item-speak {
+  margin-top: 4px;
+}
+
+.comment-item-speak-message {
+  font-size: 14px;
+  color: #71c135;
+}
+
+.comment-item-speak-audio-wrapper {
+  margin-top: 8px;
+  width: 350px;
+  height: 44px;
+}
+
 .comment-item-bottom {
   display: flex;
   justify-content: flex-end;
     width: 85%;
     margin-left: 10px;
   }
+
+  .comment-item-speak-audio-wrapper {
+    width: 350px;
+  }
 }
 
 @media screen and (max-width: 449px) and (min-width: 365px) {
     width: 80%;
     margin-left: 10px;
   }
+
+  .comment-item-speak-audio-wrapper {
+    width: 266px;
+  }
 }
 
 @media screen and (max-width: 365px) {
     width: 75%;
     margin-left: 10px;
   }
+
+  .comment-item-speak-audio-wrapper {
+    width: 218px;
+  }
 }
 
 @media (max-width: 575px) {

lib/components/ContentItem/index.js

 
 var _ImagePreviewer2 = _interopRequireDefault(_ImagePreviewer);
 
+var _AudioPlayer = require("../AudioPlayer");
+
+var _AudioPlayer2 = _interopRequireDefault(_AudioPlayer);
+
 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); } }
           app = _props.app,
           user_id = _props.user_id,
           page = _props.page;
+      var medias = content.medias,
+          isSpeak = content.is_speak;
       var _props$app = this.props.app,
           locale = _props$app.locale,
           showHoverCard = _props$app.showHoverCard,
               __html: (0, _helper.renderContent)(this.renderTextWithReply(newContent, content))
             }
           }),
+          isSpeak && _react2.default.createElement(
+            "div",
+            { className: "comment-item-speak" },
+            _react2.default.createElement(
+              "span",
+              { className: "comment-item-speak-message" },
+              "[",
+              _reactIntlUniversal2.default.get("comment.speakComment"),
+              "]"
+            ),
+            _react2.default.createElement(
+              "div",
+              { className: "comment-item-speak-audio-wrapper" },
+              _react2.default.createElement(_AudioPlayer2.default, { src: medias && medias[0] && medias[0].url })
+            )
+          ),
           // image为空时不渲染comment-item-image
           imageList.length > 0 && imageList[0] !== "" && _react2.default.createElement(
             "div",
                 showReply ? _react2.default.createElement(_icon2.default, { type: "up" }) : _react2.default.createElement(_icon2.default, { type: "down" })
               )
             ) : null,
-            showEdit && app.userId === content.user_id && _react2.default.createElement("i", {
+            showEdit && !isSpeak && app.userId === content.user_id && _react2.default.createElement("i", {
               className: "comment-item-edit",
               onClick: function onClick() {
                 return _this2.props.app.handleEdit({

lib/components/EditComment/EditComment.js

             commentId: this.props.commentId,
             userId: this.props.content.user_id,
             fileList: this.state.fileList,
-            value: this.state.value,
+            value: this.props.preRenderValue && this.props.preRenderValue(this.state.value),
             onChange: function onChange(value) {
               _this2.setState({
                 value: value

lib/components/Editor/Upload.js

             onClick: _this3.handleCloseClick.bind(_this3, index),
             key: file.uid,
             style: {
-              left: index % 3 * 112 + 110 + "px",
-              top: Math.floor(index / 3) * 112 + 26 + "px"
+              left: index % 3 * 112 + 98 + "px",
+              top: Math.floor(index / 3) * 112 + 16 + "px"
             }
           });
         }),

lib/components/Editor/index.css

     height: 28px;
   }
 }
+
+.comment-img-popover {
+  /* 一行显示3张图 */
+  width: 336px;
+  min-height: 100px;
+  margin: 0 auto;
+}
+
+.comment-img-title {
+  margin: 5px auto;
+}
+.comment-img-title-counter {
+  color: #666;
+  font-weight: 400;
+}
+
+@media (max-width: 575px) {
+  .comment-img-popover {
+    /* 一行显示2张图 */
+    width: 224px;
+  }
+  .comment-img-title-counter {
+    display: none;
+  }
+}

lib/components/Editor/index.js

 
 require("antd/es/input/style");
 
-var _react = require("react");
+var _dayjs = require("dayjs");
 
-var _react2 = _interopRequireDefault(_react);
+var _dayjs2 = _interopRequireDefault(_dayjs);
+
+var _shortid = require("shortid");
+
+var _shortid2 = _interopRequireDefault(_shortid);
 
 var _propTypes = require("prop-types");
 
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
-var _reactIntlUniversal = require("react-intl-universal");
-
-var _reactIntlUniversal2 = _interopRequireDefault(_reactIntlUniversal);
-
-var _dayjs = require("dayjs");
+var _react = require("react");
 
-var _dayjs2 = _interopRequireDefault(_dayjs);
+var _react2 = _interopRequireDefault(_react);
 
-var _shortid = require("shortid");
+var _reactIntlUniversal = require("react-intl-universal");
 
-var _shortid2 = _interopRequireDefault(_shortid);
+var _reactIntlUniversal2 = _interopRequireDefault(_reactIntlUniversal);
 
-var _constant = require("../../constant");
+var _Emoji = require("./Emoji");
 
-var _helper = require("../../helper");
+var _Emoji2 = _interopRequireDefault(_Emoji);
 
 var _Upload = require("./Upload");
 
 var _Upload2 = _interopRequireDefault(_Upload);
 
-var _Emoji = require("./Emoji");
-
-var _Emoji2 = _interopRequireDefault(_Emoji);
-
 var _Comment = require("../../Comment");
 
 var _Comment2 = _interopRequireDefault(_Comment);
 
+var _utils = require("./../../utils");
+
+var _constant = require("../../constant");
+
+var _helper = require("../../helper");
+
 require("./index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
     _this.handlePaste = _this.handlePaste.bind(_this);
     _this.resetState = _this.resetState.bind(_this);
     _this.handleEmojiScroll = _this.handleEmojiScroll.bind(_this);
+    _this.handlePressEnter = _this.handlePressEnter.bind(_this);
+    _this.invokeFileListChange = _this.invokeFileListChange.bind(_this);
     return _this;
   }
 
       if (fileList.length > this.props.maxUpload) {
         list = fileList.slice(0, this.props.maxUpload);
       }
-      this.props.handleChangeFileList(list);
-      this.setState({ fileList: list });
+      this.invokeFileListChange(list);
     }
 
     /**
         }
         return item;
       });
-      this.props.handleChangeFileList(fileList);
-      this.setState({ fileMap: fileMap, fileList: fileList });
+      this.setState({ fileMap: fileMap });
+      this.invokeFileListChange(fileList);
+    }
+
+    /**
+     *  **统一处理fileList的修改**
+     *  1. upload
+     *  2. paste
+     *  PS: 移动端需要做额外操作
+     *  -- evo 20200223
+     */
+
+  }, {
+    key: "invokeFileListChange",
+    value: function invokeFileListChange(fileList) {
+      var _props2 = this.props,
+          limitOne = _props2.limitOne,
+          handleChangeFileList = _props2.handleChangeFileList;
+
+      handleChangeFileList(fileList);
+      this.setState({ fileList: fileList });
+      if (limitOne && _utils.isMobile) {
+        var file = fileList[0];
+        if (file && file.status === "done" && !file.thumbUrl.includes("data:image")) {
+          this.setState({ uploadVisible: false });
+        }
+      }
     }
 
     /**
             type: file.type,
             uid: new Date().valueOf()
           });
-          _this2.props.handleChangeFileList(fileList);
-          _this2.setState({
-            fileList: fileList
-          });
+          _this2.invokeFileListChange(fileList);
         }).catch(function (e) {
           var msg = e.message || _constant.ERROR_DEFAULT;
           if (_this2.props.showError) {
   }, {
     key: "checkDisabledSubmit",
     value: function checkDisabledSubmit() {
-      var _props2 = this.props,
-          btnDisabled = _props2.btnDisabled,
-          value = _props2.value,
-          fileList = _props2.fileList;
+      var _props3 = this.props,
+          btnDisabled = _props3.btnDisabled,
+          value = _props3.value,
+          fileList = _props3.fileList;
 
       if (btnDisabled) {
         return true;
       }
       return true;
     }
+
+    /**
+     *  **处理Enter事件**
+     *  1. `allowEnterSubmit`为true时enter触发submit事件
+     *  2. `e.preventDefault`为了防止enter事件后仍触发换行
+     *  3. enter事件开启后，仍可以用`shift + enter`触发换行
+     *  -- evo 20200222
+     */
+
+  }, {
+    key: "handlePressEnter",
+    value: function handlePressEnter(e) {
+      if (this.props.allowEnterSubmit) {
+        if (!e.shiftKey) {
+          e.preventDefault();
+          this.handleSubmit();
+        }
+      }
+    }
   }, {
     key: "render",
     value: function render() {
       var _this4 = this;
 
-      var _props3 = this.props,
-          value = _props3.value,
-          rows = _props3.rows,
-          showEmoji = _props3.showEmoji,
-          showUpload = _props3.showUpload,
-          multiple = _props3.multiple,
-          emojiPopoverPlacement = _props3.emojiPopoverPlacement,
-          uploadPopoverPlacement = _props3.uploadPopoverPlacement,
-          uploadOverlayClassName = _props3.uploadOverlayClassName,
-          fileList = _props3.fileList,
-          maxUpload = _props3.maxUpload,
-          btnLoading = _props3.btnLoading,
-          button = _props3.button,
-          emojiToolIcon = _props3.emojiToolIcon,
-          imageToolIcon = _props3.imageToolIcon,
-          maxLength = _props3.maxLength,
-          autoFocus = _props3.autoFocus,
-          app = _props3.app;
+      var _props4 = this.props,
+          value = _props4.value,
+          rows = _props4.rows,
+          showEmoji = _props4.showEmoji,
+          showUpload = _props4.showUpload,
+          multiple = _props4.multiple,
+          emojiPopoverPlacement = _props4.emojiPopoverPlacement,
+          uploadPopoverPlacement = _props4.uploadPopoverPlacement,
+          uploadOverlayClassName = _props4.uploadOverlayClassName,
+          fileList = _props4.fileList,
+          maxUpload = _props4.maxUpload,
+          btnLoading = _props4.btnLoading,
+          button = _props4.button,
+          emojiToolIcon = _props4.emojiToolIcon,
+          imageToolIcon = _props4.imageToolIcon,
+          maxLength = _props4.maxLength,
+          autoFocus = _props4.autoFocus,
+          app = _props4.app;
 
       var placeholder = this.props.placeholder || _reactIntlUniversal2.default.get("editor.placeholder");
       var btnSubmitText = this.props.btnSubmitText || _reactIntlUniversal2.default.get("editor.SubmitBtn");
       var inputValue = value || this.state.value;
       var uploadFileList = fileList || this.state.fileList;
       var isLogin = app.currentUser && (app.currentUser.user_id > 0 || app.currentUser.id > 0);
+
       return _react2.default.createElement(
         "div",
         { className: "comment-editor-container", onPaste: this.handlePaste },
             _react2.default.createElement(TextArea, {
               value: inputValue,
               onChange: function onChange(e) {
-                return _this4.handleChange(e.target.value);
+                _this4.handleChange(e.target.value);
               },
               rows: rows,
               placeholder: placeholder,
-              autoFocus: autoFocus
+              autoFocus: autoFocus,
+              onPressEnter: this.handlePressEnter
             }),
             _react2.default.createElement(
               "div",
                     },
                     content: _react2.default.createElement(
                       "div",
-                      {
-                        style: {
-                          width: 336, // 一行显示3张
-                          minHeight: 100,
-                          margin: "0 auto"
-                        }
-                      },
+                      { className: "comment-img-popover" },
                       _react2.default.createElement(_Upload2.default, {
                         onRef: function onRef(node) {
                           return _this4.uploadRef = node;
                     ),
                     title: _react2.default.createElement(
                       "div",
-                      { style: { margin: "5px auto" } },
+                      { className: "comment-img-title" },
                       _react2.default.createElement(
                         "span",
                         null,
                         _reactIntlUniversal2.default.get("editor.uploadTip"),
                         maxUpload >= 2 ? _react2.default.createElement(
                           "span",
-                          { style: { color: "#666", fontWeight: 400 } },
+                          { className: "comment-img-title-counter" },
                           _reactIntlUniversal2.default.get("editor.uploadCount", {
                             count: maxUpload - uploadFileList.length
                           })
   imageToolIcon: _propTypes2.default.node,
   showError: _propTypes2.default.bool,
   onError: _propTypes2.default.func,
-  maxLength: _propTypes2.default.number
+  maxLength: _propTypes2.default.number,
+  // Enter事件相关
+  allowEnterSubmit: _propTypes2.default.bool,
+  // 私信仅允许选中一个，此处可以优化为通用的limit
+  limitOne: _propTypes2.default.bool
 };
 
 Editor.defaultProps = {
   showError: true,
   maxLength: 5000,
   app: {},
-  handleChangeFileList: function handleChangeFileList() {}
+  handleChangeFileList: function handleChangeFileList() {},
+  // Enter事件相关
+  allowEnterSubmit: false,
+  limitOne: false
 };
 
 exports.default = (0, _Comment2.default)(Editor);

lib/index.js

           fileList: this.state.fileList,
           value: this.state.value,
           onChange: function onChange(value) {
-            _this2.setState({
-              value: value
-            });
+            _this2.setState({ value: value });
           },
           handleChangeFileList: function handleChangeFileList(fileList) {
-            console.log("----", fileList);
             _this2.setState({
               fileList: fileList
             });
-          }
+          },
+          allowEnterSubmit: true,
+          limitOne: true
         }))
       );
     }
 if (process.env.NODE_ENV !== "production") {
   renderComment({
     id: "root-comment",
-    type: 1,
-    businessId: "test",
+    type: 3,
+    businessId: "5ea8320dedd68200018e733d",
     businessUserId: 4,
     userId: 58297,
     currentUser: {
       });
     },
     onCountChange: function onCountChange(c) {
-      console.log(c);
+      // console.log(c);
     },
     onDelete: function onDelete(type, data) {
       console.log(type, data);
     sendMessage: function sendMessage(id) {
       console.log("sendMessage", id);
     },
+    preRenderValue: function preRenderValue(value) {
+      return "" + value;
+    },
     editorProps: {
       onCommentSuccess: function onCommentSuccess(data) {
         console.log(data);

lib/lang/en-US.js

   "comment.totalComment": "Total {total, plural, =1 {one comment} other {# comments}}",
   "comment.reply": "Reply",
   "comment.moreComment": "More comments",
+  "comment.filterSpeak": "Show imitations only",
+  "comment.speakComment": "Imitation audio",
 
   "reply.totalReply": "Total {total, plural, =1 {one reply} other {# replies}}",
   "reply.moreReply": "More replies",

lib/lang/en-US.js.map

-{"version":3,"sources":["../../src/lang/en-US.js"],"names":["USdata"],"mappings":";;;;;AAAA,IAAMA,SAAS;AACb,2BAAyB,uBADZ;AAEb,wBAAsB,eAFT;AAGb,sBAAoB,2BAHP;AAIb,sBAAoB,MAJP;AAKb,sBAAoB,iBALP;AAMb,wBAAsB,iCANT;AAOb,sBAAoB,QAPP;;AASb,qBAAmB,SATN;AAUb,0BACE,4DAXW;AAYb,mBAAiB,OAZJ;AAab,yBAAuB,eAbV;;AAeb,sBAAoB,yDAfP;AAgBb,qBAAmB,cAhBN;AAiBb,oBAAkB,cAjBL;;AAmBb,sBAAoB,MAnBP;AAoBb,0BAAwB,kBApBX;;AAsBb,sBAAoB,SAtBP;AAuBb,mBAAiB,SAvBJ;AAwBb,uBAAqB,QAxBR;AAyBb,uBAAqB,QAzBR;;AA2Bb,2BAAyB,kBA3BZ;AA4Bb,wBAAsB,cA5BT;AA6Bb,qBAAmB,kBA7BN;AA8Bb,qBAAmB,eA9BN;AA+Bb,yBAAuB,kBA/BV;AAgCb,0BAAwB,YAhCX;AAiCb,+BAA6B,SAjChB;AAkCb,yBAAuB;AAlCV,CAAf;;kBAqCeA,M","file":"en-US.js","sourcesContent":["const USdata = {\n  \"editor.alreadyEntered\": \"{count} words entered\",\n  \"editor.placeholder\": \"Say something\",\n  \"editor.maxLength\": \"Maximum {maxLength} words\",\n  \"editor.SubmitBtn\": \"Send\",\n  \"editor.uploadTip\": \"Upload pictures\",\n  \"editor.uploadCount\": \"(You could upload {count} more)\",\n  \"editor.uploadBtn\": \"Upload\",\n\n  \"comment.tourist\": \"Visitor\",\n  \"comment.totalComment\":\n    \"Total {total, plural, =1 {one comment} other {# comments}}\",\n  \"comment.reply\": \"Reply\",\n  \"comment.moreComment\": \"More comments\",\n\n  \"reply.totalReply\": \"Total {total, plural, =1 {one reply} other {# replies}}\",\n  \"reply.moreReply\": \"More replies\",\n  \"reply.collapse\": \"Fold replies\",\n\n  \"picture.collapse\": \"Fold\",\n  \"picture.viewOriginal\": \"See the original\",\n\n  \"popConfirm.title\": \"Delete?\",\n  \"popConfirm.ok\": \"Confirm\",\n  \"popConfirm.cancel\": \"Cancel\",\n  \"popConfirm.delete\": \"Delete\",\n\n  \"message.noMoreComment\": \"No more comments\",\n  \"message.noMoreData\": \"No more data\",\n  \"message.notNull\": \"It's still empty\",\n  \"message.success\": \"Comments sent\",\n  \"message.replyNoNull\": \"It's still empty\",\n  \"message.replySuccess\": \"Reply sent\",\n  \"message.cancelLickSuccess\": \"Unliked\",\n  \"message.likeSuccess\": \"Liked\"\n};\n\nexport default USdata;\n"]}
+{"version":3,"sources":["../../src/lang/en-US.js"],"names":["USdata"],"mappings":";;;;;AAAA,IAAMA,SAAS;AACb,2BAAyB,uBADZ;AAEb,wBAAsB,eAFT;AAGb,sBAAoB,2BAHP;AAIb,sBAAoB,MAJP;AAKb,sBAAoB,iBALP;AAMb,wBAAsB,iCANT;AAOb,sBAAoB,QAPP;;AASb,qBAAmB,SATN;AAUb,0BACE,4DAXW;AAYb,mBAAiB,OAZJ;AAab,yBAAuB,eAbV;AAcb,yBAAuB,sBAdV;AAeb,0BAAwB,iBAfX;;AAiBb,sBAAoB,yDAjBP;AAkBb,qBAAmB,cAlBN;AAmBb,oBAAkB,cAnBL;;AAqBb,sBAAoB,MArBP;AAsBb,0BAAwB,kBAtBX;;AAwBb,sBAAoB,SAxBP;AAyBb,mBAAiB,SAzBJ;AA0Bb,uBAAqB,QA1BR;AA2Bb,uBAAqB,QA3BR;;AA6Bb,2BAAyB,kBA7BZ;AA8Bb,wBAAsB,cA9BT;AA+Bb,qBAAmB,kBA/BN;AAgCb,qBAAmB,eAhCN;AAiCb,yBAAuB,kBAjCV;AAkCb,0BAAwB,YAlCX;AAmCb,+BAA6B,SAnChB;AAoCb,yBAAuB;AApCV,CAAf;;kBAuCeA,M","file":"en-US.js","sourcesContent":["const USdata = {\n  \"editor.alreadyEntered\": \"{count} words entered\",\n  \"editor.placeholder\": \"Say something\",\n  \"editor.maxLength\": \"Maximum {maxLength} words\",\n  \"editor.SubmitBtn\": \"Send\",\n  \"editor.uploadTip\": \"Upload pictures\",\n  \"editor.uploadCount\": \"(You could upload {count} more)\",\n  \"editor.uploadBtn\": \"Upload\",\n\n  \"comment.tourist\": \"Visitor\",\n  \"comment.totalComment\":\n    \"Total {total, plural, =1 {one comment} other {# comments}}\",\n  \"comment.reply\": \"Reply\",\n  \"comment.moreComment\": \"More comments\",\n  \"comment.filterSpeak\": \"Show imitations only\",\n  \"comment.speakComment\": \"Imitation audio\",\n\n  \"reply.totalReply\": \"Total {total, plural, =1 {one reply} other {# replies}}\",\n  \"reply.moreReply\": \"More replies\",\n  \"reply.collapse\": \"Fold replies\",\n\n  \"picture.collapse\": \"Fold\",\n  \"picture.viewOriginal\": \"See the original\",\n\n  \"popConfirm.title\": \"Delete?\",\n  \"popConfirm.ok\": \"Confirm\",\n  \"popConfirm.cancel\": \"Cancel\",\n  \"popConfirm.delete\": \"Delete\",\n\n  \"message.noMoreComment\": \"No more comments\",\n  \"message.noMoreData\": \"No more data\",\n  \"message.notNull\": \"It's still empty\",\n  \"message.success\": \"Comments sent\",\n  \"message.replyNoNull\": \"It's still empty\",\n  \"message.replySuccess\": \"Reply sent\",\n  \"message.cancelLickSuccess\": \"Unliked\",\n  \"message.likeSuccess\": \"Liked\"\n};\n\nexport default USdata;\n"]}

lib/lang/zh-CN.js

   "comment.totalComment": "共{total}条评论",
   "comment.reply": "回复",
   "comment.moreComment": "更多评论",
+  "comment.filterSpeak": "只显示跟读",
+  "comment.speakComment": "跟读语音",
 
   "reply.totalReply": "共{total}条回复",
   "reply.moreReply": "更多回复",

lib/lang/zh-CN.js.map

-{"version":3,"sources":["../../src/lang/zh-CN.js"],"names":["CNdata"],"mappings":";;;;;AAAA,IAAMA,SAAS;AACb,2BAAyB,yBADZ;AAEb,wBAAsB,UAFT;AAGb,sBAAoB,iBAHP;AAIb,sBAAoB,IAJP;AAKb,sBAAoB,MALP;AAMb,wBAAsB,mBANT;AAOb,sBAAoB,IAPP;;AASb,qBAAmB,IATN;AAUb,0BAAwB,aAVX;AAWb,mBAAiB,IAXJ;AAYb,yBAAuB,MAZV;;AAcb,sBAAoB,aAdP;AAeb,qBAAmB,MAfN;AAgBb,oBAAkB,MAhBL;;AAkBb,sBAAoB,IAlBP;AAmBb,0BAAwB,MAnBX;;AAqBb,sBAAoB,QArBP;AAsBb,mBAAiB,IAtBJ;AAuBb,uBAAqB,IAvBR;AAwBb,uBAAqB,IAxBR;;AA0Bb,2BAAyB,SA1BZ;AA2Bb,wBAAsB,UA3BT;AA4Bb,qBAAmB,OA5BN;AA6Bb,qBAAmB,QA7BN;AA8Bb,yBAAuB,OA9BV;AA+Bb,0BAAwB,QA/BX;AAgCb,+BAA6B,QAhChB;AAiCb,yBAAuB;AAjCV,CAAf;;kBAoCeA,M","file":"zh-CN.js","sourcesContent":["const CNdata = {\n  \"editor.alreadyEntered\": \"已输入{count}/{maxLength}字\",\n  \"editor.placeholder\": \"说点什么吧...\",\n  \"editor.maxLength\": \"字数上限{maxLength}\",\n  \"editor.SubmitBtn\": \"发送\",\n  \"editor.uploadTip\": \"上传图片\",\n  \"editor.uploadCount\": \"(您还能上传{count}张图片)\",\n  \"editor.uploadBtn\": \"上传\",\n\n  \"comment.tourist\": \"游客\",\n  \"comment.totalComment\": \"共{total}条评论\",\n  \"comment.reply\": \"回复\",\n  \"comment.moreComment\": \"更多评论\",\n\n  \"reply.totalReply\": \"共{total}条回复\",\n  \"reply.moreReply\": \"更多回复\",\n  \"reply.collapse\": \"收起回复\",\n\n  \"picture.collapse\": \"收起\",\n  \"picture.viewOriginal\": \"查看原图\",\n\n  \"popConfirm.title\": \"确定要删除吗\",\n  \"popConfirm.ok\": \"确定\",\n  \"popConfirm.cancel\": \"取消\",\n  \"popConfirm.delete\": \"删除\",\n\n  \"message.noMoreComment\": \"没有更多评论了\",\n  \"message.noMoreData\": \"没有更多数据了！\",\n  \"message.notNull\": \"没写内容呢\",\n  \"message.success\": \"评论已发送！\",\n  \"message.replyNoNull\": \"没写内容呢\",\n  \"message.replySuccess\": \"回复已发送！\",\n  \"message.cancelLickSuccess\": \"已取消点赞！\",\n  \"message.likeSuccess\": \"已赞！\"\n};\n\nexport default CNdata;\n"]}
+{"version":3,"sources":["../../src/lang/zh-CN.js"],"names":["CNdata"],"mappings":";;;;;AAAA,IAAMA,SAAS;AACb,2BAAyB,yBADZ;AAEb,wBAAsB,UAFT;AAGb,sBAAoB,iBAHP;AAIb,sBAAoB,IAJP;AAKb,sBAAoB,MALP;AAMb,wBAAsB,mBANT;AAOb,sBAAoB,IAPP;;AASb,qBAAmB,IATN;AAUb,0BAAwB,aAVX;AAWb,mBAAiB,IAXJ;AAYb,yBAAuB,MAZV;AAab,yBAAuB,OAbV;AAcb,0BAAwB,MAdX;;AAgBb,sBAAoB,aAhBP;AAiBb,qBAAmB,MAjBN;AAkBb,oBAAkB,MAlBL;;AAoBb,sBAAoB,IApBP;AAqBb,0BAAwB,MArBX;;AAuBb,sBAAoB,QAvBP;AAwBb,mBAAiB,IAxBJ;AAyBb,uBAAqB,IAzBR;AA0Bb,uBAAqB,IA1BR;;AA4Bb,2BAAyB,SA5BZ;AA6Bb,wBAAsB,UA7BT;AA8Bb,qBAAmB,OA9BN;AA+Bb,qBAAmB,QA/BN;AAgCb,yBAAuB,OAhCV;AAiCb,0BAAwB,QAjCX;AAkCb,+BAA6B,QAlChB;AAmCb,yBAAuB;AAnCV,CAAf;;kBAsCeA,M","file":"zh-CN.js","sourcesContent":["const CNdata = {\n  \"editor.alreadyEntered\": \"已输入{count}/{maxLength}字\",\n  \"editor.placeholder\": \"说点什么吧...\",\n  \"editor.maxLength\": \"字数上限{maxLength}\",\n  \"editor.SubmitBtn\": \"发送\",\n  \"editor.uploadTip\": \"上传图片\",\n  \"editor.uploadCount\": \"(您还能上传{count}张图片)\",\n  \"editor.uploadBtn\": \"上传\",\n\n  \"comment.tourist\": \"游客\",\n  \"comment.totalComment\": \"共{total}条评论\",\n  \"comment.reply\": \"回复\",\n  \"comment.moreComment\": \"更多评论\",\n  \"comment.filterSpeak\": \"只显示跟读\",\n  \"comment.speakComment\": \"跟读语音\",\n\n  \"reply.totalReply\": \"共{total}条回复\",\n  \"reply.moreReply\": \"更多回复\",\n  \"reply.collapse\": \"收起回复\",\n\n  \"picture.collapse\": \"收起\",\n  \"picture.viewOriginal\": \"查看原图\",\n\n  \"popConfirm.title\": \"确定要删除吗\",\n  \"popConfirm.ok\": \"确定\",\n  \"popConfirm.cancel\": \"取消\",\n  \"popConfirm.delete\": \"删除\",\n\n  \"message.noMoreComment\": \"没有更多评论了\",\n  \"message.noMoreData\": \"没有更多数据了！\",\n  \"message.notNull\": \"没写内容呢\",\n  \"message.success\": \"评论已发送！\",\n  \"message.replyNoNull\": \"没写内容呢\",\n  \"message.replySuccess\": \"回复已发送！\",\n  \"message.cancelLickSuccess\": \"已取消点赞！\",\n  \"message.likeSuccess\": \"已赞！\"\n};\n\nexport default CNdata;\n"]}

lib/utils.js

+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+/**
+ * 575: 为了和media query中的判断保持一致
+ */
+var isMobile = exports.isMobile = typeof window.orientation === "number" && document.body.offsetWidth < 575;
+//# sourceMappingURL=utils.js.map

lib/utils.js.map

+{"version":3,"sources":["../src/utils.js"],"names":["isMobile","window","orientation","document","body","offsetWidth"],"mappings":";;;;;AAAA;;;AAGO,IAAMA,8BACX,OAAOC,OAAOC,WAAd,KAA8B,QAA9B,IAA0CC,SAASC,IAAT,CAAcC,WAAd,GAA4B,GADjE","file":"utils.js","sourcesContent":["/**\n * 575: 为了和media query中的判断保持一致\n */\nexport const isMobile =\n  typeof window.orientation === \"number\" && document.body.offsetWidth < 575;\n"]}

lib/version.json

 {
     "name":       "comment",
-    "buildDate":  1574306910894,
+    "buildDate":  1588435719936,
     "version":    "1.0.4",
-    "numCommits": 195,
-    "hash":       "db0a99c",
-    "dirty":      false
+    "numCommits": 215,
+    "hash":       "7d03c9b",
+    "dirty":      true
 }

package.json

   "dependencies": {
     "antd": "^3.19.3",
     "axios": "^0.18.0",
-    "dayjs": "^1.7.2",
+    "dayjs": "^1.8.25",
     "js-cookie": "^2.2.0",
     "prop-types": "^15.6.2",
     "react": "^16.4.1",

src/App.js

   /**
    * 获取评论列表
    */
-  sGetComment({ page = 1 } = {}) {
+  sGetComment({ page = 1, filterSpeak = 0 } = {}) {
     const { pageType } = this.props;
     this.handleChangeLoading("sGetComment", true);
     const { API, type, businessId, limit } = this.props;
     this.axios
       .get(
-        `${API}/comments?type=${type}&business_id=${businessId}&page=${page}&limit=${limit}`
+        `${API}/comments?type=${type}&business_id=${businessId}&is_speak=${filterSpeak}&page=${page}&limit=${limit}`
       )
       .then(response => {
         const { list, page, total } = response.data;
       sUpdateComment: this.sUpdateComment,
       handleEdit: this.handleEdit
     };
+
     return (
       this.state.initDone && (
         <CommentContext.Provider value={value}>
               userId={this.state.content.user_id}
               content={this.state.content}
               handleClose={this.handleClose}
+              preRenderValue={this.props.preRenderValue}
             />
           )}
         </CommentContext.Provider>
   onUpdateComment: PropTypes.func,
   locales: PropTypes.string, //  传入的语言环境， en-US/zh-CN
   onCountChange: PropTypes.func, // 评论数量变更时的回调
-  onCommentFail: PropTypes.func // 评论失败时的回调
+  onCommentFail: PropTypes.func, // 评论失败时的回调
+  preRenderValue: PropTypes.func // 编辑器渲染前对值需要做的工作
 };
 
 App.defaultProps = {
   onUpdateComment: () => {},
   onBeforeUpdateComment: () => {},
   onCountChange: () => {},
-  onCommentFail: () => {}
+  onCommentFail: () => {},
+  preRenderValue: v => v
 };
 
 export { Editor, RenderText };

src/components/AudioPlayer/index.js

+import React from "react";
+import { Slider, Icon } from "antd";
+import dayjs from "dayjs";
+import durationPlugin from "dayjs/plugin/duration";
+import utcPlugin from "dayjs/plugin/utc";
+import "./index.less";
+import iconLoading from "../../assert/loading.gif";
+import btnAudioPlay from "../../assert/btn_audio_play.png";
+
+dayjs.extend(durationPlugin);
+dayjs.extend(utcPlugin);
+
+class AudioPlayer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      duration: 0,
+      currentDuration: 0,
+      isPlaying: false,
+      isLoading: false
+    };
+  }
+
+  componentDidMount() {
+    if (this.player) {
+      const { src } = this.props;
+      this.player.oncanplay = event =>
+        this.setState({ duration: event.target.duration });
+      this.player.onended = () =>
+        this.setState({ isPlaying: false, currentDuration: 0 });
+      this.player.onpause = () =>
+        this.setState({ isPlaying: false, isLoading: false });
+      this.player.onplay = () =>
+        this.setState({ isPlaying: false, isLoading: true });
+      this.player.onplaying = () =>
+        this.setState({ isPlaying: true, isLoading: false });
+      this.player.ontimeupdate = event =>
+        this.setState({ currentDuration: event.target.currentTime });
+      this.player.src = src;
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.src !== prevProps.src) {
+      this.player.oncanplay = event =>
+        this.setState({ duration: event.target.duration });
+      this.player.onended = () =>
+        this.setState({ isPlaying: false, currentDuration: 0 });
+      this.player.onpause = () =>
+        this.setState({ isPlaying: false, isLoading: false });
+      this.player.onplay = () =>
+        this.setState({ isPlaying: false, isLoading: true });
+      this.player.onplaying = () =>
+        this.setState({ isPlaying: true, isLoading: false });
+      this.player.ontimeupdate = event =>
+        this.setState({ currentDuration: event.target.currentTime });
+      this.player.src = this.props.src;
+    }
+  }
+
+  clickPlayOrPause(isPlaying) {
+    if (!this.player) {
+      return;
+    }
+    if (isPlaying) {
+      this.player.pause();
+    } else {
+      // 如果是播放，先暂停其他的播放
+      const playerList = document.getElementsByTagName("audio");
+      if (playerList) {
+        Array.from(playerList).forEach(player => {
+          if (!player.paused) {
+            player.pause();
+          }
+        });
+      }
+      this.player.play();
+    }
+  }
+
+  getPlayIcon() {
+    const { isPlaying, isLoading } = this.state;
+    let playIconElem;
+
+    if (isLoading) {
+      playIconElem = (
+        <img className="icon-loading" src={iconLoading} alt="iconLoading" />
+      );
+    } else if (isPlaying) {
+      playIconElem = <Icon className="pause" type="pause" />;
+    } else {
+      playIconElem = (
+        <img className="icon-loading" src={btnAudioPlay} alt="iconPlaying" />
+      );
+    }
+    return playIconElem;
+  }
+
+  render() {
+    const { currentDuration, isPlaying, duration } = this.state;
+    return (
+      <div className="comment-item-speak-audio-container">
+        {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+        <audio
+          ref={ref => {
+            this.player = ref;
+          }}
+          style={{ display: "none" }}
+        />
+        <span
+          className="icon"
+          onClick={() => {
+            this.clickPlayOrPause(isPlaying);
+          }}
+        >
+          {this.getPlayIcon()}
+        </span>
+        <Slider
+          step={0.001}
+          className="slider"
+          tooltipVisible={false}
+          value={currentDuration}
+          max={duration}
+          onChange={value => {
+            if (this.player) {
+              this.player.currentTime = value;
+            }
+          }}
+        />
+        <span className="time">
+          {dayjs
+            .utc(dayjs.duration(currentDuration, "seconds").asMilliseconds())
+            .format("mm:ss")}
+          /
+          {dayjs
+            .utc(dayjs.duration(duration, "seconds").asMilliseconds())
+            .format("mm:ss")}
+        </span>
+      </div>
+    );
+  }
+}
+
+export default AudioPlayer;

src/components/AudioPlayer/index.less

+.comment-item-speak-audio-container {
+  background-color: #f5f5f5;
+  border: 1px solid rgba(210, 210, 210, 1);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  .icon {
+    cursor: pointer;
+    width: 28px;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    border-radius: 14px;
+    background-color: #fff;
+    color: #71c135;
+    margin-left: 12px;
+    font-size: 14px;
+  }
+
+  .icon-loading {
+    width: 100%;
+    height: 100%;
+  }
+
+  .slider {
+    margin: 0 0 0 16px;
+    width: 195px;
+
+    :global {
+      .ant-slider-rail {
+        background-color: #dfdfdf;
+      }
+    }
+  }
+
+  .time {
+    margin-left: 14px;
+    color: #848484;
+    font-size: 12px;
+  }
+}
+
+@media screen and (max-width: 616px) and (min-width: 449px) {
+  .comment-item-speak-audio-container {
+    .slider {
+      width: 195px;
+    }
+  }
+}
+@media screen and (max-width: 449px) and (min-width: 365px) {
+  .comment-item-speak-audio-container {
+    .slider {
+      width: 114px;
+    }
+  }
+}
+@media screen and (max-width: 365px) {
+  .comment-item-speak-audio-container {
+    .slider {
+      width: 60px;
+    }
+  }
+}

src/components/CommentList/index.css

 .comment-list-pagination {
   text-align: center;
 }
+
+.comment-list-filter-speak {
+  margin-left: 20px;
+  font-size: 14px;
+  color: rgba(93, 93, 93, 0.65);
+}
+
+@media screen and (max-width: 365px) {
+  .comment-list-filter-speak {
+    float: right;
+  }
+}

src/components/CommentList/index.js

 import React, { Component } from "react";
-import { Spin, Pagination } from "antd";
+import { Spin, Pagination, Checkbox } from "antd";
 import intl from "react-intl-universal";
 import Comment from "../../Comment";
 import CommentBox from "../CommentBox";
 class CommentList extends Component {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      filterSpeak: 0
+    };
   }
 
   componentWillMount() {
       onPageChange,
       onGetMoreBtnClick
     } = this.props.app;
+    const { filterSpeak } = this.state;
     if (pageType === "slice") {
       // 截断多余评论，通过点击查看更多跳转
       return (
           <div
             className="comment-list-show-more"
             onClick={() => {
-              sGetComment({ page: page + 1 });
+              sGetComment({ page: page + 1, filterSpeak });
               onPageChange(page + 1);
             }}
           >
             current={page}
             total={total}
             onChange={p => {
-              sGetComment({ page: p });
+              sGetComment({ page: p, filterSpeak });
               onPageChange(p);
             }}
           />
   }
 
   render() {
-    const { list, total, loading } = this.props.app;
+    const {
+      list,
+      total,
+      loading,
+      isSpeak,
+      sGetComment,
+      onPageChange
+    } = this.props.app;
 
     const spinning = Boolean(
       loading.sGetComment || loading.sCommentFavor || loading.sReplyFavor
       <div>
         <Spin spinning={spinning}>
           {/* <div>共 {total} 条评论</div> */}
-          <div>{intl.get("comment.totalComment", { total })}</div>
+          <div>
+            {intl.get("comment.totalComment", { total })}
+            {isSpeak && (
+              <Checkbox
+                className="comment-list-filter-speak"
+                onChange={e => {
+                  this.setState({
+                    filterSpeak: e.target.checked ? 1 : 0
+                  });
+                  sGetComment({
+                    page: 1,
+                    filterSpeak: e.target.checked ? 1 : 0
+                  });
+                  onPageChange(1);
+                }}
+              >
+                {intl.get("comment.filterSpeak")}
+              </Checkbox>
+            )}
+          </div>
           {list.map(item => (
             <CommentBox
               content={item}

src/components/ContentItem/index.css

   word-break: break-all;
 }
 
+.comment-item-speak {
+  margin-top: 4px;
+}
+
+.comment-item-speak-message {
+  font-size: 14px;
+  color: #71c135;
+}
+
+.comment-item-speak-audio-wrapper {
+  margin-top: 8px;
+  width: 350px;
+  height: 44px;
+}
+
 .comment-item-bottom {
   display: flex;
   justify-content: flex-end;
     width: 85%;
     margin-left: 10px;
   }
+
+  .comment-item-speak-audio-wrapper {
+    width: 350px;
+  }
 }
 
 @media screen and (max-width: 449px) and (min-width: 365px) {
     width: 80%;
     margin-left: 10px;
   }
+
+  .comment-item-speak-audio-wrapper {
+    width: 266px;
+  }
 }
 
 @media screen and (max-width: 365px) {
     width: 75%;
     margin-left: 10px;
   }
+
+  .comment-item-speak-audio-wrapper {
+    width: 218px;
+  }
 }
 
 @media (max-width: 575px) {

src/components/ContentItem/index.js

 import { IMAGE_SPLIT } from "../../constant";
 import "./index.css";
 import ImagePreviewer from "../ImagePreviewer/ImagePreviewer";
+import AudioPlayer from "../AudioPlayer";
 
 // dayjs.locale("zh-cn");
 dayjs.extend(relativeTime);
       user_id,
       page
     } = this.props;
+    const { medias, is_speak: isSpeak } = content;
     const { locale, showHoverCard, showEdit } = this.props.app;
     const { showInput } = this.state;
     let newContent = content.content;
               )
             }}
           />
+
+          {isSpeak && (
+            <div className="comment-item-speak">
+              <span className="comment-item-speak-message">
+                [{intl.get("comment.speakComment")}]
+              </span>
+              <div className="comment-item-speak-audio-wrapper">
+                <AudioPlayer src={medias && medias[0] && medias[0].url} />
+              </div>
+            </div>
+          )}
           {// 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") {
+          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}>
-                        <div className="comment-img-divider" />
+                      <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>
                     );
-                  }
-                  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>
-          )}
+                  })}
+                {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>
                 </a>
               </div>
             ) : null}
-            {showEdit && app.userId === content.user_id && (
-              <i
-                className="comment-item-edit"
-                onClick={() =>
-                  this.props.app.handleEdit({
-                    action,
-                    replyId,
-                    commentId,
-                    userId: content.user_id,
-                    content,
-                    replyPage: page
-                  })
-                }
-              />
-            )}
+            {showEdit &&
+              !isSpeak &&
+              app.userId === content.user_id && (
+                <i
+                  className="comment-item-edit"
+                  onClick={() =>
+                    this.props.app.handleEdit({
+                      action,
+                      replyId,
+                      commentId,
+                      userId: content.user_id,
+                      content,
+                      replyPage: page
+                    })
+                  }
+                />
+              )}
             {app.userId === content.user_id && (
               <Popconfirm
                 // title="确定要删除吗?"
                 }
               />
             </div>
-            <span>&nbsp;{content.favor_count}</span>
+            <span>
+              &nbsp;
+              {content.favor_count}
+            </span>
             <div
               onClick={this.handleToggleInput}
               className="comment-item-reply"

src/components/EditComment/EditComment.js

               commentId={this.props.commentId}
               userId={this.props.content.user_id}
               fileList={this.state.fileList}
-              value={this.state.value}
+              value={
+                this.props.preRenderValue &&
+                this.props.preRenderValue(this.state.value)
+              }
               onChange={value => {
                 this.setState({
                   value

src/components/Editor/index.css

     height: 28px;
   }
 }
+
+.comment-img-popover {
+  /* 一行显示3张图 */
+  width: 336px;
+  min-height: 100px;
+  margin: 0 auto;
+}
+
+.comment-img-title {
+  margin: 5px auto;
+}
+.comment-img-title-counter {
+  color: #666;
+  font-weight: 400;
+}
+
+@media (max-width: 575px) {
+  .comment-img-popover {
+    /* 一行显示2张图 */
+    width: 224px;
+  }
+  .comment-img-title-counter {
+    display: none;
+  }
+}

src/components/Editor/index.js

-import React, { Fragment } from "react";
+import dayjs from "dayjs";
+import shortid from "shortid";
 import PropTypes from "prop-types";
-import { Icon, Button, Popover, Input, message } from "antd";
 import classnames from "classnames";
+import React, { Fragment } from "react";
 import intl from "react-intl-universal";
-import dayjs from "dayjs";
-import shortid from "shortid";
-import { OSS_LINK } from "../../constant";
-import { isFunction } from "../../helper";
-import Upload from "./Upload";
+import { Icon, Button, Popover, Input, message } from "antd";
 import Emoji from "./Emoji";
+import Upload from "./Upload";
 import Comment from "../../Comment";
+import { isMobile } from "./../../utils";
+import { OSS_LINK } from "../../constant";
+import { isFunction } from "../../helper";
 import {
   OSS_ENDPOINT,
   OSS_BUCKET,
       value: props.value || "", // 编辑器里面的值
       fileList: props.fileList || [], // 图片列表
       fileMap: {}, // 已经上传的图片路径和 uid 的映射 { uid: path }
-      uploadVisible: false
+      uploadVisible: false // 上传图片弹窗是否可视
     };
     this.handleChange = this.handleChange.bind(this);
     this.handleClickEmoji = this.handleClickEmoji.bind(this);
     this.handlePaste = this.handlePaste.bind(this);
     this.resetState = this.resetState.bind(this);
     this.handleEmojiScroll = this.handleEmojiScroll.bind(this);
+    this.handlePressEnter = this.handlePressEnter.bind(this);
+    this.invokeFileListChange = this.invokeFileListChange.bind(this);
   }
 
   componentDidMount() {
-    const { app, onRef } = this.props;
+    const { app, onRef, uploadDefaultShow } = this.props;
     if (
       app.currentUser &&
       (app.currentUser.user_id > 0 || app.currentUser.id > 0)
     if (isFunction(onRef)) {
       onRef(this);
     }
+    if (uploadDefaultShow) {
+      const uploadFileList = this.props.fileList || this.state.fileList;
+      if (uploadFileList.length > 0) {
+        this.setState({
+          uploadVisible: true,
+        });
+      }
+    }
   }
 
   handleEmojiScroll(e) {
     if (fileList.length > this.props.maxUpload) {
       list = fileList.slice(0, this.props.maxUpload);
     }
-    this.props.handleChangeFileList(list);
-    this.setState({ fileList: list });
+    this.invokeFileListChange(list);
   }
 
   /**
       }
       return item;
     });
-    this.props.handleChangeFileList(fileList);
-    this.setState({ fileMap, fileList });
+    this.setState({ fileMap });
+    this.invokeFileListChange(fileList);
+  }
+
+  /**
+   *  **统一处理fileList的修改**
+   *  1. upload
+   *  2. paste
+   *  PS: 移动端需要做额外操作
+   *  -- evo 20200223
+   */
+  invokeFileListChange(fileList) {
+    const { limitOne, handleChangeFileList } = this.props;
+    handleChangeFileList(fileList);
+    this.setState({ fileList });
+    if (limitOne && isMobile) {
+      const file = fileList[0];
+      if (
+        file &&
+        file.status === "done" &&
+        !file.thumbUrl.includes("data:image")
+      ) {
+        this.setState({ uploadVisible: false });
+      }
+    }
   }
 
   /**
             type: file.type,
             uid: new Date().valueOf()
           });
-          this.props.handleChangeFileList(fileList);
-          this.setState({
-            fileList
-          });
+          this.invokeFileListChange(fileList);
         })
         .catch(e => {
           const msg = e.message || ERROR_DEFAULT;
     return true;
   }
 
+  /**
+   *  **处理Enter事件**
+   *  1. `allowEnterSubmit`为true时enter触发submit事件
+   *  2. `e.preventDefault`为了防止enter事件后仍触发换行
+   *  3. enter事件开启后，仍可以用`shift + enter`触发换行
+   *  -- evo 20200222
+   */
+  handlePressEnter(e) {
+    if (this.props.allowEnterSubmit) {
+      if (!e.shiftKey) {
+        e.preventDefault();
+        this.handleSubmit();
+      }
+    }
+  }
+
   render() {
     const {
       value,
     const isLogin =
       app.currentUser &&
       (app.currentUser.user_id > 0 || app.currentUser.id > 0);
+
     return (
       <div className="comment-editor-container" onPaste={this.handlePaste}>
         {isLogin ? (
             <div className="comment-editor">
               <TextArea
                 value={inputValue}
-                onChange={e => this.handleChange(e.target.value)}
+                onChange={e => {
+                  this.handleChange(e.target.value);
+                }}
                 rows={rows}
                 placeholder={placeholder}
                 autoFocus={autoFocus}
+                onPressEnter={this.handlePressEnter}
               />
 
               <div className="comment-toolbar">
                         });
                       }}
                       content={
-                        <div
-                          style={{
-                            width: 336, // 一行显示3张
-                            minHeight: 100,
-                            margin: "0 auto"
-                          }}
-                        >
+                        <div className="comment-img-popover">
                           <Upload
                             onRef={node => (this.uploadRef = node)}
                             multiple={multiple}
                         </div>
                       }
                       title={
-                        <div style={{ margin: "5px auto" }}>
+                        <div className="comment-img-title">
                           <span>
                             {intl.get("editor.uploadTip")}
                             {maxUpload >= 2 ? (
-                              <span style={{ color: "#666", fontWeight: 400 }}>
+                              <span className="comment-img-title-counter">
                                 {intl.get("editor.uploadCount", {
                                   count: maxUpload - uploadFileList.length
                                 })}
   button: PropTypes.node,
   emojiToolIcon: PropTypes.node,
   imageToolIcon: PropTypes.node,
+  uploadDefaultShow: PropTypes.bool,
   showError: PropTypes.bool,
   onError: PropTypes.func,
-  maxLength: PropTypes.number
+  maxLength: PropTypes.number,
+  // Enter事件相关
+  allowEnterSubmit: PropTypes.bool,
+  // 私信仅允许选中一个，此处可以优化为通用的limit
+  limitOne: PropTypes.bool
 };
 
 Editor.defaultProps = {
   // placeholder: "说点什么吧",
   showEmoji: true,
   showUpload: true,
+  uploadDefaultShow: true,
   multiple: true,
   emojiPopoverPlacement: "bottomLeft",
   closeUploadWhenBlur: false,
   showError: true,
   maxLength: 5000,
   app: {},
-  handleChangeFileList: () => {}
+  handleChangeFileList: () => {},
+  // Enter事件相关
+  allowEnterSubmit: false,
+  limitOne: false
 };
 
 export default Comment(Editor);

src/index.js

           fileList={this.state.fileList}
           value={this.state.value}
           onChange={value => {
-            this.setState({
-              value
-            });
+            this.setState({ value });
           }}
           handleChangeFileList={fileList => {
-            console.log("----", fileList);
             this.setState({
               fileList
             });
           }}
+          allowEnterSubmit
+          limitOne
         />
       </App>
     );
 if (process.env.NODE_ENV !== "production") {
   renderComment({
     id: "root-comment",
-    type: 1,
-    businessId: "test",
+    type: 3,
+    businessId: "5ea8320dedd68200018e733d",
     businessUserId: 4,
     userId: 58297,
     currentUser: {
       });
     },
     onCountChange: c => {
-      console.log(c);
+      // console.log(c);
     },
     onDelete: (type, data) => {
       console.log(type, data);
     sendMessage: id => {
       console.log("sendMessage", id);
     },
+    preRenderValue: value => {
+      return `${value}`;
+    },
     editorProps: {
       onCommentSuccess: data => {
         console.log(data);

src/lang/en-US.js

     "Total {total, plural, =1 {one comment} other {# comments}}",
   "comment.reply": "Reply",
   "comment.moreComment": "More comments",
+  "comment.filterSpeak": "Show imitations only",
+  "comment.speakComment": "Imitation audio",
 
   "reply.totalReply": "Total {total, plural, =1 {one reply} other {# replies}}",
   "reply.moreReply": "More replies",

src/lang/zh-CN.js

   "comment.totalComment": "共{total}条评论",
   "comment.reply": "回复",
   "comment.moreComment": "更多评论",
+  "comment.filterSpeak": "只显示跟读",
+  "comment.speakComment": "跟读语音",
 
   "reply.totalReply": "共{total}条回复",
   "reply.moreReply": "更多回复",

src/utils.js

+/**
+ * 575: 为了和media query中的判断保持一致
+ */
+export const isMobile =
+  typeof window.orientation === "number" && document.body.offsetWidth < 575;