Merge branch 'feature/editor' of node/npmcomment into master

CHANGELOG.md

@@ -0,0 +1,27 @@
+# CHANGELOG
+
+## 0.2.0
+
+- [x] feat: 添加 showHeader 属性
+- [x] feat: 添加 onSubmit 属性
+- [x] feat: 添加 btnSubmitText 属性
+- [x] feat: 添加 btnLoading 属性
+- [x] feat: 添加 btnDisable 属性
+- [x] feat: 添加 button 属性
+- [x] feat: 添加 emojiToolIcon 属性
+- [x] feat: 添加 imageToolIcon 属性
+- [x] refactor: 完全解藕编辑器组件，由 Comment 实现评论逻辑
+- [x] fixed: 发呆表情变成了 undefined
+- [x] fixed: 输入表情之后，之前的文字被覆盖了
+- [x] fixed: 统一前后端错误提示
+- [x] styles: 样式都以 `comment` 开头
+
+## 0.1.0
+
+- [x] 不兼容更新。
+- [x] 添加了很多 `Props`
+- [x] 组件导出为 `Comment` 和 `Editor`
+
+
+
+

README.md

@@ -1,5 +1,116 @@
 # Comment
-通用评论系统
+
+通用评论系统及编辑器
+
+`version 0.2.0`
+
+```js
+import Comment, { Editor } from 'comment';
+```
+
+
+## Props
+
+#### Comment
+
+
+| props | type   | default  | required | description |
+| ----- | -------| -------- | -------- | ----------- |
+| type  | number |          | true     | 评论的 type  |
+| businessId | string |     | true     | 评论的 business id|
+| API  | string | http://api.links123.net/comment/v1 | false | API 前缀|
+| showList | boolean |   true  | false     | 是否显示评论列表|
+| showEditor | boolean |   true  | false     | 是否显示评论输入框|
+| showHeader | boolean |   true  | false     | 是否显示评论顶部的提示|
+
+
+
+##### Editor
+
+| props | type   | default  | required | description |
+| ----- | -------| -------- | -------- | ----------- |
+| rows  | number |       5   | false     | 编辑器的高度。默认情况下，回复评论/回复回复的编辑器会比评论的编辑器高度小一行 |
+| placeholder | string |  说点什么吧...   | false     | 评论的中的提示文字|
+| showEmoji | boolean |   true  | false     | 是否显示 Toolbar 中表情工具|
+| showUpload | boolean |   true  | false     | 是否显示 Toolbar 中 上传图片工具|
+| value | string |     | false     | 编辑器的值。如果设置了改属性，则编辑器变为受控组件，需要父组件来维护 value|
+| onChange | function(value) |     | false     | 编辑器内容改变的回调函数|
+| onSubmit | function(value)  |     | false     | 点击提交按钮的回调函数|
+| btnSubmitText | string  | 发表    | false     | 提交按钮的文字|
+| btnLoading | boolean  | false    | false     | 按钮是否正在加载中|
+| btnDisable | boolean  | false    | false     | 按钮是否禁用|
+| button | ReactNode  |     | false     | 按钮组件。如果上面几个 btn 相关的属性都无法满足要求，则可以使用 button 来自定义提交编辑器值的按钮|
+| emojiToolIcon | ReactNode  |     | false     | Toolbar 中表情的图标 |
+| imageToolIcon | ReactNode  |     | false     | Toolbar 中上传文件的图标 |
+
+### 什么时候不要使用 value/onChange/onSubmit
+
+如果将 `comment` 作为通用评论组件，则不要使用 `value` `onChange` `onSubmit`。因为组件内部，实现了通用评论的业务逻辑。
+
+**可以使用 value/onChange/onSubmit 的情况:**
+
+- 单独使用其中的 `Editor`。即 `import { Editor } from 'comment'`
+- 不需要展示评论列表，即设置 `showList: false`
+
+```jsx
+// 单独使用 Editor
+<Editor value="xxx" onChange={(v) => console.log(v)} />
+
+// 不需要展示评论列表
+
+<Comment type={1}  showList={false}>
+  <Editor value="xxx" onChange={(v) => console.log(v)} />
+</Comment>
+
+```
+
+### button 
+
+如果使用 `button`，则 `btnLoading` `btnDisable` `btnSubmitText` 都会失效。因为这些属性是针对于编辑器默认的提交按钮设置的。
+
+所以如果要提交编辑器的值，需要自己在 `Button` 组件上实现提交功能。编辑器的值，可以通过 `onChange` 方法获取到。
+
+如果使用了 `button` 属性，并且没有为其设置 `onClick` 方法，则 `onClick` 默认为发布评论，即点击按钮会发表评论:
+
+```jsx
+// 如下代码所示
+// 点击“自定义按钮”的时候，会发表评论。这是由 Comment 组件内部实现的业务逻辑
+<Comment type={1} businessId="test" showList={false}>
+  <Editor 
+    button={(
+      <Button
+        type="primary"
+        ghost
+      >
+        自定义按钮
+      </Button>
+    )}
+  />
+</Comment>
+```
+
+如果使用了 `button` 属性，并且设置了 `onClick` 方法，则会覆盖默认的 `onClick` 方法:
+
+```jsx
+// 下面的代码，点击的时候，不会提交评论
+// 而是会输出 state 的值（
+// 即编辑器的值，因为 onChange 将编辑器输入的值通过回调函数传递给了父组件）
+<Comment type={1} businessId="test" showList={false}>
+  <Editor 
+    button={(
+      <Button
+        type="primary"
+        ghost
+        value={this.state.value}
+        onChange={(value) => this.setState({ value })}
+        onClick={() => console.log(this.state.value)}
+      >
+        自定义按钮
+      </Button>
+    )}
+  />
+</Comment>
+```
 
 
 ## 使用
@@ -23,39 +134,24 @@ import Comment, { Editor } from 'comment'
 
 render() {
   return (
-    <Comment>
+    <Comment type={1} businessId="test">
       <Editor />
     </Comment>
   )
 }
 ```
 
-**注意：最好，还需要在 HTML 文件里面引入阿里云 OSS SDK `<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>`**
+**注意：最后，还需要在 HTML 文件里面引入阿里云 OSS SDK `<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>`**
 
 
 ### 作为静态文件引入
 
-作为静态问卷使用的话，首先需要在 `index.js` 里面设置好组件的 `props`：
+作为静态问卷使用的话，首先需要在 `index.js` 里面设置好组件的 `props`，主要是 `type` 和 `businessId`：
 
 ```js
 // ...
-const props = {
-  type: 1,
-  businessId: "1",
-  API: "http://api.links123.net/comment/v1",
-  showList: false
-};
-
-const editorProps = {
-  showEmoji: true,
-  placeholder: "说点什么吧",
-  rows: 5,
-};
-
-
-// ...
-<App {...props}>
-    <Editor {...editorProps} />
+<App type={1} businessId="test">
+    <Editor />
 </App>
 ```
 
@@ -65,10 +161,10 @@ const editorProps = {
 $ yarn build
 ```
 
-打包后会得到静态问卷，分别通过 link 和 script 标签在你的项目里面引入打包后的文件。
+打包后会得到静态文件，分别通过 link 和 script 标签在你的项目里面引入打包后的文件。
 
 
-然后还需要引入 OSS SDK，用于直传文件到 OSS。
+接下来还需要引入 OSS SDK，用于直传文件到 OSS。
 
 
 最后创建一个 id 为 `root-comment` 的标签，作为渲染通用评论的跟元素。
@@ -93,33 +189,6 @@ $ yarn build
 </html>
 ```
 
-## Props
-
-#### Comment
-
-
-| props | type   | default  | required | description |
-| ----- | -------| -------- | -------- | ----------- |
-| type  | number |          | true     | 评论的 type  |
-| businessId | string |     | true     | 评论的 business id|
-| API  | string | http://api.links123.net/comment/v1 | false | API 前缀|
-| showList | boolean |   true  | true     | 是否显示评论列表|
-| showEditor | boolean |   true  | true     | 是否显示评论输入框|
-
-
-##### Editor
-
-| props | type   | default  | required | description |
-| ----- | -------| -------- | -------- | ----------- |
-| rows  | number |       5   | false     | 编辑器的高度  |
-| placeholder | string |  说点什么吧...   | false     | 评论的中的提示文字|
-| submitText | string |  发表  | false     | 提交按钮的文字|
-| showEmoji | boolean |   true  | false     | 是否显示 Toolbar 中表情工具|
-| showUpload | boolean |   true  | false     | 是否显示 Toolbar 中 上传图片工具|
-| onChange | function |     | false     | 编辑器内容改变的回调函数|
-| onSubmit | function |     | false     | TODO... 尚未完成。点击提交按钮的回调函数|
-
-
 ## 开发
 
 ```
@@ -130,12 +199,15 @@ $ yarn start
 ```
 
 - `yarn build` 将项目打包成一个单页应用
-- `yarn lib` 将项目打包成一个组件
+- `yarn lib` 将项目打包成一个 es5 组件
 - `yarn prettier` 格式化代码
 
 ## TODO
 
-- [ ] 前后端统一错误码
+- [x] 前后端统一错误码
 - [x] type 和 businessID 的定义
-- [ ] Editor onSubmit 回调
+- [x] Editor onSubmit 回调
+- [ ] 对评论的回复点赞，报错
+- [ ] oss/sts 接口报错
+- [ ] 头像 404 `https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/`
 

lib/App.css

@@ -7,3 +7,16 @@
   position: fixed;
   top: 45%;
 }
+.comment-header-tag {
+  border: 1px solid #cecece;
+  border-radius: 0;
+  color: #666;
+}
+.comment-header-tip {
+  color: #5198eb;
+  margin-right: 15px;
+  margin-left: 5px;
+}
+.comment-header-text {
+  color: #666;
+}

lib/App.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Editor = undefined;
 
+var _tag = require("antd/es/tag");
+
+var _tag2 = _interopRequireDefault(_tag);
+
 var _message2 = require("antd/es/message");
 
 var _message3 = _interopRequireDefault(_message2);
@@ -13,6 +17,8 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 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/tag/style/css");
+
 require("antd/es/message/style/css");
 
 var _react = require("react");
@@ -45,6 +51,10 @@ var _Editor = require("./components/Editor");
 
 var _Editor2 = _interopRequireDefault(_Editor);
 
+var _lang = require("./lang");
+
+var _lang2 = _interopRequireDefault(_lang);
+
 require("./App.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -82,6 +92,7 @@ var App = function (_Component) {
     _this.sCreateComment = _this.sCreateComment.bind(_this);
     _this.sCreateReply = _this.sCreateReply.bind(_this);
     _this.sCommentFavor = _this.sCommentFavor.bind(_this);
+    _this.sReplyFavor = _this.sReplyFavor.bind(_this);
     _this.sOssSts = _this.sOssSts.bind(_this);
     return _this;
   }
@@ -154,10 +165,10 @@ var App = function (_Component) {
         }
       }).catch(function (error) {
         if (error.response && error.response.data && error.response.data.msg) {
-          _message3.default.error(error.response.data.msg || _constant.ERROR_DEFAULT);
+          _message3.default.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
           return;
         }
-        _message3.default.error(error.message || _constant.ERROR_DEFAULT);
+        _message3.default.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
       }).finally(function () {
         _this2.handleChangeLoading("sGetComment", false);
       });
@@ -181,23 +192,25 @@ var App = function (_Component) {
       var API = this.props.API;
 
       _axios2.default.get(API + "/replies?comment_id=" + commentId + "&page=" + page + "&limit=" + _constant.LIMIT).then(function (response) {
-        var replies = response.data.list;
-
-        if (!replies) {
+        if (!response.data.list) {
           _message3.default.info("没有更多数据了！");
         }
         var list = _this3.state.list.map(function (item) {
           if (item.id === commentId) {
             if (!item.replies) item.replies = [];
-            if (replies) {
+            if (response.data.list) {
               if (page === 1) {
                 // 如果当前页数为第一页，则清空当前所有的 replies
                 // 并将获取到的 replies 存放在 state
-                item.replies = replies;
+                item.replies = response.data.list;
               } else {
-                item.replies = item.replies.concat(replies);
+                item.replies = item.replies.filter(function (o) {
+                  return !o.isTemporary;
+                }).concat(response.data.list);
                 // 如果当前页数非第一页，则合并 replies
               }
+              item.reply_count = response.data.total;
+              item.reply_page = response.data.page;
             } else {
               item.isNoMoreReply = true;
             }
@@ -207,10 +220,10 @@ var App = function (_Component) {
         _this3.setState({ list: list });
       }).catch(function (error) {
         if (error.response && error.response.data && error.response.data.msg) {
-          _message3.default.error(error.response.data.msg || _constant.ERROR_DEFAULT);
+          _message3.default.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
           return;
         }
-        _message3.default.error(error.message || _constant.ERROR_DEFAULT);
+        _message3.default.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
       }).finally(function () {
         _this3.handleChangeLoading("sGetReply", false);
       });
@@ -218,14 +231,17 @@ var App = function (_Component) {
 
     /**
      * 添加评论
-     * @param {string} content comment content
+     * @param {object} {content} comment content
      */
 
   }, {
     key: "sCreateComment",
-    value: function sCreateComment(content) {
+    value: function sCreateComment() {
       var _this4 = this;
 
+      var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          content = _ref3.content;
+
       if (!content) return _message3.default.error("评论内容不能为空 ");
       this.handleChangeLoading("sCreateComment", true);
       var _props2 = this.props,
@@ -246,18 +262,20 @@ var App = function (_Component) {
         // 将数据写入到 list 中
         // 临时插入
         // 等到获取数据之后，删除临时数据
-        var list = _this4.state.list;
+        var _state = _this4.state,
+            list = _state.list,
+            total = _state.total;
 
         list.unshift(_extends({}, response.data, {
           isTemporary: true // 临时的数据
         }));
-        _this4.setState({ list: list });
+        _this4.setState({ list: list, total: total + 1 });
       }).catch(function (error) {
         if (error.response && error.response.data && error.response.data.msg) {
-          _message3.default.error(error.response.data.msg || _constant.ERROR_DEFAULT);
+          _message3.default.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
           return;
         }
-        _message3.default.error(error.message || _constant.ERROR_DEFAULT);
+        _message3.default.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
       }).finally(function () {
         _this4.handleChangeLoading("sCreateComment", false);
       });
@@ -274,6 +292,8 @@ var App = function (_Component) {
     value: function sCreateReply(data, cb) {
       var _this5 = this;
 
+      console.log("list: ", this.state.list);
+
       if (!data.content) return _message3.default.error("回复内容不能为空 ");
       this.handleChangeLoading("sCreateReply", true);
       var API = this.props.API;
@@ -283,32 +303,35 @@ var App = function (_Component) {
         data: data,
         withCredentials: true
       }).then(function (response) {
-        // // 将该条数据插入到 list 中
-        // const list = this.state.list.map(item => {
-        //   if (item.id === data.comment_id) {
-        //     if (!item.replies) item.replies = [];
-        //     item.reply_count += 1
-        //     item.replies.unshift(response.data);
-        //   }
-        //   return item;
-        // });
-        // this.setState({ list });
-        _this5.sGetReply({ commentId: data.comment_id });
         _message3.default.success("回复成功！");
         if ((0, _helper.isFunction)(cb)) cb();
+        // 将数据写入到 list 中
+        // 临时插入
+        // 等到获取数据之后，删除临时数据
+        var list = _this5.state.list.map(function (item) {
+          if (item.id === data.comment_id) {
+            if (!item.replies) item.replies = [];
+            item.replies.push(_extends({}, response.data, {
+              isTemporary: true // 临时的数据
+            }));
+            item.reply_count += 1;
+          }
+          return item;
+        });
+        _this5.setState({ list: list });
       }).catch(function (error) {
         if (error.response && error.response.data && error.response.data.msg) {
-          _message3.default.error(error.response.data.msg || _constant.ERROR_DEFAULT);
+          _message3.default.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
           return;
         }
-        _message3.default.error(error.message || _constant.ERROR_DEFAULT);
+        _message3.default.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
       }).finally(function () {
         _this5.handleChangeLoading("sCreateReply", false);
       });
     }
 
     /**
-     * 点赞/取消点赞
+     * 评论 点赞/取消点赞
      * @param {string} commentId { commentId }
      * @param {boolean} favored   是否已经点过赞
      */
@@ -337,15 +360,60 @@ var App = function (_Component) {
         _this6.setState({ list: list });
       }).catch(function (error) {
         if (error.response && error.response.data && error.response.data.msg) {
-          _message3.default.error(error.response.data.msg || _constant.ERROR_DEFAULT);
+          _message3.default.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
           return;
         }
-        _message3.default.error(error.message || _constant.ERROR_DEFAULT);
+        _message3.default.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
       }).finally(function () {
         _this6.handleChangeLoading("sCommentFavor", false);
       });
     }
 
+    /**
+     * 回复 点赞/取消点赞
+     * @param {string} replyId  replyId
+     * @param {string} commentId  commentId
+     * @param {boolean} favored   是否已经点过赞
+     */
+
+  }, {
+    key: "sReplyFavor",
+    value: function sReplyFavor(replyId, commentId, favored) {
+      var _this7 = this;
+
+      this.handleChangeLoading("sReplyFavor", true);
+      console.log("replyId, commentId ", replyId, commentId);
+
+      var API = this.props.API;
+
+      (0, _axios2.default)(API + "/replies/" + replyId + "/favor", {
+        method: favored ? "delete" : "put",
+        withCredentials: true
+      }).then(function (response) {
+        console.log("response: ", response);
+
+        _message3.default.success(favored ? "取消点赞成功！" : "点赞成功！");
+        // TODO: (2018.07.20 node) 对评论的回复点赞，报错
+        // // 更新 list 中的该项数据的 favored
+        // const list = this.state.list.map(item => {
+        //   if (item.id === replyId) {
+        //     item.favored = !favored;
+        //     item.favor_count += favored ? -1 : 1;
+        //   }
+        //   return item;
+        // });
+        // this.setState({ list });
+      }).catch(function (error) {
+        if (error.response && error.response.data && error.response.data.msg) {
+          _message3.default.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
+          return;
+        }
+        _message3.default.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
+      }).finally(function () {
+        _this7.handleChangeLoading("sReplyFavor", false);
+      });
+    }
+
     /**
      * 获取 OSS 上传的参数
      */
@@ -353,21 +421,21 @@ var App = function (_Component) {
   }, {
     key: "sOssSts",
     value: function sOssSts() {
-      var _this7 = this;
+      var _this8 = this;
 
       this.handleChangeLoading("sOssSts", true);
       var API = this.props.API;
 
       _axios2.default.get(API + "/oss/sts").then(function (response) {
-        _this7.setState({ oss: _extends({}, response.data) });
+        _this8.setState({ oss: _extends({}, response.data) });
       }).catch(function (error) {
         if (error.response && error.response.data && error.response.data.msg) {
-          _message3.default.error(error.response.data.msg || _constant.ERROR_DEFAULT);
+          _message3.default.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
           return;
         }
-        _message3.default.error(error.message || _constant.ERROR_DEFAULT);
+        _message3.default.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
       }).finally(function () {
-        _this7.handleChangeLoading("sOssSts", false);
+        _this8.handleChangeLoading("sOssSts", false);
       });
     }
   }, {
@@ -378,6 +446,7 @@ var App = function (_Component) {
         sCreateComment: this.sCreateComment,
         sGetComment: this.sGetComment,
         sCommentFavor: this.sCommentFavor,
+        sReplyFavor: this.sReplyFavor,
         sCreateReply: this.sCreateReply,
         sGetReply: this.sGetReply,
         sOssSts: this.sOssSts
@@ -389,6 +458,25 @@ var App = function (_Component) {
         _react2.default.createElement(
           "div",
           { className: "comment" },
+          this.props.showHeader && _react2.default.createElement(
+            "div",
+            { style: { marginBottom: 15 } },
+            _react2.default.createElement(
+              _tag2.default,
+              { className: "comment-header-tag" },
+              "\u7559\u8A00"
+            ),
+            _react2.default.createElement(
+              "span",
+              { className: "comment-header-tip" },
+              "\u53E3\u7891"
+            ),
+            _react2.default.createElement(
+              "span",
+              { className: "comment-header-text" },
+              "(\u5168\u7AD9\u6311\u51FA\u6BDB\u75C5\u6216\u63D0\u51FA\u5408\u7406\u5EFA\u8BAE\uFF0C\u5956\u52B110\u5230100\u5143\u7EA2\u5305)"
+            )
+          ),
           this.props.showEditor && _react2.default.createElement(_CommentInput2.default, { content: this.props.children }),
           this.props.showList && _react2.default.createElement(
             "div",
@@ -408,13 +496,15 @@ App.propTypes = {
   businessId: _propTypes2.default.string.isRequired, // 评论的 business_id
   API: _propTypes2.default.string, // 评论的 API 前缀
   showList: _propTypes2.default.bool, // 是否显示评论列表
-  showEditor: _propTypes2.default.bool // 是否显示评论输入框
+  showEditor: _propTypes2.default.bool, // 是否显示评论输入框
+  showHeader: _propTypes2.default.bool // 是否显示评论顶部的提示
 };
 
 App.defaultProps = {
   API: "http://api.links123.net/comment/v1",
   showList: true,
-  showEditor: true
+  showEditor: true,
+  showHeader: true
 };
 
 exports.Editor = _Editor2.default;

lib/components/CommentBox/index.css

@@ -1,4 +1,4 @@
-.showMore {
+.comment-show-more {
   color: #4a90e2;
   text-align: center;
   width: 100px;
@@ -8,40 +8,41 @@
   margin: 0 auto;
   transition: all 0.3s;
 }
-.showMore:hover {
+.comment-show-more:hover {
   background-color: #f5f5f5;
   color: #1890ff;
 }
-.moreBox {
+.comment-more-box {
   text-align: center;
   width: 90%;
-  margin-left: 40px;
+  margin-left: 50px;
+  margin-top: 10px;
   height: 40px;
   display: inline-block;
 }
 @media screen and (max-width: 616px) and (min-width: 449px) {
-  .moreBox {
+  .comment-more-box {
     text-align: center;
     width: 85%;
-    margin-left: 40px;
+    margin-left: 50px;
     height: 40px;
     display: inline-block;
   }
 }
 @media screen and (max-width: 449px) and (min-width: 365px) {
-  .moreBox {
+  .comment-more-box {
     text-align: center;
     width: 80%;
-    margin-left: 40px;
+    margin-left: 50px;
     height: 40px;
     display: inline-block;
   }
 }
 @media screen and (max-width: 365px) {
-  .moreBox {
+  .comment-more-box {
     text-align: center;
     width: 75%;
-    margin-left: 40px;
+    margin-left: 50px;
     height: 40px;
     display: inline-block;
   }

lib/components/CommentBox/index.js

@@ -86,12 +86,13 @@ var CommentBox = function (_Component) {
     /**
      * 渲染回复 DOM
      * @param {array} replies 回复列表
+     * @param {number} replies 回复的数量
      * @param {boolean} isNoMoreReply 是否没有更多回复
      */
 
   }, {
     key: "renderReplies",
-    value: function renderReplies(replies, isNoMoreReply) {
+    value: function renderReplies(replies, replyCount, isNoMoreReply) {
       var _this2 = this;
 
       var commentId = this.props.commentId;
@@ -109,14 +110,14 @@ var CommentBox = function (_Component) {
                 replyId: item.id,
                 key: item.id,
                 content: item,
-                type: "reply"
+                action: "replyToReply" // 回复的回复
               }), _react2.default.createElement(
                 "div",
-                { className: "moreBox", key: "show_more_button" },
-                !isNoMoreReply && _react2.default.createElement(
+                { className: "comment-more-box", key: "show_more_button" },
+                !isNoMoreReply && replyCount !== len && _react2.default.createElement(
                   "span",
                   {
-                    className: "showMore",
+                    className: "comment-show-more",
                     onClick: function onClick() {
                       return _this2.handleGetMoreReply(commentId);
                     }
@@ -139,7 +140,7 @@ var CommentBox = function (_Component) {
               replyId: item.id,
               key: item.id,
               content: item,
-              type: "reply"
+              action: "replyToReply" // 评论的回复
             });
           })
         );
@@ -160,9 +161,9 @@ var CommentBox = function (_Component) {
           onShowReply: this.handleToggleReply,
           showReply: showReply,
           commentId: content.id,
-          type: "comment"
+          action: "reply" // 评论的回复
         }),
-        this.renderReplies(content.replies, content.isNoMoreReply)
+        this.renderReplies(content.replies, content.reply_count, content.isNoMoreReply)
       );
     }
   }]);

lib/components/CommentInput/index.js

@@ -16,8 +16,6 @@ var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _constant = require("../../constant");
-
 var _Comment = require("../../Comment");
 
 var _Comment2 = _interopRequireDefault(_Comment);
@@ -38,160 +36,63 @@ var CommentInput = function (_Component) {
 
     var _this = _possibleConstructorReturn(this, (CommentInput.__proto__ || Object.getPrototypeOf(CommentInput)).call(this, props));
 
-    _this.state = {
-      value: "",
-
-      fileList: [], // 图片列表
-      fileMap: {} // 已经上传的图片路径和 uid 的映射 { uid: path }
-    };
-    _this.handleChange = _this.handleChange.bind(_this);
+    _this.state = {};
     _this.handleSubmit = _this.handleSubmit.bind(_this);
-    _this.handleChangeFileList = _this.handleChangeFileList.bind(_this);
-    _this.handleChangeEmoji = _this.handleChangeEmoji.bind(_this);
-    _this.handleUpload = _this.handleUpload.bind(_this);
     return _this;
   }
 
   _createClass(CommentInput, [{
-    key: "handleChange",
-    value: function handleChange(value) {
-      this.setState({ value: value });
-    }
-  }, {
-    key: "handleChangeFileList",
-    value: function handleChangeFileList(fileList) {
-      this.setState({ fileList: fileList });
-    }
-  }, {
-    key: "handleChangeEmoji",
-    value: function handleChangeEmoji(emojiId) {
-      var value = this.state.value;
-
-      value += "[" + emojiId + "]";
-      this.setState({ value: value });
-      _react2.default.Children.forEach(this.props.content, function (child) {
-        // 如果 Editor 的父组件传入了 onChange 事件，则需要将改变之后的值传递给父组件
-        if (child.props.onChange) {
-          child.props.onChange(value);
-        }
-      });
-    }
-  }, {
-    key: "handleUpload",
-    value: function handleUpload(_ref) {
-      var uid = _ref.uid,
-          path = _ref.path;
-      var fileMap = this.state.fileMap;
-
-      fileMap[uid] = path;
-      this.setState({ fileMap: fileMap });
-    }
-  }, {
     key: "handleSubmit",
-    value: function handleSubmit() {
-      var _state = this.state,
-          value = _state.value,
-          fileMap = _state.fileMap,
-          fileList = _state.fileList;
-
-      if (fileList.length) {
-        value += "<br/>";
-        fileList.forEach(function (item) {
-          value += "[" + _constant.OSS_LINK + fileMap[item.uid] + "]";
-        });
-      }
-
+    value: function handleSubmit(value) {
       var _props = this.props,
-          type = _props.type,
+          action = _props.action,
           commentId = _props.commentId,
           replyId = _props.replyId,
-          handleToggleInput = _props.handleToggleInput;
+          callback = _props.callback;
 
-      if (type === "normal") {
+      if (action === "comment") {
         this.props.app.sCreateComment({
           content: value
         });
-      } else if (type === "comment") {
+      } else if (action === "reply") {
         this.props.app.sCreateReply({
           comment_id: commentId,
           content: value
         }, function () {
-          return handleToggleInput();
+          return callback && callback();
         });
-      } else if (type === "reply") {
+      } else if (action === "replyToReply") {
         this.props.app.sCreateReply({
           comment_id: commentId,
           content: value,
           reply_id: replyId
         }, function () {
-          return handleToggleInput();
+          return callback && callback();
         });
       }
-
-      _react2.default.Children.forEach(this.props.content, function (child) {
-        // 如果 Editor 的父组件传入了 onSubmit 事件，则需要将改变之后的值传递给父组件
-        if (child.props.onSubmit) {
-          child.props.onSubmit(value);
-        }
-      });
     }
   }, {
     key: "render",
     value: function render() {
       var _this2 = this;
 
-      var type = this.props.type;
-      var _state2 = this.state,
-          value = _state2.value,
-          fileList = _state2.fileList;
-
-
       var childrenWithProps = _react2.default.Children.map(this.props.content, function (child) {
         return _react2.default.cloneElement(child, _extends({
-          value: value,
-          fileList: fileList,
-          onChange: _this2.handleChange,
-          onSubmit: _this2.handleSubmit,
-          onChangeFileList: _this2.handleChangeFileList,
-          onChangeEmoji: _this2.handleChangeEmoji,
-          onUpload: _this2.handleUpload,
-          loading: _this2.props.app.loading.sCreateComment
-        }, child.props));
+          // 编辑器本身不提交值，但 CommentInput 会提交
+          // CommentInput 主要是负责评论的业务逻辑，提交评论和回复
+          // 默认使用 CommentInput 的 onSubmit 来提交评论
+          // 但也可以使用 Editor 的 props 来覆盖 onSubmit
+          onSubmit: _this2.handleSubmit
+        }, child.props, {
+          // 如果当前的编辑器不是“评论”，则编辑器高度减小一些
+          rows: _this2.props.action === "comment" ? child.props.rows : child.props.rows - 1
+        }));
       });
 
       return _react2.default.createElement(
         "div",
         null,
-        type === "normal" ? _react2.default.createElement(
-          "div",
-          null,
-          _react2.default.createElement(
-            "span",
-            {
-              style: {
-                border: "1px solid #CECECE",
-                color: "#666",
-                padding: "2px 3px"
-              }
-            },
-            "\u56DE\u590D"
-          ),
-          _react2.default.createElement(
-            "span",
-            { style: { marginLeft: "20px", color: "#5198EB" } },
-            "\u53E3\u7891",
-            _react2.default.createElement(
-              "span",
-              { style: { marginLeft: "20px", color: "#666666" } },
-              "(\u5168\u7AD9\u6311\u51FA\u6BDB\u75C5\u6216\u63D0\u51FA\u5408\u7406\u5EFA\u8BAE\uFF0C\u5956\u52B110\u5230100\u5143\u7EA2\u5305)"
-            )
-          )
-        ) : null,
-        _react2.default.createElement(
-          "div",
-          { style: { marginTop: 40 } },
-          childrenWithProps
-        )
+        childrenWithProps
       );
     }
   }]);
@@ -200,12 +101,14 @@ var CommentInput = function (_Component) {
 }(_react.Component);
 
 CommentInput.propTypes = {
-  // normal 有切换回复/口碑的 header ; comment 评论输入框 / reply 回复输入框
-  type: _propTypes2.default.oneOf(["normal", "comment", "reply"])
+  // comment 评论
+  // reply 评论的回复
+  // replyToReply 回复的回复
+  action: _propTypes2.default.oneOf(["comment", "reply", "replyToReply"])
 };
 
 CommentInput.defaultProps = {
-  type: "normal"
+  action: "comment"
 };
 
 exports.default = (0, _Comment2.default)(CommentInput);

lib/components/CommentList/index.css

@@ -1,4 +1,4 @@
-.showMore {
+.comment-list-show-more {
   color: #4a90e2;
   text-align: center;
   width: 100%;
@@ -8,7 +8,7 @@
   margin: 40px auto;
   transition: all 0.3s;
 }
-.showMore:hover {
+.comment-list-show-more:hover {
   background-color: #f5f5f5;
   color: #1890ff;
 }

lib/components/CommentList/index.js

@@ -56,26 +56,34 @@ var CommentList = function (_Component) {
     value: function render() {
       var _props$app = this.props.app,
           list = _props$app.list,
+          total = _props$app.total,
           page = _props$app.page,
           loading = _props$app.loading,
           isNoMoreComment = _props$app.isNoMoreComment,
           sGetComment = _props$app.sGetComment;
 
 
-      var spinning = Boolean(loading.sGetComment || loading.sCommentFavor);
+      var spinning = Boolean(loading.sGetComment || loading.sCommentFavor || loading.sReplyFavor);
       return _react2.default.createElement(
         "div",
         null,
         _react2.default.createElement(
           _spin2.default,
           { spinning: spinning },
+          _react2.default.createElement(
+            "div",
+            null,
+            "\u5171 ",
+            total,
+            " \u6761\u8BC4\u8BBA"
+          ),
           list.map(function (item) {
             return _react2.default.createElement(_CommentBox2.default, { content: item, key: item.id, commentId: item.id });
           }),
-          !isNoMoreComment && _react2.default.createElement(
+          !isNoMoreComment && list.length !== total && _react2.default.createElement(
             "div",
             {
-              className: "showMore",
+              className: "comment-list-show-more",
               onClick: function onClick() {
                 return sGetComment({ page: page + 1 });
               }

lib/components/CommentList/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CommentList/index.js"],"names":["CommentList","props","state","app","sGetComment","list","page","loading","isNoMoreComment","spinning","Boolean","sCommentFavor","map","item","id","Component","propTypes"],"mappings":";;;;;;;;;;;;;;AAAA;;;;AAEA;;;;AACA;;;;AACA;;;;;;;;;;IAEMA,W;;;AACJ,uBAAYC,KAAZ,EAAmB;AAAA;;AAAA,0HACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa,EAAb;AAFiB;AAGlB;;;;yCAEoB;AACnB,WAAKD,KAAL,CAAWE,GAAX,CAAeC,WAAf;AACD;;;6BAEQ;AAAA,uBAOH,KAAKH,KAAL,CAAWE,GAPR;AAAA,UAELE,IAFK,cAELA,IAFK;AAAA,UAGLC,IAHK,cAGLA,IAHK;AAAA,UAILC,OAJK,cAILA,OAJK;AAAA,UAKLC,eALK,cAKLA,eALK;AAAA,UAMLJ,WANK,cAMLA,WANK;;;AASP,UAAMK,WAAWC,QAAQH,QAAQH,WAAR,IAAuBG,QAAQI,aAAvC,CAAjB;AACA,aACE;AAAA;AAAA;AACE;AAAA;AAAA,YAAM,UAAUF,QAAhB;AACGJ,eAAKO,GAAL,CAAS;AAAA,mBACR,8BAAC,oBAAD,IAAY,SAASC,IAArB,EAA2B,KAAKA,KAAKC,EAArC,EAAyC,WAAWD,KAAKC,EAAzD,GADQ;AAAA,WAAT,CADH;AAKG,WAACN,eAAD,IACC;AAAA;AAAA;AACE,yBAAU,UADZ;AAEE,uBAAS;AAAA,uBAAMJ,YAAY,EAAEE,MAAMA,OAAO,CAAf,EAAZ,CAAN;AAAA;AAFX;AAIE;AAAA;AAAA;AAAA;AAAA;AAJF;AANJ;AADF,OADF;AAkBD;;;;EAtCuBS,gB;;AAyC1Bf,YAAYgB,SAAZ,GAAwB,EAAxB;;kBAEe,uBAAQhB,WAAR,C","file":"index.js","sourcesContent":["import React, { Component } from \"react\";\nimport { Spin } from \"antd\";\nimport Comment from \"../../Comment\";\nimport CommentBox from \"../CommentBox\";\nimport \"./index.css\";\n\nclass CommentList extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {};\n  }\n\n  componentWillMount() {\n    this.props.app.sGetComment();\n  }\n\n  render() {\n    const {\n      list,\n      page,\n      loading,\n      isNoMoreComment,\n      sGetComment\n    } = this.props.app;\n\n    const spinning = Boolean(loading.sGetComment || loading.sCommentFavor);\n    return (\n      <div>\n        <Spin spinning={spinning}>\n          {list.map(item => (\n            <CommentBox content={item} key={item.id} commentId={item.id} />\n          ))}\n\n          {!isNoMoreComment && (\n            <div\n              className=\"showMore\"\n              onClick={() => sGetComment({ page: page + 1 })}\n            >\n              <span>查看更多评论</span>\n            </div>\n          )}\n        </Spin>\n      </div>\n    );\n  }\n}\n\nCommentList.propTypes = {};\n\nexport default Comment(CommentList);\n"]}
+{"version":3,"sources":["../../../src/components/CommentList/index.js"],"names":["CommentList","props","state","app","sGetComment","list","total","page","loading","isNoMoreComment","spinning","Boolean","sCommentFavor","sReplyFavor","map","item","id","length","Component","propTypes"],"mappings":";;;;;;;;;;;;;;AAAA;;;;AAEA;;;;AACA;;;;AACA;;;;;;;;;;IAEMA,W;;;AACJ,uBAAYC,KAAZ,EAAmB;AAAA;;AAAA,0HACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa,EAAb;AAFiB;AAGlB;;;;yCAEoB;AACnB,WAAKD,KAAL,CAAWE,GAAX,CAAeC,WAAf;AACD;;;6BAEQ;AAAA,uBAQH,KAAKH,KAAL,CAAWE,GARR;AAAA,UAELE,IAFK,cAELA,IAFK;AAAA,UAGLC,KAHK,cAGLA,KAHK;AAAA,UAILC,IAJK,cAILA,IAJK;AAAA,UAKLC,OALK,cAKLA,OALK;AAAA,UAMLC,eANK,cAMLA,eANK;AAAA,UAOLL,WAPK,cAOLA,WAPK;;;AAUP,UAAMM,WAAWC,QACfH,QAAQJ,WAAR,IAAuBI,QAAQI,aAA/B,IAAgDJ,QAAQK,WADzC,CAAjB;AAGA,aACE;AAAA;AAAA;AACE;AAAA;AAAA,YAAM,UAAUH,QAAhB;AACE;AAAA;AAAA;AAAA;AAAQJ,iBAAR;AAAA;AAAA,WADF;AAEGD,eAAKS,GAAL,CAAS;AAAA,mBACR,8BAAC,oBAAD,IAAY,SAASC,IAArB,EAA2B,KAAKA,KAAKC,EAArC,EAAyC,WAAWD,KAAKC,EAAzD,GADQ;AAAA,WAAT,CAFH;AAMG,WAACP,eAAD,IACCJ,KAAKY,MAAL,KAAgBX,KADjB,IAEG;AAAA;AAAA;AACE,yBAAU,wBADZ;AAEE,uBAAS;AAAA,uBAAMF,YAAY,EAAEG,MAAMA,OAAO,CAAf,EAAZ,CAAN;AAAA;AAFX;AAIE;AAAA;AAAA;AAAA;AAAA;AAJF;AARN;AADF,OADF;AAoBD;;;;EA3CuBW,gB;;AA8C1BlB,YAAYmB,SAAZ,GAAwB,EAAxB;;kBAEe,uBAAQnB,WAAR,C","file":"index.js","sourcesContent":["import React, { Component } from \"react\";\nimport { Spin } from \"antd\";\nimport Comment from \"../../Comment\";\nimport CommentBox from \"../CommentBox\";\nimport \"./index.css\";\n\nclass CommentList extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {};\n  }\n\n  componentWillMount() {\n    this.props.app.sGetComment();\n  }\n\n  render() {\n    const {\n      list,\n      total,\n      page,\n      loading,\n      isNoMoreComment,\n      sGetComment\n    } = this.props.app;\n\n    const spinning = Boolean(\n      loading.sGetComment || loading.sCommentFavor || loading.sReplyFavor\n    );\n    return (\n      <div>\n        <Spin spinning={spinning}>\n          <div>共 {total} 条评论</div>\n          {list.map(item => (\n            <CommentBox content={item} key={item.id} commentId={item.id} />\n          ))}\n\n          {!isNoMoreComment &&\n            list.length !== total && (\n              <div\n                className=\"comment-list-show-more\"\n                onClick={() => sGetComment({ page: page + 1 })}\n              >\n                <span>查看更多评论</span>\n              </div>\n            )}\n        </Spin>\n      </div>\n    );\n  }\n}\n\nCommentList.propTypes = {};\n\nexport default Comment(CommentList);\n"]}

lib/components/ContentItem/index.css

@@ -1,50 +1,53 @@
-.left {
+.comment-item-box {
+  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;
 }
-.right {
+.comment-item-right {
   display: inline-block;
   width: 90%;
   margin-left: 10px;
+  margin-bottom: 20px;
 }
-.box {
-  margin: 10px;
-  padding: 15px 5px;
-  border-top: 1px solid #eee;
-}
-.content {
+.comment-item-content {
   margin: 10px 0;
 }
-.itemLeft {
+.comment-item-bottom {
+  margin: 20px auto;
+}
+.comment-item-bottom-left {
   float: left;
+  user-select: none;
 }
-.itemRight {
+.comment-item-bottom-right {
   float: right;
   margin-left: 5px;
+  cursor: pointer;
 }
-.bottom {
-  margin: 20px auto;
-}
-.favored {
+.comment-favored {
   color: #4a90e2;
 }
 @media screen and (max-width: 616px) and (min-width: 449px) {
-  .right {
+  .comment-item-right {
     display: inline-block;
     width: 85%;
     margin-left: 10px;
   }
 }
 @media screen and (max-width: 449px) and (min-width: 365px) {
-  .right {
+  .comment-item-right {
     display: inline-block;
     width: 80%;
     margin-left: 10px;
   }
 }
 @media screen and (max-width: 365px) {
-  .right {
+  .comment-item-right {
     display: inline-block;
     width: 75%;
     margin-left: 10px;

lib/components/ContentItem/index.js

@@ -8,6 +8,10 @@ var _icon = require("antd/es/icon");
 
 var _icon2 = _interopRequireDefault(_icon);
 
+var _tooltip = require("antd/es/tooltip");
+
+var _tooltip2 = _interopRequireDefault(_tooltip);
+
 var _avatar = require("antd/es/avatar");
 
 var _avatar2 = _interopRequireDefault(_avatar);
@@ -16,6 +20,8 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 require("antd/es/icon/style/css");
 
+require("antd/es/tooltip/style/css");
+
 require("antd/es/avatar/style/css");
 
 var _react = require("react");
@@ -30,6 +36,12 @@ var _dayjs = require("dayjs");
 
 var _dayjs2 = _interopRequireDefault(_dayjs);
 
+require("dayjs/locale/zh-cn");
+
+var _relativeTime = require("dayjs/plugin/relativeTime");
+
+var _relativeTime2 = _interopRequireDefault(_relativeTime);
+
 var _Comment = require("../../Comment");
 
 var _Comment2 = _interopRequireDefault(_Comment);
@@ -38,6 +50,10 @@ var _CommentInput = require("../CommentInput");
 
 var _CommentInput2 = _interopRequireDefault(_CommentInput);
 
+var _avatar3 = require("../../avatar");
+
+var _avatar4 = _interopRequireDefault(_avatar3);
+
 var _helper = require("../../helper");
 
 require("./index.css");
@@ -50,6 +66,9 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 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.locale("zh-cn");
+_dayjs2.default.extend(_relativeTime2.default);
+
 var CommentItem = function (_Component) {
   _inherits(CommentItem, _Component);
 
@@ -59,7 +78,7 @@ var CommentItem = function (_Component) {
     var _this = _possibleConstructorReturn(this, (CommentItem.__proto__ || Object.getPrototypeOf(CommentItem)).call(this, props));
 
     _this.state = {
-      isShowInput: false
+      showInput: false
     };
     _this.handleToggleInput = _this.handleToggleInput.bind(_this);
     _this.renderTextWithReply = _this.renderTextWithReply.bind(_this);
@@ -69,7 +88,7 @@ var CommentItem = function (_Component) {
   _createClass(CommentItem, [{
     key: "handleToggleInput",
     value: function handleToggleInput() {
-      this.setState({ isShowInput: !this.state.isShowInput });
+      this.setState({ showInput: !this.state.showInput });
     }
   }, {
     key: "renderTextWithReply",
@@ -92,27 +111,27 @@ var CommentItem = function (_Component) {
           commentId = _props.commentId,
           replyId = _props.replyId,
           content = _props.content,
-          type = _props.type,
+          action = _props.action,
           showReply = _props.showReply,
           onShowReply = _props.onShowReply,
           app = _props.app;
-      var isShowInput = this.state.isShowInput;
+      var showInput = this.state.showInput;
+
 
-      var isComment = type === "comment";
       return _react2.default.createElement(
         "div",
-        { className: "box" },
+        { className: "comment-item-box" },
         _react2.default.createElement(
           "div",
-          { className: "left" },
-          _react2.default.createElement(_avatar2.default, { src: content.user_avatar, size: "large" })
+          { className: "comment-item-left" },
+          _react2.default.createElement(_avatar2.default, { src: content.user_avatar || _avatar4.default, size: "large" })
         ),
         _react2.default.createElement(
           "div",
-          { className: "right" },
+          { className: "comment-item-right" },
           _react2.default.createElement(
             "div",
-            { className: "name" },
+            null,
             _react2.default.createElement(
               "a",
               { href: "/" + content.user_id },
@@ -121,28 +140,31 @@ var CommentItem = function (_Component) {
             _react2.default.createElement(
               "span",
               { style: { marginLeft: 10 } },
-              (0, _dayjs2.default)(content.created * 1000).format("YYYY-MM-DD HH:mm:ss")
+              _react2.default.createElement(
+                _tooltip2.default,
+                {
+                  placement: "top",
+                  title: (0, _dayjs2.default)(content.created * 1000).format("YYYY-MM-DD HH:mm:ss")
+                },
+                (0, _dayjs2.default)(content.created * 1000).fromNow()
+              )
             )
           ),
           _react2.default.createElement("div", {
-            className: "content",
+            className: "comment-item-content",
             dangerouslySetInnerHTML: {
               __html: (0, _helper.renderContent)(this.renderTextWithReply(content.content, content))
             }
           }),
           _react2.default.createElement(
             "div",
-            { className: "bottom" },
-            isComment && content.reply_count ? _react2.default.createElement(
+            { className: "comment-item-bottom" },
+            content.reply_count ? _react2.default.createElement(
               "div",
               null,
               _react2.default.createElement(
                 "a",
-                {
-                  className: "itemLeft",
-                  onClick: onShowReply,
-                  style: { userSelect: "none" }
-                },
+                { className: "comment-item-bottom-left", onClick: onShowReply },
                 content.reply_count,
                 " \u6761\u56DE\u590D",
                 showReply ? _react2.default.createElement(_icon2.default, { type: "up" }) : _react2.default.createElement(_icon2.default, { type: "down" })
@@ -150,33 +172,41 @@ var CommentItem = function (_Component) {
             ) : null,
             _react2.default.createElement(
               "a",
-              { onClick: this.handleToggleInput, className: "itemRight" },
+              {
+                onClick: this.handleToggleInput,
+                className: "comment-item-bottom-right"
+              },
               "\xA0 \u56DE\u590D"
             ),
             _react2.default.createElement(
               "div",
               {
-                className: "itemRight",
-                style: { cursor: "pointer" },
+                className: "comment-item-bottom-right",
                 onClick: function onClick() {
-                  return app.sCommentFavor(content.id, content.favored);
+                  if (replyId) {
+                    // 如果有 replyId，则说明是评论的回复
+                    app.sReplyFavor(content.id, commentId, content.favored);
+                    return;
+                  }
+                  app.sCommentFavor(content.id, content.favored);
                 }
               },
               _react2.default.createElement(_icon2.default, {
                 type: "like-o",
-                className: content.favored ? "favored" : ""
+                className: content.favored ? "comment-favored" : ""
               }),
               "\xA0",
               content.favor_count
             )
-          ),
-          isShowInput ? _react2.default.createElement(_CommentInput2.default, {
-            type: type,
-            replyId: replyId,
-            commentId: commentId,
-            handleToggleInput: this.handleToggleInput
-          }) : null
-        )
+          )
+        ),
+        showInput && _react2.default.createElement(_CommentInput2.default, {
+          content: app.children,
+          action: action,
+          replyId: replyId,
+          commentId: commentId,
+          callback: this.handleToggleInput
+        })
       );
     }
   }]);
@@ -187,13 +217,14 @@ var CommentItem = function (_Component) {
 CommentItem.propTypes = {
   content: _propTypes2.default.object.isRequired,
   // comment 评论
-  // reply 回复
-  type: _propTypes2.default.oneOf(["comment", "reply"]),
+  // reply 评论的回复
+  // replyToReply 回复的回复
+  action: _propTypes2.default.oneOf(["comment", "reply", "replyToReply"]),
   onShowReply: _propTypes2.default.func
 };
 
 CommentItem.defaultProps = {
-  type: "comment",
+  action: "comment",
   onShowReply: function onShowReply() {}
 };
 

lib/components/Editor/Upload.js

@@ -57,8 +57,6 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 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; }
-// import styles from "./Upload.less";
-
 
 var client = function client(oss) {
   return new window.OSS.Wrapper({

lib/components/Editor/index.css

@@ -1,4 +1,4 @@
-.editor {
+.comment-editor {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
@@ -16,67 +16,61 @@
   border-radius: 4px;
   transition: all 0.3s, height 0s;
 }
-.editor textarea.ant-input {
+.comment-editor textarea.ant-input {
   border: none;
   border-bottom: 1px solid #eee;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
-.editor textarea.ant-input:hover {
+.comment-editor textarea.ant-input:hover {
   border: none;
   border-bottom: 1px solid #eee;
 }
-.editor textarea.ant-input:focus {
+.comment-editor textarea.ant-input:focus {
   box-shadow: none;
   border-bottom: 1px solid #eee;
 }
-.editor [contentEditable="true"]:empty:not(:focus):before {
+.comment-editor [contentEditable="true"]:empty:not(:focus):before {
   content: attr(data-text);
   color: #bfbfbf;
 }
-.editor:focus,
-.editor:hover {
+.comment-editor:focus,
+.comment-editor:hover {
   border-color: #40a9ff;
   outline: 0;
   box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
 }
-.content {
-  display: block;
-  box-sizing: border-box;
-  padding: 4px 10px;
-  width: 100%;
-  max-width: 100%;
-  height: 100%;
-  max-height: 110px;
-  overflow-y: auto;
-  overflow-x: auto;
-}
-.content:focus,
-.content:hover {
-  outline: 0;
-}
-.toolbar {
+.comment-toolbar {
   display: inline-block;
   width: 100%;
   margin: 5px 0 0 0;
 }
-.toolbar .icon {
+.comment-toolbar .comment-toolbar-icon {
   font-size: 23px;
   cursor: pointer;
   transition: color 0.3s;
 }
-.toolbar .icon:hover {
+.comment-toolbar .comment-toolbar-icon:hover {
   color: #40a9ff;
 }
-.feed .ant-popover-inner-content {
+.comment-toolbar-left {
+  float: left;
+  margin: 8px 11px;
+}
+.comment-toolbar-right {
+  float: right;
+  margin: 5px 11px;
+}
+
+.comment-emoji-popover .ant-popover-inner-content {
   padding: 12px 16px 20px 16px;
 }
-.feed .ant-carousel .slick-dots {
+.comment-emoji-popover .ant-carousel .slick-dots {
   bottom: -10px;
 }
-.feed .ant-carousel .slick-dots li.slick-active button {
+.comment-emoji-popover .ant-carousel .slick-dots li.slick-active button {
   background-color: #7b868a;
 }
-.feed .ant-carousel .slick-dots li button {
+.comment-emoji-popover .ant-carousel .slick-dots li button {
   background-color: #a2aeb5;
 }

lib/components/Editor/index.js

@@ -20,8 +20,6 @@ var _input = require("antd/es/input");
 
 var _input2 = _interopRequireDefault(_input);
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 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/button/style/css");
@@ -61,19 +59,6 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 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 TextArea = _input2.default.TextArea;
-// 设置 Editor 组件的默认值
-// 不能在 Editor.defaultProps 中设置
-// 因为 Editor 在 ComponentInput 中调用
-// 在 ComponentInput 中，需要使用 Editor 的 props 覆盖 ComponentInput 传入的 props
-
-var EditorDefaultProps = {
-  rows: 5,
-  placeholder: "说点什么吧...",
-  showEmoji: true,
-  showUpload: true,
-  submitText: "发表",
-  onChange: function onChange() {}
-};
 
 var Editor = function (_React$Component) {
   _inherits(Editor, _React$Component);
@@ -84,21 +69,73 @@ var Editor = function (_React$Component) {
     var _this = _possibleConstructorReturn(this, (Editor.__proto__ || Object.getPrototypeOf(Editor)).call(this, props));
 
     _this.state = {
-      showUpload: false
+      showUpload: false,
+      value: "", // 编辑器里面的值
+
+      fileList: [], // 图片列表
+      fileMap: {} // 已经上传的图片路径和 uid 的映射 { uid: path }
     };
+    _this.handleChange = _this.handleChange.bind(_this);
     _this.handleClickEmoji = _this.handleClickEmoji.bind(_this);
+    _this.handleChangeFileList = _this.handleChangeFileList.bind(_this);
     _this.handleShowUpload = _this.handleShowUpload.bind(_this);
+    _this.handleUpload = _this.handleUpload.bind(_this);
+    _this.handleSubmit = _this.handleSubmit.bind(_this);
     return _this;
   }
 
   _createClass(Editor, [{
     key: "componentDidMount",
     value: function componentDidMount() {}
+
+    /**
+     * 编辑器的值改变事件
+     * 将最新的值存储到 state 中
+     * @param {string} value 输入的值
+     */
+
+  }, {
+    key: "handleChange",
+    value: function handleChange(value) {
+      this.setState({ value: value });
+      if (this.props.onChange) {
+        this.props.onChange(value);
+      }
+    }
+
+    /**
+     * 点击 emoji 的事件
+     * 点击后，需要将改 emoji 插入到编辑器中
+     * 插入的值为 [emoji chinese name]
+     * 参数 emoji 即为 emoji chinese name
+     * @param {string}} emoji emoji 的中文，如 微笑
+     */
+
   }, {
     key: "handleClickEmoji",
-    value: function handleClickEmoji(emojiId) {
-      this.props.onChangeEmoji(emojiId);
+    value: function handleClickEmoji(emoji) {
+      var value = this.state.value;
+
+      value += "[" + emoji + "]";
+      this.handleChange(value);
     }
+
+    /**
+     * 监听文件列表改变事件
+     * @param {Array} fileList 文件列表
+     */
+
+  }, {
+    key: "handleChangeFileList",
+    value: function handleChangeFileList(fileList) {
+      this.setState({ fileList: fileList });
+    }
+
+    /**
+     * 控制上传 Popover 的显示和隐藏
+     * @param {boolean} showUpload 是否显示上传的 Popover
+     */
+
   }, {
     key: "handleShowUpload",
     value: function handleShowUpload(showUpload) {
@@ -108,43 +145,82 @@ var Editor = function (_React$Component) {
         this.setState({ showUpload: !this.state.showUpload });
       }
     }
+
+    /**
+     * 上传文件 TODO:
+     * @param {object} param 文件对象
+     */
+
+  }, {
+    key: "handleUpload",
+    value: function handleUpload(_ref) {
+      var uid = _ref.uid,
+          path = _ref.path;
+      var fileMap = this.state.fileMap;
+
+      fileMap[uid] = path;
+      this.setState({ fileMap: fileMap });
+    }
+
+    /**
+     * 提交编辑器内容
+     * 提交功能，交给父组件来实现
+     * 需要父组件传入 onSubmit
+     */
+
+  }, {
+    key: "handleSubmit",
+    value: function handleSubmit() {
+      var _state = this.state,
+          value = _state.value,
+          fileMap = _state.fileMap,
+          fileList = _state.fileList;
+
+      if (fileList.length) {
+        value += "<br/>";
+        fileList.forEach(function (item) {
+          value += "[" + _constant.OSS_LINK + fileMap[item.uid] + "]";
+        });
+      }
+      this.props.onSubmit(value);
+    }
   }, {
     key: "render",
     value: function render() {
       var _this2 = this;
 
-      var props = _extends({}, EditorDefaultProps, this.props);
-      var value = props.value,
-          _onChange = props.onChange,
-          onSubmit = props.onSubmit,
-          loading = props.loading,
-          placeholder = props.placeholder,
-          fileList = props.fileList,
-          onChangeFileList = props.onChangeFileList,
-          rows = props.rows,
-          onUpload = props.onUpload,
-          showEmoji = props.showEmoji,
-          showUpload = props.showUpload,
-          submitText = props.submitText;
-
-
+      var _props = this.props,
+          value = _props.value,
+          placeholder = _props.placeholder,
+          rows = _props.rows,
+          showEmoji = _props.showEmoji,
+          showUpload = _props.showUpload,
+          btnSubmitText = _props.btnSubmitText,
+          btnLoading = _props.btnLoading,
+          btnDisabled = _props.btnDisabled,
+          button = _props.button,
+          emojiToolIcon = _props.emojiToolIcon,
+          imageToolIcon = _props.imageToolIcon;
+
+
+      var handleSubmit = this.handleSubmit;
       return _react2.default.createElement(
         "div",
-        { className: "editor" },
+        { className: "comment-editor" },
         _react2.default.createElement(TextArea, {
-          value: value,
+          value: value || this.state.value,
           onChange: function onChange(e) {
-            return _onChange(e.target.value);
+            return _this2.handleChange(e.target.value);
           },
           rows: rows,
           placeholder: placeholder
         }),
         _react2.default.createElement(
           "div",
-          { className: "toolbar" },
+          { className: "comment-toolbar" },
           _react2.default.createElement(
             "div",
-            { style: { float: "left", margin: "8px 11px" } },
+            { className: "comment-toolbar-left" },
             showEmoji && _react2.default.createElement(
               _popover2.default,
               {
@@ -156,9 +232,9 @@ var Editor = function (_React$Component) {
                   { style: { width: 200 } },
                   _react2.default.createElement(_Emoji2.default, { onClick: this.handleClickEmoji })
                 ),
-                overlayClassName: "feed"
+                overlayClassName: "comment-emoji-popover"
               },
-              _react2.default.createElement(_icon2.default, { type: "smile-o", className: "icon" })
+              emojiToolIcon || _react2.default.createElement(_icon2.default, { type: "smile-o", className: "comment-toolbar-icon" })
             ),
             showUpload && _react2.default.createElement(
               _popover2.default,
@@ -171,9 +247,9 @@ var Editor = function (_React$Component) {
                     style: { width: 112 * _constant.MAX_UPLOAD_NUMBER, minHeight: 100 }
                   },
                   _react2.default.createElement(_Upload2.default, {
-                    onChangeFileList: onChangeFileList,
-                    onUpload: onUpload,
-                    fileList: fileList
+                    onChangeFileList: this.handleChangeFileList,
+                    onUpload: this.handleUpload,
+                    fileList: this.state.fileList
                   })
                 ),
                 placement: "bottomLeft",
@@ -188,7 +264,7 @@ var Editor = function (_React$Component) {
                       "span",
                       { style: { color: "#666", fontWeight: 400 } },
                       "(\u60A8\u8FD8\u80FD\u4E0A\u4F20",
-                      _constant.MAX_UPLOAD_NUMBER - fileList.length,
+                      _constant.MAX_UPLOAD_NUMBER - this.state.fileList.length,
                       "\u5F20\u56FE\u7247)"
                     )
                   ),
@@ -205,9 +281,13 @@ var Editor = function (_React$Component) {
                   })
                 )
               },
-              _react2.default.createElement(_icon2.default, {
+              imageToolIcon ? _react2.default.cloneElement(imageToolIcon, {
+                onClick: function onClick() {
+                  return _this2.handleShowUpload(true);
+                }
+              }) : _react2.default.createElement(_icon2.default, {
                 type: "picture",
-                className: "icon",
+                className: "comment-toolbar-icon",
                 style: { marginLeft: 10 },
                 onClick: function onClick() {
                   return _this2.handleShowUpload(true);
@@ -217,11 +297,20 @@ var Editor = function (_React$Component) {
           ),
           _react2.default.createElement(
             "div",
-            { style: { float: "right", margin: "5px 11px" } },
-            _react2.default.createElement(
+            { className: "comment-toolbar-right" },
+            button ? _react2.default.cloneElement(button, {
+              onClick: button.props.onClick || handleSubmit
+            }) : _react2.default.createElement(
               _button2.default,
-              { onClick: onSubmit, type: "primary", loading: loading },
-              submitText
+              {
+                onClick: function onClick() {
+                  return _this2.handleSubmit();
+                },
+                type: "primary",
+                loading: btnLoading,
+                disabled: btnDisabled
+              },
+              btnSubmitText
             )
           )
         )
@@ -237,8 +326,25 @@ Editor.propTypes = {
   placeholder: _propTypes2.default.string,
   showEmoji: _propTypes2.default.bool,
   showUpload: _propTypes2.default.bool,
-  submitText: _propTypes2.default.string,
-  onChange: _propTypes2.default.func
+  value: _propTypes2.default.string,
+  onChange: _propTypes2.default.func,
+  onSubmit: _propTypes2.default.func,
+  btnSubmitText: _propTypes2.default.string,
+  btnLoading: _propTypes2.default.bool,
+  btnDisabled: _propTypes2.default.bool,
+  button: _propTypes2.default.node,
+  emojiToolIcon: _propTypes2.default.node,
+  imageToolIcon: _propTypes2.default.node
+};
+
+Editor.defaultProps = {
+  rows: 5,
+  placeholder: "说点什么吧...",
+  showEmoji: true,
+  showUpload: true,
+  btnSubmitText: "发表",
+  btnLoading: false,
+  btnDisabled: false
 };
 
 exports.default = Editor;

lib/constant.js

@@ -16,4 +16,6 @@ var OSS_LINK = exports.OSS_LINK = "http://links-comment.oss-cn-beijing.aliyuncs.
 var MAX_UPLOAD_NUMBER = exports.MAX_UPLOAD_NUMBER = 4;
 
 var REGEXP = exports.REGEXP = /\[.+?\]/g;
+
+var AVATAR = exports.AVATAR = "";
 //# 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","REGEXP"],"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,kDAAjB;;AAEA,IAAMC,gDAAoB,CAA1B;;AAEA,IAAMC,0BAAS,UAAf","file":"constant.js","sourcesContent":["export const ERROR_DEFAULT = \"出错了！\";\n\nexport const LIMIT = 10; // 默认 limit\n\nexport const OSS_ENDPOINT = \"oss-cn-beijing.aliyuncs.com\";\nexport const OSS_BUCKET = \"links-comment\";\nexport const DRIVER_LICENSE_PATH = \"/comment\";\n\nexport const OSS_LINK = \"http://links-comment.oss-cn-beijing.aliyuncs.com\";\n\nexport const MAX_UPLOAD_NUMBER = 4;\n\nexport const REGEXP = /\\[.+?\\]/g;\n"]}
+{"version":3,"sources":["../src/constant.js"],"names":["ERROR_DEFAULT","LIMIT","OSS_ENDPOINT","OSS_BUCKET","DRIVER_LICENSE_PATH","OSS_LINK","MAX_UPLOAD_NUMBER","REGEXP","AVATAR"],"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,kDAAjB;;AAEA,IAAMC,gDAAoB,CAA1B;;AAEA,IAAMC,0BAAS,UAAf;;AAEA,IAAMC,0BAAS,EAAf","file":"constant.js","sourcesContent":["export const ERROR_DEFAULT = \"出错了！\";\n\nexport const LIMIT = 10; // 默认 limit\n\nexport const OSS_ENDPOINT = \"oss-cn-beijing.aliyuncs.com\";\nexport const OSS_BUCKET = \"links-comment\";\nexport const DRIVER_LICENSE_PATH = \"/comment\";\n\nexport const OSS_LINK = \"http://links-comment.oss-cn-beijing.aliyuncs.com\";\n\nexport const MAX_UPLOAD_NUMBER = 4;\n\nexport const REGEXP = /\\[.+?\\]/g;\n\nexport const AVATAR = \"\";\n"]}

lib/emoji.js

@@ -17,7 +17,7 @@ var emoji = [{
   title: "色"
 }, {
   value: "4",
-  ttile: "发呆"
+  title: "发呆"
 }, {
   value: "5",
   title: "酷"

lib/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+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; }; }();
+
 var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
@@ -18,24 +20,100 @@ var _registerServiceWorker2 = _interopRequireDefault(_registerServiceWorker);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var props = {
-  type: 1,
-  businessId: "1",
-  API: "http://api.links123.net/comment/v1",
-  showList: false
-};
-
-var editorProps = {
-  showEmoji: true,
-  placeholder: "说点什么吧",
-  rows: 5
-  // onSubmit={v => console.log()} // TODO...
-};
-
-_reactDom2.default.render(_react2.default.createElement(
-  _App2.default,
-  props,
-  _react2.default.createElement(_App.Editor, editorProps)
-), document.getElementById("root-comment"));
+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 Index = function (_Component) {
+  _inherits(Index, _Component);
+
+  function Index(props) {
+    _classCallCheck(this, Index);
+
+    var _this = _possibleConstructorReturn(this, (Index.__proto__ || Object.getPrototypeOf(Index)).call(this, props));
+
+    _this.state = {
+      value: ""
+    };
+    _this.handleChangeValue = _this.handleChangeValue.bind(_this);
+    _this.handleChangeSubmit = _this.handleChangeSubmit.bind(_this);
+    return _this;
+  }
+
+  _createClass(Index, [{
+    key: "handleChangeValue",
+    value: function handleChangeValue(value) {
+      this.setState({ value: value });
+      console.log("handleChangeValue value: ", value);
+    }
+  }, {
+    key: "handleChangeSubmit",
+    value: function handleChangeSubmit(value) {
+      var _this2 = this;
+
+      this.setState({ loading: true }, function () {
+        setTimeout(function () {
+          _this2.setState({ loading: false });
+        }, 2000);
+      });
+      console.log("submit value: ", value);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      // 最简单的用法
+      return _react2.default.createElement(
+        _App2.default,
+        { type: 1, businessId: "test" },
+        _react2.default.createElement(_App.Editor, null)
+      );
+
+      // 复杂的用户法
+      // const props = {
+      //   type: 1,
+      //   businessId: "1",
+      //   API: "http://api.links123.net/comment/v1",
+      //   showList: true
+      // };
+
+      // const editorProps = {
+      //   showEmoji: true,
+      //   placeholder: "说点什么吧",
+      //   rows: 5,
+      //   btnLoading: this.state.loading,
+      //   btnDisable: this.state.loading,
+      //   btnSubmitText: "提交",
+      //   value: this.state.value,
+      //   onChange: v => this.handleChangeValue(v),
+      //   onSubmit: v => this.handleChangeSubmit(v),
+      //   button: (
+      //     <Button
+      //       type="primary"
+      //       ghost
+      //       // onClick={() => console.log('click btn: ', this.state.value)}
+      //     >
+      //       自定义按钮
+      //     </Button>
+      //   ),
+      //   emojiToolIcon: <Icon type="smile" style={{ fontSize: 23 }} />,
+      //   imageToolIcon: (
+      //     <Icon type="cloud-upload-o" style={{ fontSize: 25, marginLeft: 10 }} />
+      //   )
+      // };
+
+      // return (
+      //   <App {...props}>
+      //     <Editor {...editorProps} />
+      //   </App>
+      // );
+    }
+  }]);
+
+  return Index;
+}(_react.Component);
+
+_reactDom2.default.render(_react2.default.createElement(Index, null), document.getElementById("root-comment"));
 (0, _registerServiceWorker2.default)();
 //# sourceMappingURL=index.js.map

lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["props","type","businessId","API","showList","editorProps","showEmoji","placeholder","rows","ReactDOM","render","document","getElementById"],"mappings":";;AAAA;;;;AACA;;;;AACA;;;;AACA;;;;;;AAEA,IAAMA,QAAQ;AACZC,QAAM,CADM;AAEZC,cAAY,GAFA;AAGZC,OAAK,oCAHO;AAIZC,YAAU;AAJE,CAAd;;AAOA,IAAMC,cAAc;AAClBC,aAAW,IADO;AAElBC,eAAa,OAFK;AAGlBC,QAAM;AACN;AAJkB,CAApB;;AAOAC,mBAASC,MAAT,CACE;AAAC,eAAD;AAASV,OAAT;AACE,gCAAC,WAAD,EAAYK,WAAZ;AADF,CADF,EAIEM,SAASC,cAAT,CAAwB,cAAxB,CAJF;AAMA","file":"index.js","sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App, { Editor } from \"./App\";\nimport registerServiceWorker from \"./registerServiceWorker\";\n\nconst props = {\n  type: 1,\n  businessId: \"1\",\n  API: \"http://api.links123.net/comment/v1\",\n  showList: false\n};\n\nconst editorProps = {\n  showEmoji: true,\n  placeholder: \"说点什么吧\",\n  rows: 5\n  // onSubmit={v => console.log()} // TODO...\n};\n\nReactDOM.render(\n  <App {...props}>\n    <Editor {...editorProps} />\n  </App>,\n  document.getElementById(\"root-comment\")\n);\nregisterServiceWorker();\n"]}
+{"version":3,"sources":["../src/index.js"],"names":["Index","props","state","value","handleChangeValue","bind","handleChangeSubmit","setState","console","log","loading","setTimeout","Component","ReactDOM","render","document","getElementById"],"mappings":";;;;AAAA;;;;AACA;;;;AAEA;;;;AACA;;;;;;;;;;;;IAEMA,K;;;AACJ,iBAAYC,KAAZ,EAAmB;AAAA;;AAAA,8GACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa;AACXC,aAAO;AADI,KAAb;AAGA,UAAKC,iBAAL,GAAyB,MAAKA,iBAAL,CAAuBC,IAAvB,OAAzB;AACA,UAAKC,kBAAL,GAA0B,MAAKA,kBAAL,CAAwBD,IAAxB,OAA1B;AANiB;AAOlB;;;;sCAEiBF,K,EAAO;AACvB,WAAKI,QAAL,CAAc,EAAEJ,YAAF,EAAd;AACAK,cAAQC,GAAR,CAAY,2BAAZ,EAAyCN,KAAzC;AACD;;;uCAEkBA,K,EAAO;AAAA;;AACxB,WAAKI,QAAL,CAAc,EAAEG,SAAS,IAAX,EAAd,EAAiC,YAAM;AACrCC,mBAAW,YAAM;AACf,iBAAKJ,QAAL,CAAc,EAAEG,SAAS,KAAX,EAAd;AACD,SAFD,EAEG,IAFH;AAGD,OAJD;AAKAF,cAAQC,GAAR,CAAY,gBAAZ,EAA8BN,KAA9B;AACD;;;6BAEQ;AACP;AACA,aACE;AAAC,qBAAD;AAAA,UAAK,MAAM,CAAX,EAAc,YAAW,MAAzB;AACE,sCAAC,WAAD;AADF,OADF;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACD;;;;EAtEiBS,gB;;AAyEpBC,mBAASC,MAAT,CAAgB,8BAAC,KAAD,OAAhB,EAA2BC,SAASC,cAAT,CAAwB,cAAxB,CAA3B;AACA","file":"index.js","sourcesContent":["import React, { Component } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Button, Icon } from \"antd\";\nimport App, { Editor } from \"./App\";\nimport registerServiceWorker from \"./registerServiceWorker\";\n\nclass Index extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      value: \"\"\n    };\n    this.handleChangeValue = this.handleChangeValue.bind(this);\n    this.handleChangeSubmit = this.handleChangeSubmit.bind(this);\n  }\n\n  handleChangeValue(value) {\n    this.setState({ value });\n    console.log(\"handleChangeValue value: \", value);\n  }\n\n  handleChangeSubmit(value) {\n    this.setState({ loading: true }, () => {\n      setTimeout(() => {\n        this.setState({ loading: false });\n      }, 2000);\n    });\n    console.log(\"submit value: \", value);\n  }\n\n  render() {\n    // 最简单的用法\n    return (\n      <App type={1} businessId=\"test\">\n        <Editor />\n      </App>\n    );\n\n    // 复杂的用户法\n    // const props = {\n    //   type: 1,\n    //   businessId: \"1\",\n    //   API: \"http://api.links123.net/comment/v1\",\n    //   showList: true\n    // };\n\n    // const editorProps = {\n    //   showEmoji: true,\n    //   placeholder: \"说点什么吧\",\n    //   rows: 5,\n    //   btnLoading: this.state.loading,\n    //   btnDisable: this.state.loading,\n    //   btnSubmitText: \"提交\",\n    //   value: this.state.value,\n    //   onChange: v => this.handleChangeValue(v),\n    //   onSubmit: v => this.handleChangeSubmit(v),\n    //   button: (\n    //     <Button\n    //       type=\"primary\"\n    //       ghost\n    //       // onClick={() => console.log('click btn: ', this.state.value)}\n    //     >\n    //       自定义按钮\n    //     </Button>\n    //   ),\n    //   emojiToolIcon: <Icon type=\"smile\" style={{ fontSize: 23 }} />,\n    //   imageToolIcon: (\n    //     <Icon type=\"cloud-upload-o\" style={{ fontSize: 25, marginLeft: 10 }} />\n    //   )\n    // };\n\n    // return (\n    //   <App {...props}>\n    //     <Editor {...editorProps} />\n    //   </App>\n    // );\n  }\n}\n\nReactDOM.render(<Index />, document.getElementById(\"root-comment\"));\nregisterServiceWorker();\n"]}

lib/lang/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 // 语言包
 // 英文短语和中文提示的对应
 var data = {
+  "not found": "没有数据",
   "auth failed": "请先登录",
   "create comment failed": "创建评论失败",
   "comment favor failed": "评论点赞失败",

lib/lang/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lang/index.js"],"names":["data"],"mappings":";;;;;AAAA;AACA;AACA,IAAMA,OAAO;AACX,iBAAe,MADJ;AAEX,2BAAyB,QAFd;AAGX,0BAAwB,QAHb;AAIX,iCAA+B,UAJpB;AAKX,yBAAuB,UALZ;AAMX,yBAAuB,QANZ;AAOX,wBAAsB,QAPX;AAQX,+BAA6B,UARlB;AASX,wBAAsB;AATX,CAAb;;kBAYeA,I","file":"index.js","sourcesContent":["// 语言包\n// 英文短语和中文提示的对应\nconst data = {\n  \"auth failed\": \"请先登录\",\n  \"create comment failed\": \"创建评论失败\",\n  \"comment favor failed\": \"评论点赞失败\",\n  \"delete comment favor failed\": \"评论取消点赞失败\",\n  \"get comments failed\": \"获取评论列表失败\",\n  \"create reply failed\": \"创建回复失败\",\n  \"reply favor failed\": \"回复点赞失败\",\n  \"delete reply favor failed\": \"删除回复点赞失败\",\n  \"get replies failed\": \"获取回复列表失败\"\n};\n\nexport default data;\n"]}
+{"version":3,"sources":["../../src/lang/index.js"],"names":["data"],"mappings":";;;;;AAAA;AACA;AACA,IAAMA,OAAO;AACX,eAAa,MADF;AAEX,iBAAe,MAFJ;AAGX,2BAAyB,QAHd;AAIX,0BAAwB,QAJb;AAKX,iCAA+B,UALpB;AAMX,yBAAuB,UANZ;AAOX,yBAAuB,QAPZ;AAQX,wBAAsB,QARX;AASX,+BAA6B,UATlB;AAUX,wBAAsB;AAVX,CAAb;;kBAaeA,I","file":"index.js","sourcesContent":["// 语言包\n// 英文短语和中文提示的对应\nconst data = {\n  \"not found\": \"没有数据\",\n  \"auth failed\": \"请先登录\",\n  \"create comment failed\": \"创建评论失败\",\n  \"comment favor failed\": \"评论点赞失败\",\n  \"delete comment favor failed\": \"评论取消点赞失败\",\n  \"get comments failed\": \"获取评论列表失败\",\n  \"create reply failed\": \"创建回复失败\",\n  \"reply favor failed\": \"回复点赞失败\",\n  \"delete reply favor failed\": \"删除回复点赞失败\",\n  \"get replies failed\": \"获取回复列表失败\"\n};\n\nexport default data;\n"]}

lib/mock.js

@@ -1,62 +1,62 @@
-"use strict";
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var comments = exports.comments = {
   list: [{
-    id: "5b3a4f0973df3e6a32b0a9d2",
+    id: '5b3a4f0973df3e6a32b0a9d2',
     user_id: 0,
-    user_name: "",
-    user_avatar: "",
-    content: "test[微笑]",
+    user_name: '',
+    user_avatar: '',
+    content: 'test[微笑]',
     replies: [{
-      id: "5b3c58c473df3e64d8d53afb",
+      id: '5b3c58c473df3e64d8d53afb',
       user_id: 0,
-      user_name: "",
-      user_avatar: "",
+      user_name: '',
+      user_avatar: '',
       reply: null,
-      content: "test",
+      content: 'test',
       favor_count: 1,
       favored: false,
       created: 1530681540
     }, {
-      id: "5b3c58c473df3e64d8d53afa",
+      id: '5b3c58c473df3e64d8d53afa',
       user_id: 0,
-      user_name: "",
-      user_avatar: "",
+      user_name: '',
+      user_avatar: '',
       reply: {
-        id: "5b3c58c473df3e64d8d53afb",
+        id: '5b3c58c473df3e64d8d53afb',
         user_id: 0,
-        user_name: "",
-        user_avatar: "",
+        user_name: '',
+        user_avatar: '',
         reply: null,
-        content: "test",
+        content: 'test',
         favor_count: 1,
         favored: false,
         created: 1530681540
       },
-      content: "test",
+      content: 'test',
       favor_count: 2,
       favored: false,
       created: 1530681540
     }, {
-      id: "5b3c6e4873df3e53f870d912",
+      id: '5b3c6e4873df3e53f870d912',
       user_id: 0,
-      user_name: "",
-      user_avatar: "",
+      user_name: '',
+      user_avatar: '',
       reply: {
-        id: "5b3c58c473df3e64d8d53afb",
+        id: '5b3c58c473df3e64d8d53afb',
         user_id: 0,
-        user_name: "",
-        user_avatar: "",
+        user_name: '',
+        user_avatar: '',
         reply: null,
-        content: "test",
+        content: 'test',
         favor_count: 1,
         favored: false,
         created: 1530681540
       },
-      content: "test",
+      content: 'test',
       favor_count: 0,
       favored: false,
       created: 1530687048

lib/mock.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/mock.js"],"names":["comments","list","id","user_id","user_name","user_avatar","content","replies","reply","favor_count","favored","created","reply_count","total","page"],"mappings":";;;;;AAAO,IAAMA,8BAAW;AACtBC,QAAM,CACJ;AACEC,QAAI,0BADN;AAEEC,aAAS,CAFX;AAGEC,eAAW,EAHb;AAIEC,iBAAa,EAJf;AAKEC,aAAS,UALX;AAMEC,aAAS,CACP;AACEL,UAAI,0BADN;AAEEC,eAAS,CAFX;AAGEC,iBAAW,EAHb;AAIEC,mBAAa,EAJf;AAKEG,aAAO,IALT;AAMEF,eAAS,MANX;AAOEG,mBAAa,CAPf;AAQEC,eAAS,KARX;AASEC,eAAS;AATX,KADO,EAYP;AACET,UAAI,0BADN;AAEEC,eAAS,CAFX;AAGEC,iBAAW,EAHb;AAIEC,mBAAa,EAJf;AAKEG,aAAO;AACLN,YAAI,0BADC;AAELC,iBAAS,CAFJ;AAGLC,mBAAW,EAHN;AAILC,qBAAa,EAJR;AAKLG,eAAO,IALF;AAMLF,iBAAS,MANJ;AAOLG,qBAAa,CAPR;AAQLC,iBAAS,KARJ;AASLC,iBAAS;AATJ,OALT;AAgBEL,eAAS,MAhBX;AAiBEG,mBAAa,CAjBf;AAkBEC,eAAS,KAlBX;AAmBEC,eAAS;AAnBX,KAZO,EAiCP;AACET,UAAI,0BADN;AAEEC,eAAS,CAFX;AAGEC,iBAAW,EAHb;AAIEC,mBAAa,EAJf;AAKEG,aAAO;AACLN,YAAI,0BADC;AAELC,iBAAS,CAFJ;AAGLC,mBAAW,EAHN;AAILC,qBAAa,EAJR;AAKLG,eAAO,IALF;AAMLF,iBAAS,MANJ;AAOLG,qBAAa,CAPR;AAQLC,iBAAS,KARJ;AASLC,iBAAS;AATJ,OALT;AAgBEL,eAAS,MAhBX;AAiBEG,mBAAa,CAjBf;AAkBEC,eAAS,KAlBX;AAmBEC,eAAS;AAnBX,KAjCO,CANX;AA6DEC,iBAAa,CA7Df;AA8DEH,iBAAa,CA9Df;AA+DEC,aAAS,KA/DX;AAgEEC,aAAS;AAhEX,GADI,CADgB;AAqEtBE,SAAO,CArEe;AAsEtBC,QAAM;AAtEgB,CAAjB","file":"mock.js","sourcesContent":["export const comments = {\n  list: [\n    {\n      id: \"5b3a4f0973df3e6a32b0a9d2\",\n      user_id: 0,\n      user_name: \"\",\n      user_avatar: \"\",\n      content: \"test[微笑]\",\n      replies: [\n        {\n          id: \"5b3c58c473df3e64d8d53afb\",\n          user_id: 0,\n          user_name: \"\",\n          user_avatar: \"\",\n          reply: null,\n          content: \"test\",\n          favor_count: 1,\n          favored: false,\n          created: 1530681540\n        },\n        {\n          id: \"5b3c58c473df3e64d8d53afa\",\n          user_id: 0,\n          user_name: \"\",\n          user_avatar: \"\",\n          reply: {\n            id: \"5b3c58c473df3e64d8d53afb\",\n            user_id: 0,\n            user_name: \"\",\n            user_avatar: \"\",\n            reply: null,\n            content: \"test\",\n            favor_count: 1,\n            favored: false,\n            created: 1530681540\n          },\n          content: \"test\",\n          favor_count: 2,\n          favored: false,\n          created: 1530681540\n        },\n        {\n          id: \"5b3c6e4873df3e53f870d912\",\n          user_id: 0,\n          user_name: \"\",\n          user_avatar: \"\",\n          reply: {\n            id: \"5b3c58c473df3e64d8d53afb\",\n            user_id: 0,\n            user_name: \"\",\n            user_avatar: \"\",\n            reply: null,\n            content: \"test\",\n            favor_count: 1,\n            favored: false,\n            created: 1530681540\n          },\n          content: \"test\",\n          favor_count: 0,\n          favored: false,\n          created: 1530687048\n        }\n      ],\n      reply_count: 4,\n      favor_count: 0,\n      favored: false,\n      created: 1530547977\n    }\n  ],\n  total: 1,\n  page: 1\n};\n"]}
+{"version":3,"sources":["../src/mock.js"],"names":["comments","list","id","user_id","user_name","user_avatar","content","replies","reply","favor_count","favored","created","reply_count","total","page"],"mappings":";;;;;AAAO,IAAMA,8BAAW;AACtBC,QAAM,CACJ;AACEC,QAAI,0BADN;AAEEC,aAAS,CAFX;AAGEC,eAAW,EAHb;AAIEC,iBAAa,EAJf;AAKEC,aAAS,UALX;AAMEC,aAAS,CACP;AACEL,UAAI,0BADN;AAEEC,eAAS,CAFX;AAGEC,iBAAW,EAHb;AAIEC,mBAAa,EAJf;AAKEG,aAAO,IALT;AAMEF,eAAS,MANX;AAOEG,mBAAa,CAPf;AAQEC,eAAS,KARX;AASEC,eAAS;AATX,KADO,EAYP;AACET,UAAI,0BADN;AAEEC,eAAS,CAFX;AAGEC,iBAAW,EAHb;AAIEC,mBAAa,EAJf;AAKEG,aAAO;AACLN,YAAI,0BADC;AAELC,iBAAS,CAFJ;AAGLC,mBAAW,EAHN;AAILC,qBAAa,EAJR;AAKLG,eAAO,IALF;AAMLF,iBAAS,MANJ;AAOLG,qBAAa,CAPR;AAQLC,iBAAS,KARJ;AASLC,iBAAS;AATJ,OALT;AAgBEL,eAAS,MAhBX;AAiBEG,mBAAa,CAjBf;AAkBEC,eAAS,KAlBX;AAmBEC,eAAS;AAnBX,KAZO,EAiCP;AACET,UAAI,0BADN;AAEEC,eAAS,CAFX;AAGEC,iBAAW,EAHb;AAIEC,mBAAa,EAJf;AAKEG,aAAO;AACLN,YAAI,0BADC;AAELC,iBAAS,CAFJ;AAGLC,mBAAW,EAHN;AAILC,qBAAa,EAJR;AAKLG,eAAO,IALF;AAMLF,iBAAS,MANJ;AAOLG,qBAAa,CAPR;AAQLC,iBAAS,KARJ;AASLC,iBAAS;AATJ,OALT;AAgBEL,eAAS,MAhBX;AAiBEG,mBAAa,CAjBf;AAkBEC,eAAS,KAlBX;AAmBEC,eAAS;AAnBX,KAjCO,CANX;AA6DEC,iBAAa,CA7Df;AA8DEH,iBAAa,CA9Df;AA+DEC,aAAS,KA/DX;AAgEEC,aAAS;AAhEX,GADI,CADgB;AAqEtBE,SAAO,CArEe;AAsEtBC,QAAM;AAtEgB,CAAjB","file":"mock.js","sourcesContent":["export const comments = {\n  list: [\n    {\n      id: '5b3a4f0973df3e6a32b0a9d2',\n      user_id: 0,\n      user_name: '',\n      user_avatar: '',\n      content: 'test[微笑]',\n      replies: [\n        {\n          id: '5b3c58c473df3e64d8d53afb',\n          user_id: 0,\n          user_name: '',\n          user_avatar: '',\n          reply: null,\n          content: 'test',\n          favor_count: 1,\n          favored: false,\n          created: 1530681540,\n        },\n        {\n          id: '5b3c58c473df3e64d8d53afa',\n          user_id: 0,\n          user_name: '',\n          user_avatar: '',\n          reply: {\n            id: '5b3c58c473df3e64d8d53afb',\n            user_id: 0,\n            user_name: '',\n            user_avatar: '',\n            reply: null,\n            content: 'test',\n            favor_count: 1,\n            favored: false,\n            created: 1530681540,\n          },\n          content: 'test',\n          favor_count: 2,\n          favored: false,\n          created: 1530681540,\n        },\n        {\n          id: '5b3c6e4873df3e53f870d912',\n          user_id: 0,\n          user_name: '',\n          user_avatar: '',\n          reply: {\n            id: '5b3c58c473df3e64d8d53afb',\n            user_id: 0,\n            user_name: '',\n            user_avatar: '',\n            reply: null,\n            content: 'test',\n            favor_count: 1,\n            favored: false,\n            created: 1530681540,\n          },\n          content: 'test',\n          favor_count: 0,\n          favored: false,\n          created: 1530687048,\n        },\n      ],\n      reply_count: 4,\n      favor_count: 0,\n      favored: false,\n      created: 1530547977,\n    },\n  ],\n  total: 1,\n  page: 1,\n};\n"]}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "comment",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "main": "lib/App.js",
   "description": "通用评论",
   "keywords": [
@@ -31,7 +31,7 @@
   },
   "scripts": {
     "precommit": "lint-staged",
-    "prettier": "prettier --trailing-comma --write 'src/**/*.{js,jsx,json,css,less}'",
+    "prettier": "prettier --single-quote --trailing-comma --write 'src/**/*.{js,jsx,json,css,less}'",
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test --env=jsdom",

src/App.css

@@ -7,3 +7,16 @@
   position: fixed;
   top: 45%;
 }
+.comment-header-tag {
+  border: 1px solid #cecece;
+  border-radius: 0;
+  color: #666;
+}
+.comment-header-tip {
+  color: #5198eb;
+  margin-right: 15px;
+  margin-left: 5px;
+}
+.comment-header-text {
+  color: #666;
+}

src/App.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { message } from "antd";
+import { message, Tag } from "antd";
 import axios from "./axios";
 import { ERROR_DEFAULT, LIMIT } from "./constant";
 import { CommentContext } from "./Comment";
@@ -8,6 +8,7 @@ import { isFunction } from "./helper";
 import CommentInput from "./components/CommentInput";
 import CommentList from "./components/CommentList";
 import Editor from "./components/Editor";
+import lang from "./lang";
 import "./App.css";
 
 class App extends Component {
@@ -32,6 +33,7 @@ class App extends Component {
     this.sCreateComment = this.sCreateComment.bind(this);
     this.sCreateReply = this.sCreateReply.bind(this);
     this.sCommentFavor = this.sCommentFavor.bind(this);
+    this.sReplyFavor = this.sReplyFavor.bind(this);
     this.sOssSts = this.sOssSts.bind(this);
   }
 
@@ -82,10 +84,10 @@ class App extends Component {
       })
       .catch(error => {
         if (error.response && error.response.data && error.response.data.msg) {
-          message.error(error.response.data.msg || ERROR_DEFAULT);
+          message.error(lang[error.response.data.msg] || ERROR_DEFAULT);
           return;
         }
-        message.error(error.message || ERROR_DEFAULT);
+        message.error(lang[error.message] || ERROR_DEFAULT);
       })
       .finally(() => {
         this.handleChangeLoading("sGetComment", false);
@@ -101,22 +103,25 @@ class App extends Component {
     axios
       .get(`${API}/replies?comment_id=${commentId}&page=${page}&limit=${LIMIT}`)
       .then(response => {
-        const { list: replies } = response.data;
-        if (!replies) {
+        if (!response.data.list) {
           message.info("没有更多数据了！");
         }
         const list = this.state.list.map(item => {
           if (item.id === commentId) {
             if (!item.replies) item.replies = [];
-            if (replies) {
+            if (response.data.list) {
               if (page === 1) {
                 // 如果当前页数为第一页，则清空当前所有的 replies
                 // 并将获取到的 replies 存放在 state
-                item.replies = replies;
+                item.replies = response.data.list;
               } else {
-                item.replies = item.replies.concat(replies);
+                item.replies = item.replies
+                  .filter(o => !o.isTemporary)
+                  .concat(response.data.list);
                 // 如果当前页数非第一页，则合并 replies
               }
+              item.reply_count = response.data.total;
+              item.reply_page = response.data.page;
             } else {
               item.isNoMoreReply = true;
             }
@@ -127,10 +132,10 @@ class App extends Component {
       })
       .catch(error => {
         if (error.response && error.response.data && error.response.data.msg) {
-          message.error(error.response.data.msg || ERROR_DEFAULT);
+          message.error(lang[error.response.data.msg] || ERROR_DEFAULT);
           return;
         }
-        message.error(error.message || ERROR_DEFAULT);
+        message.error(lang[error.message] || ERROR_DEFAULT);
       })
       .finally(() => {
         this.handleChangeLoading("sGetReply", false);
@@ -139,9 +144,9 @@ class App extends Component {
 
   /**
    * 添加评论
-   * @param {string} content comment content
+   * @param {object} {content} comment content
    */
-  sCreateComment(content) {
+  sCreateComment({ content } = {}) {
     if (!content) return message.error("评论内容不能为空 ");
     this.handleChangeLoading("sCreateComment", true);
     const { API, type, businessId } = this.props;
@@ -159,19 +164,19 @@ class App extends Component {
         // 将数据写入到 list 中
         // 临时插入
         // 等到获取数据之后，删除临时数据
-        const { list } = this.state;
+        const { list, total } = this.state;
         list.unshift({
           ...response.data,
           isTemporary: true // 临时的数据
         });
-        this.setState({ list });
+        this.setState({ list, total: total + 1 });
       })
       .catch(error => {
         if (error.response && error.response.data && error.response.data.msg) {
-          message.error(error.response.data.msg || ERROR_DEFAULT);
+          message.error(lang[error.response.data.msg] || ERROR_DEFAULT);
           return;
         }
-        message.error(error.message || ERROR_DEFAULT);
+        message.error(lang[error.message] || ERROR_DEFAULT);
       })
       .finally(() => {
         this.handleChangeLoading("sCreateComment", false);
@@ -184,6 +189,8 @@ class App extends Component {
    * @param {object} data { comment_id, content, [reply_id] }
    */
   sCreateReply(data, cb) {
+    console.log("list: ", this.state.list);
+
     if (!data.content) return message.error("回复内容不能为空 ");
     this.handleChangeLoading("sCreateReply", true);
     const { API } = this.props;
@@ -193,26 +200,30 @@ class App extends Component {
       withCredentials: true
     })
       .then(response => {
-        // // 将该条数据插入到 list 中
-        // const list = this.state.list.map(item => {
-        //   if (item.id === data.comment_id) {
-        //     if (!item.replies) item.replies = [];
-        //     item.reply_count += 1
-        //     item.replies.unshift(response.data);
-        //   }
-        //   return item;
-        // });
-        // this.setState({ list });
-        this.sGetReply({ commentId: data.comment_id });
         message.success("回复成功！");
         if (isFunction(cb)) cb();
+        // 将数据写入到 list 中
+        // 临时插入
+        // 等到获取数据之后，删除临时数据
+        const list = this.state.list.map(item => {
+          if (item.id === data.comment_id) {
+            if (!item.replies) item.replies = [];
+            item.replies.push({
+              ...response.data,
+              isTemporary: true // 临时的数据
+            });
+            item.reply_count += 1;
+          }
+          return item;
+        });
+        this.setState({ list });
       })
       .catch(error => {
         if (error.response && error.response.data && error.response.data.msg) {
-          message.error(error.response.data.msg || ERROR_DEFAULT);
+          message.error(lang[error.response.data.msg] || ERROR_DEFAULT);
           return;
         }
-        message.error(error.message || ERROR_DEFAULT);
+        message.error(lang[error.message] || ERROR_DEFAULT);
       })
       .finally(() => {
         this.handleChangeLoading("sCreateReply", false);
@@ -220,7 +231,7 @@ class App extends Component {
   }
 
   /**
-   * 点赞/取消点赞
+   * 评论 点赞/取消点赞
    * @param {string} commentId { commentId }
    * @param {boolean} favored   是否已经点过赞
    */
@@ -245,16 +256,58 @@ class App extends Component {
       })
       .catch(error => {
         if (error.response && error.response.data && error.response.data.msg) {
-          message.error(error.response.data.msg || ERROR_DEFAULT);
+          message.error(lang[error.response.data.msg] || ERROR_DEFAULT);
           return;
         }
-        message.error(error.message || ERROR_DEFAULT);
+        message.error(lang[error.message] || ERROR_DEFAULT);
       })
       .finally(() => {
         this.handleChangeLoading("sCommentFavor", false);
       });
   }
 
+  /**
+   * 回复 点赞/取消点赞
+   * @param {string} replyId  replyId
+   * @param {string} commentId  commentId
+   * @param {boolean} favored   是否已经点过赞
+   */
+  sReplyFavor(replyId, commentId, favored) {
+    this.handleChangeLoading("sReplyFavor", true);
+    console.log("replyId, commentId ", replyId, commentId);
+
+    const { API } = this.props;
+    axios(`${API}/replies/${replyId}/favor`, {
+      method: favored ? "delete" : "put",
+      withCredentials: true
+    })
+      .then(response => {
+        console.log("response: ", response);
+
+        message.success(favored ? "取消点赞成功！" : "点赞成功！");
+        // TODO: (2018.07.20 node) 对评论的回复点赞，报错
+        // // 更新 list 中的该项数据的 favored
+        // const list = this.state.list.map(item => {
+        //   if (item.id === replyId) {
+        //     item.favored = !favored;
+        //     item.favor_count += favored ? -1 : 1;
+        //   }
+        //   return item;
+        // });
+        // this.setState({ list });
+      })
+      .catch(error => {
+        if (error.response && error.response.data && error.response.data.msg) {
+          message.error(lang[error.response.data.msg] || ERROR_DEFAULT);
+          return;
+        }
+        message.error(lang[error.message] || ERROR_DEFAULT);
+      })
+      .finally(() => {
+        this.handleChangeLoading("sReplyFavor", false);
+      });
+  }
+
   /**
    * 获取 OSS 上传的参数
    */
@@ -268,10 +321,10 @@ class App extends Component {
       })
       .catch(error => {
         if (error.response && error.response.data && error.response.data.msg) {
-          message.error(error.response.data.msg || ERROR_DEFAULT);
+          message.error(lang[error.response.data.msg] || ERROR_DEFAULT);
           return;
         }
-        message.error(error.message || ERROR_DEFAULT);
+        message.error(lang[error.message] || ERROR_DEFAULT);
       })
       .finally(() => {
         this.handleChangeLoading("sOssSts", false);
@@ -286,6 +339,7 @@ class App extends Component {
       sCreateComment: this.sCreateComment,
       sGetComment: this.sGetComment,
       sCommentFavor: this.sCommentFavor,
+      sReplyFavor: this.sReplyFavor,
       sCreateReply: this.sCreateReply,
       sGetReply: this.sGetReply,
       sOssSts: this.sOssSts
@@ -294,6 +348,15 @@ class App extends Component {
     return (
       <CommentContext.Provider value={value}>
         <div className="comment">
+          {this.props.showHeader && (
+            <div style={{ marginBottom: 15 }}>
+              <Tag className="comment-header-tag">留言</Tag>
+              <span className="comment-header-tip">口碑</span>
+              <span className="comment-header-text">
+                (全站挑出毛病或提出合理建议，奖励10到100元红包)
+              </span>
+            </div>
+          )}
           {this.props.showEditor && (
             <CommentInput content={this.props.children} />
           )}
@@ -313,13 +376,15 @@ App.propTypes = {
   businessId: PropTypes.string.isRequired, // 评论的 business_id
   API: PropTypes.string, // 评论的 API 前缀
   showList: PropTypes.bool, // 是否显示评论列表
-  showEditor: PropTypes.bool // 是否显示评论输入框
+  showEditor: PropTypes.bool, // 是否显示评论输入框
+  showHeader: PropTypes.bool // 是否显示评论顶部的提示
 };
 
 App.defaultProps = {
   API: "http://api.links123.net/comment/v1",
   showList: true,
-  showEditor: true
+  showEditor: true,
+  showHeader: true
 };
 
 export { Editor };

src/CHANGELOG.md

@@ -1,12 +0,0 @@
-# CHANGELOG
-
-
-## 0.1.0
-
-- [x] 不兼容更新。
-- [x] 添加了很多 `Props`
-- [x] 组件导出为 `Comment` 和 `Editor`
-
-
-
-

src/components/CommentBox/index.css

@@ -1,4 +1,4 @@
-.showMore {
+.comment-show-more {
   color: #4a90e2;
   text-align: center;
   width: 100px;
@@ -8,40 +8,41 @@
   margin: 0 auto;
   transition: all 0.3s;
 }
-.showMore:hover {
+.comment-show-more:hover {
   background-color: #f5f5f5;
   color: #1890ff;
 }
-.moreBox {
+.comment-more-box {
   text-align: center;
   width: 90%;
-  margin-left: 40px;
+  margin-left: 50px;
+  margin-top: 10px;
   height: 40px;
   display: inline-block;
 }
 @media screen and (max-width: 616px) and (min-width: 449px) {
-  .moreBox {
+  .comment-more-box {
     text-align: center;
     width: 85%;
-    margin-left: 40px;
+    margin-left: 50px;
     height: 40px;
     display: inline-block;
   }
 }
 @media screen and (max-width: 449px) and (min-width: 365px) {
-  .moreBox {
+  .comment-more-box {
     text-align: center;
     width: 80%;
-    margin-left: 40px;
+    margin-left: 50px;
     height: 40px;
     display: inline-block;
   }
 }
 @media screen and (max-width: 365px) {
-  .moreBox {
+  .comment-more-box {
     text-align: center;
     width: 75%;
-    margin-left: 40px;
+    margin-left: 50px;
     height: 40px;
     display: inline-block;
   }

src/components/CommentBox/index.js

@@ -39,9 +39,10 @@ class CommentBox extends Component {
   /**
    * 渲染回复 DOM
    * @param {array} replies 回复列表
+   * @param {number} replies 回复的数量
    * @param {boolean} isNoMoreReply 是否没有更多回复
    */
-  renderReplies(replies, isNoMoreReply) {
+  renderReplies(replies, replyCount, isNoMoreReply) {
     const { commentId } = this.props;
     const { showReply } = this.state;
     if (showReply && replies && replies.length) {
@@ -56,17 +57,18 @@ class CommentBox extends Component {
                   replyId={item.id}
                   key={item.id}
                   content={item}
-                  type="reply"
+                  action="replyToReply" // 回复的回复
                 />,
-                <div className="moreBox" key="show_more_button">
-                  {!isNoMoreReply && (
-                    <span
-                      className="showMore"
-                      onClick={() => this.handleGetMoreReply(commentId)}
-                    >
-                      查看更多回复
-                    </span>
-                  )}
+                <div className="comment-more-box" key="show_more_button">
+                  {!isNoMoreReply &&
+                    replyCount !== len && (
+                      <span
+                        className="comment-show-more"
+                        onClick={() => this.handleGetMoreReply(commentId)}
+                      >
+                        查看更多回复
+                      </span>
+                    )}
 
                   <a
                     style={{ float: "right" }}
@@ -83,7 +85,7 @@ class CommentBox extends Component {
                 replyId={item.id}
                 key={item.id}
                 content={item}
-                type="reply"
+                action="replyToReply" // 评论的回复
               />
             );
           })}
@@ -103,9 +105,13 @@ class CommentBox extends Component {
           onShowReply={this.handleToggleReply}
           showReply={showReply}
           commentId={content.id}
-          type="comment"
+          action="reply" // 评论的回复
         />
-        {this.renderReplies(content.replies, content.isNoMoreReply)}
+        {this.renderReplies(
+          content.replies,
+          content.reply_count,
+          content.isNoMoreReply
+        )}
       </div>
     );
   }

src/components/CommentInput/index.js

@@ -1,143 +1,70 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { OSS_LINK } from "../../constant";
 import Comment from "../../Comment";
 
 class CommentInput extends Component {
   constructor(props) {
     super(props);
-    this.state = {
-      value: "",
-
-      fileList: [], // 图片列表
-      fileMap: {} // 已经上传的图片路径和 uid 的映射 { uid: path }
-    };
-    this.handleChange = this.handleChange.bind(this);
+    this.state = {};
     this.handleSubmit = this.handleSubmit.bind(this);
-    this.handleChangeFileList = this.handleChangeFileList.bind(this);
-    this.handleChangeEmoji = this.handleChangeEmoji.bind(this);
-    this.handleUpload = this.handleUpload.bind(this);
-  }
-
-  handleChange(value) {
-    this.setState({ value });
-  }
-
-  handleChangeFileList(fileList) {
-    this.setState({ fileList });
-  }
-
-  handleChangeEmoji(emojiId) {
-    let { value } = this.state;
-    value += `[${emojiId}]`;
-    this.setState({ value });
-    React.Children.forEach(this.props.content, child => {
-      // 如果 Editor 的父组件传入了 onChange 事件，则需要将改变之后的值传递给父组件
-      if (child.props.onChange) {
-        child.props.onChange(value);
-      }
-    });
   }
 
-  handleUpload({ uid, path }) {
-    const { fileMap } = this.state;
-    fileMap[uid] = path;
-    this.setState({ fileMap });
-  }
-
-  handleSubmit() {
-    let { value, fileMap, fileList } = this.state;
-    if (fileList.length) {
-      value += "<br/>";
-      fileList.forEach(item => {
-        value += `[${OSS_LINK}${fileMap[item.uid]}]`;
-      });
-    }
-
-    const { type, commentId, replyId, handleToggleInput } = this.props;
-    if (type === "normal") {
+  handleSubmit(value) {
+    const { action, commentId, replyId, callback } = this.props;
+    if (action === "comment") {
       this.props.app.sCreateComment({
         content: value
       });
-    } else if (type === "comment") {
+    } else if (action === "reply") {
       this.props.app.sCreateReply(
         {
           comment_id: commentId,
           content: value
         },
-        () => handleToggleInput()
+        () => callback && callback()
       );
-    } else if (type === "reply") {
+    } else if (action === "replyToReply") {
       this.props.app.sCreateReply(
         {
           comment_id: commentId,
           content: value,
           reply_id: replyId
         },
-        () => handleToggleInput()
+        () => callback && callback()
       );
     }
-
-    React.Children.forEach(this.props.content, child => {
-      // 如果 Editor 的父组件传入了 onSubmit 事件，则需要将改变之后的值传递给父组件
-      if (child.props.onSubmit) {
-        child.props.onSubmit(value);
-      }
-    });
   }
 
   render() {
-    const { type } = this.props;
-    const { value, fileList } = this.state;
-
     const childrenWithProps = React.Children.map(this.props.content, child => {
       return React.cloneElement(child, {
-        value: value,
-        fileList: fileList,
-        onChange: this.handleChange,
+        // 编辑器本身不提交值，但 CommentInput 会提交
+        // CommentInput 主要是负责评论的业务逻辑，提交评论和回复
+        // 默认使用 CommentInput 的 onSubmit 来提交评论
+        // 但也可以使用 Editor 的 props 来覆盖 onSubmit
         onSubmit: this.handleSubmit,
-        onChangeFileList: this.handleChangeFileList,
-        onChangeEmoji: this.handleChangeEmoji,
-        onUpload: this.handleUpload,
-        loading: this.props.app.loading.sCreateComment,
-        ...child.props
+        ...child.props,
+        // 如果当前的编辑器不是“评论”，则编辑器高度减小一些
+        rows:
+          this.props.action === "comment"
+            ? child.props.rows
+            : child.props.rows - 1
       });
     });
 
-    return (
-      <div>
-        {type === "normal" ? (
-          <div>
-            <span
-              style={{
-                border: "1px solid #CECECE",
-                color: "#666",
-                padding: "2px 3px"
-              }}
-            >
-              回复
-            </span>
-            <span style={{ marginLeft: "20px", color: "#5198EB" }}>
-              口碑
-              <span style={{ marginLeft: "20px", color: "#666666" }}>
-                (全站挑出毛病或提出合理建议，奖励10到100元红包)
-              </span>
-            </span>
-          </div>
-        ) : null}
-        <div style={{ marginTop: 40 }}>{childrenWithProps}</div>
-      </div>
-    );
+    return <div>{childrenWithProps}</div>;
   }
 }
 
 CommentInput.propTypes = {
-  // normal 有切换回复/口碑的 header ; comment 评论输入框 / reply 回复输入框
-  type: PropTypes.oneOf(["normal", "comment", "reply"])
+  // comment 评论
+  // reply 评论的回复
+  // replyToReply 回复的回复
+  action: PropTypes.oneOf(["comment", "reply", "replyToReply"])
 };
 
 CommentInput.defaultProps = {
-  type: "normal"
+  action: "comment"
 };
 
 export default Comment(CommentInput);

src/components/CommentList/index.css

@@ -1,4 +1,4 @@
-.showMore {
+.comment-list-show-more {
   color: #4a90e2;
   text-align: center;
   width: 100%;
@@ -8,7 +8,7 @@
   margin: 40px auto;
   transition: all 0.3s;
 }
-.showMore:hover {
+.comment-list-show-more:hover {
   background-color: #f5f5f5;
   color: #1890ff;
 }

src/components/CommentList/index.js

@@ -17,28 +17,33 @@ class CommentList extends Component {
   render() {
     const {
       list,
+      total,
       page,
       loading,
       isNoMoreComment,
       sGetComment
     } = this.props.app;
 
-    const spinning = Boolean(loading.sGetComment || loading.sCommentFavor);
+    const spinning = Boolean(
+      loading.sGetComment || loading.sCommentFavor || loading.sReplyFavor
+    );
     return (
       <div>
         <Spin spinning={spinning}>
+          <div>共 {total} 条评论</div>
           {list.map(item => (
             <CommentBox content={item} key={item.id} commentId={item.id} />
           ))}
 
-          {!isNoMoreComment && (
-            <div
-              className="showMore"
-              onClick={() => sGetComment({ page: page + 1 })}
-            >
-              <span>查看更多评论</span>
-            </div>
-          )}
+          {!isNoMoreComment &&
+            list.length !== total && (
+              <div
+                className="comment-list-show-more"
+                onClick={() => sGetComment({ page: page + 1 })}
+              >
+                <span>查看更多评论</span>
+              </div>
+            )}
         </Spin>
       </div>
     );

src/components/ContentItem/index.css

@@ -1,50 +1,53 @@
-.left {
+.comment-item-box {
+  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;
 }
-.right {
+.comment-item-right {
   display: inline-block;
   width: 90%;
   margin-left: 10px;
+  margin-bottom: 20px;
 }
-.box {
-  margin: 10px;
-  padding: 15px 5px;
-  border-top: 1px solid #eee;
-}
-.content {
+.comment-item-content {
   margin: 10px 0;
 }
-.itemLeft {
+.comment-item-bottom {
+  margin: 20px auto;
+}
+.comment-item-bottom-left {
   float: left;
+  user-select: none;
 }
-.itemRight {
+.comment-item-bottom-right {
   float: right;
   margin-left: 5px;
+  cursor: pointer;
 }
-.bottom {
-  margin: 20px auto;
-}
-.favored {
+.comment-favored {
   color: #4a90e2;
 }
 @media screen and (max-width: 616px) and (min-width: 449px) {
-  .right {
+  .comment-item-right {
     display: inline-block;
     width: 85%;
     margin-left: 10px;
   }
 }
 @media screen and (max-width: 449px) and (min-width: 365px) {
-  .right {
+  .comment-item-right {
     display: inline-block;
     width: 80%;
     margin-left: 10px;
   }
 }
 @media screen and (max-width: 365px) {
-  .right {
+  .comment-item-right {
     display: inline-block;
     width: 75%;
     margin-left: 10px;

src/components/ContentItem/index.js

@@ -1,24 +1,30 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { Avatar, Icon } from "antd";
+import { Avatar, Icon, Tooltip } from "antd";
 import dayjs from "dayjs";
+import "dayjs/locale/zh-cn";
+import relativeTime from "dayjs/plugin/relativeTime";
 import Comment from "../../Comment";
 import CommentInput from "../CommentInput";
+import avatar from "../../avatar";
 import { renderContent } from "../../helper";
 import "./index.css";
 
+dayjs.locale("zh-cn");
+dayjs.extend(relativeTime);
+
 class CommentItem extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      isShowInput: false
+      showInput: false
     };
     this.handleToggleInput = this.handleToggleInput.bind(this);
     this.renderTextWithReply = this.renderTextWithReply.bind(this);
   }
 
   handleToggleInput() {
-    this.setState({ isShowInput: !this.state.isShowInput });
+    this.setState({ showInput: !this.state.showInput });
   }
 
   renderTextWithReply(text, content) {
@@ -40,75 +46,89 @@ class CommentItem extends Component {
       commentId,
       replyId,
       content,
-      type,
+      action,
       showReply,
       onShowReply,
       app
     } = this.props;
-    const { isShowInput } = this.state;
-    const isComment = type === "comment";
+
+    const { showInput } = this.state;
+
     return (
-      <div className="box">
-        <div className="left">
-          <Avatar src={content.user_avatar} size="large" />
+      <div className="comment-item-box">
+        <div className="comment-item-left">
+          <Avatar src={content.user_avatar || avatar} size="large" />
         </div>
-        <div className="right">
-          <div className="name">
+        <div className="comment-item-right">
+          <div>
             <a href={`/${content.user_id}`}>
               {content.user_name || "暂无昵称"}
             </a>
 
             <span style={{ marginLeft: 10 }}>
-              {dayjs(content.created * 1000).format("YYYY-MM-DD HH:mm:ss")}
+              <Tooltip
+                placement="top"
+                title={dayjs(content.created * 1000).format(
+                  "YYYY-MM-DD HH:mm:ss"
+                )}
+              >
+                {dayjs(content.created * 1000).fromNow()}
+              </Tooltip>
             </span>
           </div>
           <div
-            className="content"
+            className="comment-item-content"
             dangerouslySetInnerHTML={{
               __html: renderContent(
                 this.renderTextWithReply(content.content, content)
               )
             }}
           />
-          <div className="bottom">
-            {isComment && content.reply_count ? (
+          <div className="comment-item-bottom">
+            {content.reply_count ? (
               <div>
-                <a
-                  className="itemLeft"
-                  onClick={onShowReply}
-                  style={{ userSelect: "none" }}
-                >
+                <a className="comment-item-bottom-left" onClick={onShowReply}>
                   {content.reply_count} 条回复
                   {showReply ? <Icon type="up" /> : <Icon type="down" />}
                 </a>
               </div>
             ) : null}
 
-            <a onClick={this.handleToggleInput} className="itemRight">
+            <a
+              onClick={this.handleToggleInput}
+              className="comment-item-bottom-right"
+            >
               &nbsp; 回复
             </a>
             <div
-              className="itemRight"
-              style={{ cursor: "pointer" }}
-              onClick={() => app.sCommentFavor(content.id, content.favored)}
+              className="comment-item-bottom-right"
+              onClick={() => {
+                if (replyId) {
+                  // 如果有 replyId，则说明是评论的回复
+                  app.sReplyFavor(content.id, commentId, content.favored);
+                  return;
+                }
+                app.sCommentFavor(content.id, content.favored);
+              }}
             >
               <Icon
                 type="like-o"
-                className={content.favored ? "favored" : ""}
+                className={content.favored ? "comment-favored" : ""}
               />
               &nbsp;{content.favor_count}
             </div>
           </div>
-
-          {isShowInput ? (
-            <CommentInput
-              type={type}
-              replyId={replyId}
-              commentId={commentId}
-              handleToggleInput={this.handleToggleInput}
-            />
-          ) : null}
         </div>
+
+        {showInput && (
+          <CommentInput
+            content={app.children}
+            action={action}
+            replyId={replyId}
+            commentId={commentId}
+            callback={this.handleToggleInput}
+          />
+        )}
       </div>
     );
   }
@@ -117,13 +137,14 @@ class CommentItem extends Component {
 CommentItem.propTypes = {
   content: PropTypes.object.isRequired,
   // comment 评论
-  // reply 回复
-  type: PropTypes.oneOf(["comment", "reply"]),
+  // reply 评论的回复
+  // replyToReply 回复的回复
+  action: PropTypes.oneOf(["comment", "reply", "replyToReply"]),
   onShowReply: PropTypes.func
 };
 
 CommentItem.defaultProps = {
-  type: "comment",
+  action: "comment",
   onShowReply: () => {}
 };
 

src/components/Editor/Upload.js

@@ -10,7 +10,6 @@ import {
   MAX_UPLOAD_NUMBER
 } from "../../constant";
 import Comment from "../../Comment";
-// import styles from "./Upload.less";
 import "./Upload.css";
 
 const client = oss => {

src/components/Editor/index.css

@@ -1,4 +1,4 @@
-.editor {
+.comment-editor {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
@@ -16,67 +16,61 @@
   border-radius: 4px;
   transition: all 0.3s, height 0s;
 }
-.editor textarea.ant-input {
+.comment-editor textarea.ant-input {
   border: none;
   border-bottom: 1px solid #eee;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
-.editor textarea.ant-input:hover {
+.comment-editor textarea.ant-input:hover {
   border: none;
   border-bottom: 1px solid #eee;
 }
-.editor textarea.ant-input:focus {
+.comment-editor textarea.ant-input:focus {
   box-shadow: none;
   border-bottom: 1px solid #eee;
 }
-.editor [contentEditable="true"]:empty:not(:focus):before {
+.comment-editor [contentEditable="true"]:empty:not(:focus):before {
   content: attr(data-text);
   color: #bfbfbf;
 }
-.editor:focus,
-.editor:hover {
+.comment-editor:focus,
+.comment-editor:hover {
   border-color: #40a9ff;
   outline: 0;
   box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
 }
-.content {
-  display: block;
-  box-sizing: border-box;
-  padding: 4px 10px;
-  width: 100%;
-  max-width: 100%;
-  height: 100%;
-  max-height: 110px;
-  overflow-y: auto;
-  overflow-x: auto;
-}
-.content:focus,
-.content:hover {
-  outline: 0;
-}
-.toolbar {
+.comment-toolbar {
   display: inline-block;
   width: 100%;
   margin: 5px 0 0 0;
 }
-.toolbar .icon {
+.comment-toolbar .comment-toolbar-icon {
   font-size: 23px;
   cursor: pointer;
   transition: color 0.3s;
 }
-.toolbar .icon:hover {
+.comment-toolbar .comment-toolbar-icon:hover {
   color: #40a9ff;
 }
-.feed .ant-popover-inner-content {
+.comment-toolbar-left {
+  float: left;
+  margin: 8px 11px;
+}
+.comment-toolbar-right {
+  float: right;
+  margin: 5px 11px;
+}
+
+.comment-emoji-popover .ant-popover-inner-content {
   padding: 12px 16px 20px 16px;
 }
-.feed .ant-carousel .slick-dots {
+.comment-emoji-popover .ant-carousel .slick-dots {
   bottom: -10px;
 }
-.feed .ant-carousel .slick-dots li.slick-active button {
+.comment-emoji-popover .ant-carousel .slick-dots li.slick-active button {
   background-color: #7b868a;
 }
-.feed .ant-carousel .slick-dots li button {
+.comment-emoji-popover .ant-carousel .slick-dots li button {
   background-color: #a2aeb5;
 }

src/components/Editor/index.js

@@ -1,41 +1,71 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Icon, Button, Popover, Input } from "antd";
+import { OSS_LINK } from "../../constant";
 import { MAX_UPLOAD_NUMBER } from "../../constant";
 import Upload from "./Upload";
 import Emoji from "./Emoji";
 import "./index.css";
 
 const { TextArea } = Input;
-// 设置 Editor 组件的默认值
-// 不能在 Editor.defaultProps 中设置
-// 因为 Editor 在 ComponentInput 中调用
-// 在 ComponentInput 中，需要使用 Editor 的 props 覆盖 ComponentInput 传入的 props
-const EditorDefaultProps = {
-  rows: 5,
-  placeholder: "说点什么吧...",
-  showEmoji: true,
-  showUpload: true,
-  submitText: "发表",
-  onChange: () => {}
-};
 
 class Editor extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      showUpload: false
+      showUpload: false,
+      value: "", // 编辑器里面的值
+
+      fileList: [], // 图片列表
+      fileMap: {} // 已经上传的图片路径和 uid 的映射 { uid: path }
     };
+    this.handleChange = this.handleChange.bind(this);
     this.handleClickEmoji = this.handleClickEmoji.bind(this);
+    this.handleChangeFileList = this.handleChangeFileList.bind(this);
     this.handleShowUpload = this.handleShowUpload.bind(this);
+    this.handleUpload = this.handleUpload.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
   }
 
   componentDidMount() {}
 
-  handleClickEmoji(emojiId) {
-    this.props.onChangeEmoji(emojiId);
+  /**
+   * 编辑器的值改变事件
+   * 将最新的值存储到 state 中
+   * @param {string} value 输入的值
+   */
+  handleChange(value) {
+    this.setState({ value });
+    if (this.props.onChange) {
+      this.props.onChange(value);
+    }
+  }
+
+  /**
+   * 点击 emoji 的事件
+   * 点击后，需要将改 emoji 插入到编辑器中
+   * 插入的值为 [emoji chinese name]
+   * 参数 emoji 即为 emoji chinese name
+   * @param {string}} emoji emoji 的中文，如 微笑
+   */
+  handleClickEmoji(emoji) {
+    let { value } = this.state;
+    value += `[${emoji}]`;
+    this.handleChange(value);
   }
 
+  /**
+   * 监听文件列表改变事件
+   * @param {Array} fileList 文件列表
+   */
+  handleChangeFileList(fileList) {
+    this.setState({ fileList });
+  }
+
+  /**
+   * 控制上传 Popover 的显示和隐藏
+   * @param {boolean} showUpload 是否显示上传的 Popover
+   */
   handleShowUpload(showUpload) {
     if (typeof showUpload === "boolean") {
       this.setState({ showUpload: showUpload });
@@ -44,34 +74,59 @@ class Editor extends React.Component {
     }
   }
 
+  /**
+   * 上传文件 TODO:
+   * @param {object} param 文件对象
+   */
+  handleUpload({ uid, path }) {
+    const { fileMap } = this.state;
+    fileMap[uid] = path;
+    this.setState({ fileMap });
+  }
+
+  /**
+   * 提交编辑器内容
+   * 提交功能，交给父组件来实现
+   * 需要父组件传入 onSubmit
+   */
+  handleSubmit() {
+    let { value, fileMap, fileList } = this.state;
+    if (fileList.length) {
+      value += "<br/>";
+      fileList.forEach(item => {
+        value += `[${OSS_LINK}${fileMap[item.uid]}]`;
+      });
+    }
+    this.props.onSubmit(value);
+  }
+
   render() {
-    const props = { ...EditorDefaultProps, ...this.props };
     const {
       value,
-      onChange,
-      onSubmit,
-      loading,
       placeholder,
-      fileList,
-      onChangeFileList,
       rows,
-      onUpload,
       showEmoji,
       showUpload,
-      submitText
-    } = props;
+      btnSubmitText,
+      btnLoading,
+      btnDisabled,
+      button,
+      emojiToolIcon,
+      imageToolIcon
+    } = this.props;
 
+    const handleSubmit = this.handleSubmit;
     return (
-      <div className="editor">
+      <div className="comment-editor">
         <TextArea
-          value={value}
-          onChange={e => onChange(e.target.value)}
+          value={value || this.state.value}
+          onChange={e => this.handleChange(e.target.value)}
           rows={rows}
           placeholder={placeholder}
         />
 
-        <div className="toolbar">
-          <div style={{ float: "left", margin: "8px 11px" }}>
+        <div className="comment-toolbar">
+          <div className="comment-toolbar-left">
             {showEmoji && (
               <Popover
                 trigger="click"
@@ -82,9 +137,11 @@ class Editor extends React.Component {
                     <Emoji onClick={this.handleClickEmoji} />
                   </div>
                 }
-                overlayClassName="feed"
+                overlayClassName="comment-emoji-popover"
               >
-                <Icon type="smile-o" className="icon" />
+                {emojiToolIcon || (
+                  <Icon type="smile-o" className="comment-toolbar-icon" />
+                )}
               </Popover>
             )}
 
@@ -97,9 +154,9 @@ class Editor extends React.Component {
                     style={{ width: 112 * MAX_UPLOAD_NUMBER, minHeight: 100 }}
                   >
                     <Upload
-                      onChangeFileList={onChangeFileList}
-                      onUpload={onUpload}
-                      fileList={fileList}
+                      onChangeFileList={this.handleChangeFileList}
+                      onUpload={this.handleUpload}
+                      fileList={this.state.fileList}
                     />
                   </div>
                 }
@@ -109,7 +166,8 @@ class Editor extends React.Component {
                     <span>
                       上传图片
                       <span style={{ color: "#666", fontWeight: 400 }}>
-                        (您还能上传{MAX_UPLOAD_NUMBER - fileList.length}张图片)
+                        (您还能上传{MAX_UPLOAD_NUMBER -
+                          this.state.fileList.length}张图片)
                       </span>
                     </span>
                     <Icon
@@ -124,20 +182,37 @@ class Editor extends React.Component {
                   </div>
                 }
               >
-                <Icon
-                  type="picture"
-                  className="icon"
-                  style={{ marginLeft: 10 }}
-                  onClick={() => this.handleShowUpload(true)}
-                />
+                {imageToolIcon ? (
+                  React.cloneElement(imageToolIcon, {
+                    onClick: () => this.handleShowUpload(true)
+                  })
+                ) : (
+                  <Icon
+                    type="picture"
+                    className="comment-toolbar-icon"
+                    style={{ marginLeft: 10 }}
+                    onClick={() => this.handleShowUpload(true)}
+                  />
+                )}
               </Popover>
             )}
           </div>
 
-          <div style={{ float: "right", margin: "5px 11px" }}>
-            <Button onClick={onSubmit} type="primary" loading={loading}>
-              {submitText}
-            </Button>
+          <div className="comment-toolbar-right">
+            {button ? (
+              React.cloneElement(button, {
+                onClick: button.props.onClick || handleSubmit
+              })
+            ) : (
+              <Button
+                onClick={() => this.handleSubmit()}
+                type="primary"
+                loading={btnLoading}
+                disabled={btnDisabled}
+              >
+                {btnSubmitText}
+              </Button>
+            )}
           </div>
         </div>
       </div>
@@ -150,8 +225,25 @@ Editor.propTypes = {
   placeholder: PropTypes.string,
   showEmoji: PropTypes.bool,
   showUpload: PropTypes.bool,
-  submitText: PropTypes.string,
-  onChange: PropTypes.func
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  onSubmit: PropTypes.func,
+  btnSubmitText: PropTypes.string,
+  btnLoading: PropTypes.bool,
+  btnDisabled: PropTypes.bool,
+  button: PropTypes.node,
+  emojiToolIcon: PropTypes.node,
+  imageToolIcon: PropTypes.node
+};
+
+Editor.defaultProps = {
+  rows: 5,
+  placeholder: "说点什么吧...",
+  showEmoji: true,
+  showUpload: true,
+  btnSubmitText: "发表",
+  btnLoading: false,
+  btnDisabled: false
 };
 
 export default Editor;

src/constant.js

@@ -11,3 +11,5 @@ export const OSS_LINK = "http://links-comment.oss-cn-beijing.aliyuncs.com";
 export const MAX_UPLOAD_NUMBER = 4;
 
 export const REGEXP = /\[.+?\]/g;
+
+export const AVATAR = "";

src/emoji.js

@@ -18,7 +18,7 @@ const emoji = [
   },
   {
     value: "4",
-    ttile: "发呆"
+    title: "发呆"
   },
   {
     value: "5",

src/index.js

@@ -1,26 +1,81 @@
-import React from "react";
+import React, { Component } from "react";
 import ReactDOM from "react-dom";
+import { Button, Icon } from "antd";
 import App, { Editor } from "./App";
 import registerServiceWorker from "./registerServiceWorker";
 
-const props = {
-  type: 1,
-  businessId: "1",
-  API: "http://api.links123.net/comment/v1",
-  showList: false
-};
-
-const editorProps = {
-  showEmoji: true,
-  placeholder: "说点什么吧",
-  rows: 5
-  // onSubmit={v => console.log()} // TODO...
-};
-
-ReactDOM.render(
-  <App {...props}>
-    <Editor {...editorProps} />
-  </App>,
-  document.getElementById("root-comment")
-);
+class Index extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: ""
+    };
+    this.handleChangeValue = this.handleChangeValue.bind(this);
+    this.handleChangeSubmit = this.handleChangeSubmit.bind(this);
+  }
+
+  handleChangeValue(value) {
+    this.setState({ value });
+    console.log("handleChangeValue value: ", value);
+  }
+
+  handleChangeSubmit(value) {
+    this.setState({ loading: true }, () => {
+      setTimeout(() => {
+        this.setState({ loading: false });
+      }, 2000);
+    });
+    console.log("submit value: ", value);
+  }
+
+  render() {
+    // 最简单的用法
+    return (
+      <App type={1} businessId="test">
+        <Editor />
+      </App>
+    );
+
+    // 复杂的用户法
+    // const props = {
+    //   type: 1,
+    //   businessId: "1",
+    //   API: "http://api.links123.net/comment/v1",
+    //   showList: true
+    // };
+
+    // const editorProps = {
+    //   showEmoji: true,
+    //   placeholder: "说点什么吧",
+    //   rows: 5,
+    //   btnLoading: this.state.loading,
+    //   btnDisable: this.state.loading,
+    //   btnSubmitText: "提交",
+    //   value: this.state.value,
+    //   onChange: v => this.handleChangeValue(v),
+    //   onSubmit: v => this.handleChangeSubmit(v),
+    //   button: (
+    //     <Button
+    //       type="primary"
+    //       ghost
+    //       // onClick={() => console.log('click btn: ', this.state.value)}
+    //     >
+    //       自定义按钮
+    //     </Button>
+    //   ),
+    //   emojiToolIcon: <Icon type="smile" style={{ fontSize: 23 }} />,
+    //   imageToolIcon: (
+    //     <Icon type="cloud-upload-o" style={{ fontSize: 25, marginLeft: 10 }} />
+    //   )
+    // };
+
+    // return (
+    //   <App {...props}>
+    //     <Editor {...editorProps} />
+    //   </App>
+    // );
+  }
+}
+
+ReactDOM.render(<Index />, document.getElementById("root-comment"));
 registerServiceWorker();

src/lang/index.js

@@ -1,6 +1,7 @@
 // 语言包
 // 英文短语和中文提示的对应
 const data = {
+  "not found": "没有数据",
   "auth failed": "请先登录",
   "create comment failed": "创建评论失败",
   "comment favor failed": "评论点赞失败",

src/mock.js

@@ -1,72 +0,0 @@
-export const comments = {
-  list: [
-    {
-      id: "5b3a4f0973df3e6a32b0a9d2",
-      user_id: 0,
-      user_name: "",
-      user_avatar: "",
-      content: "test[微笑]",
-      replies: [
-        {
-          id: "5b3c58c473df3e64d8d53afb",
-          user_id: 0,
-          user_name: "",
-          user_avatar: "",
-          reply: null,
-          content: "test",
-          favor_count: 1,
-          favored: false,
-          created: 1530681540
-        },
-        {
-          id: "5b3c58c473df3e64d8d53afa",
-          user_id: 0,
-          user_name: "",
-          user_avatar: "",
-          reply: {
-            id: "5b3c58c473df3e64d8d53afb",
-            user_id: 0,
-            user_name: "",
-            user_avatar: "",
-            reply: null,
-            content: "test",
-            favor_count: 1,
-            favored: false,
-            created: 1530681540
-          },
-          content: "test",
-          favor_count: 2,
-          favored: false,
-          created: 1530681540
-        },
-        {
-          id: "5b3c6e4873df3e53f870d912",
-          user_id: 0,
-          user_name: "",
-          user_avatar: "",
-          reply: {
-            id: "5b3c58c473df3e64d8d53afb",
-            user_id: 0,
-            user_name: "",
-            user_avatar: "",
-            reply: null,
-            content: "test",
-            favor_count: 1,
-            favored: false,
-            created: 1530681540
-          },
-          content: "test",
-          favor_count: 0,
-          favored: false,
-          created: 1530687048
-        }
-      ],
-      reply_count: 4,
-      favor_count: 0,
-      favored: false,
-      created: 1530547977
-    }
-  ],
-  total: 1,
-  page: 1
-};