lib/App.js

@@ -797,6 +797,7 @@ App.defaultProps = {
   businessUserId: 0,
   API: "//api.links123.net/comment/v1",
   emojiAPI: "//api.links123.net/link/v1",
+  LOGINLINK: process.env.RUN_MOD === "production" ? "https://passport.links123.com/login" : "http://test.links123.net:5050/login",
   showList: true,
   showEditor: true,
   showAlertComment: false,

lib/components/CommentBox/index.js

@@ -145,6 +145,7 @@ var CommentBox = function (_Component) {
             return _react2.default.createElement(_ContentItem2.default, {
               commentId: commentId,
               replyId: item.id,
+              user_id: item.user_id,
               key: item.id,
               content: item,
               action: "replyToReply" // 评论的回复

lib/components/ContentItem/AvatarHoverCard.js

@@ -169,6 +169,16 @@ var AvatarHoverCard = function (_Component) {
               }
             },
             _reactIntlUniversal2.default.get("bilingually.follow", { ext: "" })
+          ),
+          _react2.default.createElement(
+            "div",
+            {
+              className: "privateMessageBtn " + (this.props.locale === "en-US" ? "enUs" : ""),
+              onClick: function onClick() {
+                return _this2.props.sendMessage({ id: user_id });
+              }
+            },
+            _reactIntlUniversal2.default.get("bilingually.im.send_msg")
           )
         )
       );

lib/components/ContentItem/AvatarHoverCard.less

@@ -80,6 +80,22 @@
   border: 1px solid rgba(113, 193, 53, 1);
 }
 
+.privateMessageBtn {
+  width: 77px;
+  height: 31px;
+  line-height: 31px;
+  background: rgba(113, 193, 53, 1);
+  border-radius: 4px;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  text-align: center;
+  cursor: pointer;
+  margin: 0 5px;
+}
+.privateMessageBtn.enUs {
+  width: 90px;
+}
 .modalContainer {
   background: #fff;
   padding: 20px;

lib/components/Editor/Emoji.js

@@ -97,11 +97,10 @@ var Emoji = function (_React$Component) {
               return _react2.default.createElement(
                 "div",
                 { className: "item", key: item.id },
-                _react2.default.createElement("span", { className: "helper" }),
                 _react2.default.createElement("img", {
                   src: item.url,
                   alt: item.name,
-                  style: { display: "inline-block" },
+                  style: { display: "inline-block", width: "28px" },
                   onClick: function onClick() {
                     return _onClick(item.name);
                   }

lib/components/Editor/Emoji.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Editor/Emoji.js"],"names":["Emoji","carousel","next","prev","props","onClick","emojiList","content","i","length","push","slice","node","map","page","index","item","id","url","name","display","React","Component"],"mappings":";;;;;;;;;;;;;;AAAA;;;;AAGA;;;;;;;;;AADA;;;AAEA;AACA;;AAEA;;IAEMA,K;;;;;;;;;;;2BACG;AACL,UAAI,KAAKC,QAAT,EAAmB;AACjB,aAAKA,QAAL,CAAcC,IAAd;AACD;AACF;;;2BAEM;AACL,UAAI,KAAKD,QAAT,EAAmB;AACjB,aAAKA,QAAL,CAAcE,IAAd;AACD;AACF;;;6BAEQ;AAAA;;AAAA,mBACwB,KAAKC,KAD7B;AAAA,UACCC,QADD,UACCA,OADD;AAAA,UACUC,SADV,UACUA,SADV;;AAEP,UAAMC,UAAU,EAAhB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAK,IAAIC,IAAI,CAAb,EAAgBA,IAAIF,UAAUG,MAA9B,EAAsCD,KAAK,EAA3C,EAA+C;AAC7CD,gBAAQG,IAAR,CAAaJ,UAAUK,KAAV,CAAgBH,CAAhB,EAAmBA,IAAI,EAAvB,CAAb;AACD;;AAED,aACE;AAAA;AAAA;AACE,eAAK,mBAAQ;AACX,mBAAKP,QAAL,GAAgBW,IAAhB;AACD;AAHH;AAKGL,gBAAQM,GAAR,CAAY,UAACC,IAAD,EAAOC,KAAP;AAAA,iBACX;AAAA;AAAA,cAAK,KAAKA,KAAV,EAAiB,WAAU,OAA3B;AACGD,iBAAKD,GAAL,CAAS,UAACG,IAAD,EAAOD,KAAP;AAAA,qBACR;AAAA;AAAA,kBAAK,WAAU,MAAf,EAAsB,KAAKC,KAAKC,EAAhC;AACE,wDAAM,WAAU,QAAhB,GADF;AAEE;AACE,uBAAKD,KAAKE,GADZ;AAEE,uBAAKF,KAAKG,IAFZ;AAGE,yBAAO,EAAEC,SAAS,cAAX,EAHT;AAIE,2BAAS;AAAA,2BAAMf,SAAQW,KAAKG,IAAb,CAAN;AAAA;AAJX;AAFF,eADQ;AAAA,aAAT;AADH,WADW;AAAA,SAAZ;AALH,OADF;AAuBD;;;;EAvDiBE,gBAAMC,S;;kBA0DXtB,K","file":"Emoji.js","sourcesContent":["import React from \"react\";\nimport { Carousel } from \"antd\";\n// import emoji, { prefixUrl } from \"../../emoji\";\nimport \"./Emoji.css\";\n// 每页 20  5*4\n// 共 20 * 3 = 60 (实际是 54)\n\n// class Emoji\n\nclass Emoji extends React.Component {\n  next() {\n    if (this.carousel) {\n      this.carousel.next();\n    }\n  }\n\n  prev() {\n    if (this.carousel) {\n      this.carousel.prev();\n    }\n  }\n\n  render() {\n    const { onClick, emojiList } = this.props;\n    const content = [];\n    // let curPage = [];\n    // for (let i = 0; i < 115; i++) {\n    //   if (curPage.length < 30) {\n    //     curPage.push(emoji[i]);\n    //   } else {\n    //     content.push(curPage);\n    //     curPage = [];\n    //   }\n    // }\n    // if (curPage.length > 0) {\n    //   content.push(curPage);\n    // }\n    for (let i = 0; i < emojiList.length; i += 30) {\n      content.push(emojiList.slice(i, i + 30));\n    }\n\n    return (\n      <Carousel\n        ref={node => {\n          this.carousel = node;\n        }}\n      >\n        {content.map((page, index) => (\n          <div key={index} className=\"emoji\">\n            {page.map((item, index) => (\n              <div className=\"item\" key={item.id}>\n                <span className=\"helper\" />\n                <img\n                  src={item.url}\n                  alt={item.name}\n                  style={{ display: \"inline-block\" }}\n                  onClick={() => onClick(item.name)}\n                />\n              </div>\n            ))}\n          </div>\n        ))}\n      </Carousel>\n    );\n  }\n}\n\nexport default Emoji;\n"]}
+{"version":3,"sources":["../../../src/components/Editor/Emoji.js"],"names":["Emoji","carousel","next","prev","props","onClick","emojiList","content","i","length","push","slice","node","map","page","index","item","id","url","name","display","width","React","Component"],"mappings":";;;;;;;;;;;;;;AAAA;;;;AAGA;;;;;;;;;AADA;;;AAEA;AACA;;AAEA;;IAEMA,K;;;;;;;;;;;2BACG;AACL,UAAI,KAAKC,QAAT,EAAmB;AACjB,aAAKA,QAAL,CAAcC,IAAd;AACD;AACF;;;2BAEM;AACL,UAAI,KAAKD,QAAT,EAAmB;AACjB,aAAKA,QAAL,CAAcE,IAAd;AACD;AACF;;;6BAEQ;AAAA;;AAAA,mBACwB,KAAKC,KAD7B;AAAA,UACCC,QADD,UACCA,OADD;AAAA,UACUC,SADV,UACUA,SADV;;AAEP,UAAMC,UAAU,EAAhB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAK,IAAIC,IAAI,CAAb,EAAgBA,IAAIF,UAAUG,MAA9B,EAAsCD,KAAK,EAA3C,EAA+C;AAC7CD,gBAAQG,IAAR,CAAaJ,UAAUK,KAAV,CAAgBH,CAAhB,EAAmBA,IAAI,EAAvB,CAAb;AACD;;AAED,aACE;AAAA;AAAA;AACE,eAAK,mBAAQ;AACX,mBAAKP,QAAL,GAAgBW,IAAhB;AACD;AAHH;AAKGL,gBAAQM,GAAR,CAAY,UAACC,IAAD,EAAOC,KAAP;AAAA,iBACX;AAAA;AAAA,cAAK,KAAKA,KAAV,EAAiB,WAAU,OAA3B;AACGD,iBAAKD,GAAL,CAAS,UAACG,IAAD,EAAOD,KAAP;AAAA,qBACR;AAAA;AAAA,kBAAK,WAAU,MAAf,EAAsB,KAAKC,KAAKC,EAAhC;AAEE;AACE,uBAAKD,KAAKE,GADZ;AAEE,uBAAKF,KAAKG,IAFZ;AAGE,yBAAO,EAAEC,SAAS,cAAX,EAA2BC,OAAO,MAAlC,EAHT;AAIE,2BAAS;AAAA,2BAAMhB,SAAQW,KAAKG,IAAb,CAAN;AAAA;AAJX;AAFF,eADQ;AAAA,aAAT;AADH,WADW;AAAA,SAAZ;AALH,OADF;AAuBD;;;;EAvDiBG,gBAAMC,S;;kBA0DXvB,K","file":"Emoji.js","sourcesContent":["import React from \"react\";\nimport { Carousel } from \"antd\";\n// import emoji, { prefixUrl } from \"../../emoji\";\nimport \"./Emoji.css\";\n// 每页 20  5*4\n// 共 20 * 3 = 60 (实际是 54)\n\n// class Emoji\n\nclass Emoji extends React.Component {\n  next() {\n    if (this.carousel) {\n      this.carousel.next();\n    }\n  }\n\n  prev() {\n    if (this.carousel) {\n      this.carousel.prev();\n    }\n  }\n\n  render() {\n    const { onClick, emojiList } = this.props;\n    const content = [];\n    // let curPage = [];\n    // for (let i = 0; i < 115; i++) {\n    //   if (curPage.length < 30) {\n    //     curPage.push(emoji[i]);\n    //   } else {\n    //     content.push(curPage);\n    //     curPage = [];\n    //   }\n    // }\n    // if (curPage.length > 0) {\n    //   content.push(curPage);\n    // }\n    for (let i = 0; i < emojiList.length; i += 30) {\n      content.push(emojiList.slice(i, i + 30));\n    }\n\n    return (\n      <Carousel\n        ref={node => {\n          this.carousel = node;\n        }}\n      >\n        {content.map((page, index) => (\n          <div key={index} className=\"emoji\">\n            {page.map((item, index) => (\n              <div className=\"item\" key={item.id}>\n                {/* <span className=\"helper\" /> */}\n                <img\n                  src={item.url}\n                  alt={item.name}\n                  style={{ display: \"inline-block\", width: \"28px\" }}\n                  onClick={() => onClick(item.name)}\n                />\n              </div>\n            ))}\n          </div>\n        ))}\n      </Carousel>\n    );\n  }\n}\n\nexport default Emoji;\n"]}

lib/components/Editor/index.css

@@ -101,3 +101,32 @@
 .clearfix {
   clear: both;
 }
+
+.comment-unlogin-tip {
+  padding: 56px 0 24px 0;
+  text-align: center;
+  font-size: 16px;
+  color: #393939;
+}
+
+.comment-unlogin-button {
+  display: flex;
+  justify-content: center;
+}
+
+.comment-unlogin-button button {
+  width: 112px;
+  height: 36px;
+}
+
+@media (max-width: 575px) {
+  .comment-unlogin-tip {
+    padding: 36px 0 16px 0;
+    font-size: 14px;
+  }
+
+  .comment-unlogin-button button {
+    width: 82px;
+    height: 28px;
+  }
+}

lib/components/Editor/index.js

@@ -416,7 +416,8 @@ var Editor = function (_React$Component) {
           emojiToolIcon = _props2.emojiToolIcon,
           imageToolIcon = _props2.imageToolIcon,
           maxLength = _props2.maxLength,
-          autoFocus = _props2.autoFocus;
+          autoFocus = _props2.autoFocus,
+          app = _props2.app;
 
       var placeholder = this.props.placeholder || _reactIntlUniversal2.default.get("editor.placeholder");
       var btnSubmitText = this.props.btnSubmitText || _reactIntlUniversal2.default.get("editor.SubmitBtn");
@@ -424,146 +425,173 @@ var Editor = function (_React$Component) {
       var disabledSubmit = this.checkDisabledSubmit();
       var inputValue = value || this.state.value;
       var uploadFileList = fileList || this.state.fileList;
+      var isLogin = app.currentUser && app.currentUser.user_id > 0;
       return _react2.default.createElement(
         "div",
         { className: "comment-editor-container", onPaste: this.handlePaste },
-        _react2.default.createElement("div", {
-          className: (0, _classnames2.default)({
-            "comment-editor-toolbar": true,
-            "comment-editor-toolbar-error": inputValue.length > maxLength
-          })
-        }),
-        _react2.default.createElement(
-          "div",
-          { className: "comment-editor" },
-          _react2.default.createElement(TextArea, {
-            value: inputValue,
-            onChange: function onChange(e) {
-              return _this4.handleChange(e.target.value);
-            },
-            rows: rows,
-            placeholder: placeholder,
-            autoFocus: autoFocus
+        isLogin ? _react2.default.createElement(
+          _react.Fragment,
+          null,
+          _react2.default.createElement("div", {
+            className: (0, _classnames2.default)({
+              "comment-editor-toolbar": true,
+              "comment-editor-toolbar-error": inputValue.length > maxLength
+            })
           }),
           _react2.default.createElement(
             "div",
-            { className: "comment-toolbar" },
+            { className: "comment-editor" },
+            _react2.default.createElement(TextArea, {
+              value: inputValue,
+              onChange: function onChange(e) {
+                return _this4.handleChange(e.target.value);
+              },
+              rows: rows,
+              placeholder: placeholder,
+              autoFocus: autoFocus
+            }),
             _react2.default.createElement(
               "div",
-              { className: "comment-toolbar-left" },
-              showEmoji && _react2.default.createElement(
-                _popover2.default,
-                {
-                  trigger: "click",
-                  placement: emojiPopoverPlacement,
-                  autoAdjustOverflow: false,
-                  overlayStyle: { zIndex: 9999 },
-                  content: _react2.default.createElement(
-                    "div",
-                    {
-                      style: { width: 240, height: 205 },
-                      onWheel: this.handleEmojiScroll
-                    },
-                    _react2.default.createElement(_Emoji2.default, {
-                      onClick: this.handleClickEmoji,
-                      ref: function ref(node) {
-                        _this4.emoji = node;
+              { className: "comment-toolbar" },
+              _react2.default.createElement(
+                "div",
+                { className: "comment-toolbar-left" },
+                showEmoji && _react2.default.createElement(
+                  _popover2.default,
+                  {
+                    trigger: "click",
+                    placement: emojiPopoverPlacement,
+                    autoAdjustOverflow: false,
+                    overlayStyle: { zIndex: 9999 },
+                    content: _react2.default.createElement(
+                      "div",
+                      {
+                        style: { width: 240, height: 205 },
+                        onWheel: this.handleEmojiScroll
                       },
-                      emojiList: this.props.app.emojiList
-                    })
-                  ),
-                  overlayClassName: "comment-emoji-popover"
-                },
-                emojiToolIcon || _react2.default.createElement(_icon2.default, { type: "smile-o", className: "comment-toolbar-icon" })
-              ),
-              showUpload ? _react2.default.createElement(
-                _popover2.default,
-                {
-                  trigger: "click"
-                  // TODO: 针对非 react.js，直接使用 click 事件来控制展开或关闭
-                  , visible: this.state.uploadVisible,
-                  placement: uploadPopoverPlacement,
-                  overlayClassName: uploadOverlayClassName,
-                  autoAdjustOverflow: false,
-                  overlayStyle: { zIndex: 9999 },
-                  onVisibleChange: function onVisibleChange(visible) {
-                    _this4.setState({
-                      uploadVisible: visible
-                    });
+                      _react2.default.createElement(_Emoji2.default, {
+                        onClick: this.handleClickEmoji,
+                        ref: function ref(node) {
+                          _this4.emoji = node;
+                        },
+                        emojiList: this.props.app.emojiList
+                      })
+                    ),
+                    overlayClassName: "comment-emoji-popover"
                   },
-                  content: _react2.default.createElement(
-                    "div",
-                    {
-                      style: {
-                        width: 336, // 一行显示3张
-                        minHeight: 100,
-                        margin: "0 auto"
-                      }
+                  emojiToolIcon || _react2.default.createElement(_icon2.default, { type: "smile-o", className: "comment-toolbar-icon" })
+                ),
+                showUpload ? _react2.default.createElement(
+                  _popover2.default,
+                  {
+                    trigger: "click"
+                    // TODO: 针对非 react.js，直接使用 click 事件来控制展开或关闭
+                    , visible: this.state.uploadVisible,
+                    placement: uploadPopoverPlacement,
+                    overlayClassName: uploadOverlayClassName,
+                    autoAdjustOverflow: false,
+                    overlayStyle: { zIndex: 9999 },
+                    onVisibleChange: function onVisibleChange(visible) {
+                      _this4.setState({
+                        uploadVisible: visible
+                      });
                     },
-                    _react2.default.createElement(_Upload2.default, {
-                      onRef: function onRef(node) {
-                        return _this4.uploadRef = node;
+                    content: _react2.default.createElement(
+                      "div",
+                      {
+                        style: {
+                          width: 336, // 一行显示3张
+                          minHeight: 100,
+                          margin: "0 auto"
+                        }
                       },
-                      multiple: multiple,
-                      onChangeFileList: this.handleChangeFileList,
-                      onUpload: this.handleUpload,
-                      maxUpload: maxUpload,
-                      fileList: uploadFileList,
-                      showError: this.props.showError,
-                      onError: this.props.onError
-                    }),
-                    _react2.default.createElement("div", { className: "clearfix" })
-                  ),
-                  title: _react2.default.createElement(
-                    "div",
-                    { style: { margin: "5px auto" } },
-                    _react2.default.createElement(
-                      "span",
-                      null,
-                      _reactIntlUniversal2.default.get("editor.uploadTip"),
-                      maxUpload >= 2 ? _react2.default.createElement(
+                      _react2.default.createElement(_Upload2.default, {
+                        onRef: function onRef(node) {
+                          return _this4.uploadRef = node;
+                        },
+                        multiple: multiple,
+                        onChangeFileList: this.handleChangeFileList,
+                        onUpload: this.handleUpload,
+                        maxUpload: maxUpload,
+                        fileList: uploadFileList,
+                        showError: this.props.showError,
+                        onError: this.props.onError
+                      }),
+                      _react2.default.createElement("div", { className: "clearfix" })
+                    ),
+                    title: _react2.default.createElement(
+                      "div",
+                      { style: { margin: "5px auto" } },
+                      _react2.default.createElement(
                         "span",
-                        { style: { color: "#666", fontWeight: 400 } },
-                        _reactIntlUniversal2.default.get("editor.uploadCount", {
-                          count: maxUpload - uploadFileList.length
-                        })
-                      ) : null
+                        null,
+                        _reactIntlUniversal2.default.get("editor.uploadTip"),
+                        maxUpload >= 2 ? _react2.default.createElement(
+                          "span",
+                          { style: { color: "#666", fontWeight: 400 } },
+                          _reactIntlUniversal2.default.get("editor.uploadCount", {
+                            count: maxUpload - uploadFileList.length
+                          })
+                        ) : null
+                      )
                     )
-                  )
-                },
-                imageToolIcon ? _react2.default.cloneElement(imageToolIcon, {
-                  onClick: function onClick() {
-                    return _this4.handleShowUpload(true);
-                  }
-                }) : _react2.default.createElement(_icon2.default, {
-                  type: "picture",
-                  className: "comment-toolbar-icon",
-                  style: { marginLeft: 20 },
-                  onClick: function onClick() {
-                    return _this4.handleShowUpload(true);
-                  }
-                })
-              ) : null
-            ),
-            _react2.default.createElement(
-              "div",
-              { className: "comment-toolbar-right" },
-              button ? _react2.default.cloneElement(button, {
-                onClick: button.props.onClick || handleSubmit
-              }) : _react2.default.createElement(
-                _button2.default,
-                {
-                  onClick: function onClick() {
-                    return _this4.handleSubmit();
                   },
-                  type: "primary",
-                  loading: btnLoading,
-                  disabled: disabledSubmit
-                },
-                btnSubmitText
+                  imageToolIcon ? _react2.default.cloneElement(imageToolIcon, {
+                    onClick: function onClick() {
+                      return _this4.handleShowUpload(true);
+                    }
+                  }) : _react2.default.createElement(_icon2.default, {
+                    type: "picture",
+                    className: "comment-toolbar-icon",
+                    style: { marginLeft: 20 },
+                    onClick: function onClick() {
+                      return _this4.handleShowUpload(true);
+                    }
+                  })
+                ) : null
+              ),
+              _react2.default.createElement(
+                "div",
+                { className: "comment-toolbar-right" },
+                button ? _react2.default.cloneElement(button, {
+                  onClick: button.props.onClick || handleSubmit
+                }) : _react2.default.createElement(
+                  _button2.default,
+                  {
+                    onClick: function onClick() {
+                      return _this4.handleSubmit();
+                    },
+                    type: "primary",
+                    loading: btnLoading,
+                    disabled: disabledSubmit
+                  },
+                  btnSubmitText
+                )
               )
             )
           )
+        ) : _react2.default.createElement(
+          _react.Fragment,
+          null,
+          _react2.default.createElement(
+            "div",
+            { className: "comment-unlogin-tip" },
+            _reactIntlUniversal2.default.get("comment.unlogin")
+          ),
+          _react2.default.createElement(
+            "div",
+            { className: "comment-unlogin-button" },
+            _react2.default.createElement(
+              _button2.default,
+              {
+                type: "primary",
+                onClick: function onClick() {
+                  window.location.href = app.LOGINLINK + "?f=" + window.location.href;
+                }
+              },
+              _reactIntlUniversal2.default.get("account.login")
+            )
+          )
         )
       );
     }

lib/helper.js

@@ -75,10 +75,9 @@ function renderContent(content, onClick) {
     }
     // 如果不存在对应的表情, 则返回原文
     // const emoji = emojiObejct[src];
-    console.log(src);
     var emoji = JSON.parse(sessionStorage.getItem("emojiMap"))[src];
     if (emoji) {
-      return "<img class=\"comment-emoji\" src=\"" + emoji + "\" alt=\"" + emoji.title + "\" />";
+      return "<img class=\"comment-emoji\" src=\"" + emoji + "\" alt=\"" + emoji.title + "\" style=\"width:28px\"/>";
     }
     return "[" + src + "]";
   }).replace(innerUrl, function (a, b) {

lib/index.js

@@ -148,6 +148,12 @@ if (process.env.NODE_ENV !== "production") {
         followers: 10,
         fans: 11,
         isFollowed: false
+      },
+      58297: {
+        nickname: "aaaaa",
+        followers: 10,
+        fans: 11,
+        isFollowed: false
       }
     },
     showHoverCard: true,
@@ -182,6 +188,9 @@ if (process.env.NODE_ENV !== "production") {
     onBeforeUpdateComment: function onBeforeUpdateComment() {
       console.log("onBeforeUpdateComment");
     },
+    sendMessage: function sendMessage(id) {
+      console.log("sendMessage", id);
+    },
     editorProps: {
       onCommentSuccess: function onCommentSuccess(data) {
         console.log(data);

lib/version.json

@@ -1,8 +1,8 @@
 {
     "name":       "comment",
-    "buildDate":  1564979699301,
+    "buildDate":  1565080180929,
     "version":    "1.0.4",
-    "numCommits": 179,
-    "hash":       "083abcb",
-    "dirty":      true
+    "numCommits": 181,
+    "hash":       "d2c0f01",
+    "dirty":      false
 }

src/App.js

@@ -647,6 +647,10 @@ App.defaultProps = {
   businessUserId: 0,
   API: "//api.links123.net/comment/v1",
   emojiAPI: "//api.links123.net/link/v1",
+  LOGINLINK:
+    process.env.RUN_MOD === "production"
+      ? "https://passport.links123.com/login"
+      : "http://test.links123.net:5050/login",
   showList: true,
   showEditor: true,
   showAlertComment: false,

src/components/CommentBox/index.js

@@ -85,6 +85,7 @@ class CommentBox extends Component {
               <ContentItem
                 commentId={commentId}
                 replyId={item.id}
+                user_id={item.user_id}
                 key={item.id}
                 content={item}
                 action="replyToReply" // 评论的回复

src/components/ContentItem/AvatarHoverCard.js

@@ -110,12 +110,14 @@ class AvatarHoverCard extends Component {
             )}
 
             {/* 发私信按钮，暂时隐藏 */}
-            {/* <div
-            className={styles.privateMessageBtn}
-            onClick={this.toggleShowModal}
-          >
-            发私信
-          </div> */}
+            <div
+              className={`privateMessageBtn ${
+                this.props.locale === "en-US" ? "enUs" : ""
+              }`}
+              onClick={() => this.props.sendMessage({ id: user_id })}
+            >
+              {intl.get("bilingually.im.send_msg")}
+            </div>
           </Row>
         )}
       </div>

src/components/ContentItem/AvatarHoverCard.less

@@ -80,6 +80,22 @@
   border: 1px solid rgba(113, 193, 53, 1);
 }
 
+.privateMessageBtn {
+  width: 77px;
+  height: 31px;
+  line-height: 31px;
+  background: rgba(113, 193, 53, 1);
+  border-radius: 4px;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  text-align: center;
+  cursor: pointer;
+  margin: 0 5px;
+}
+.privateMessageBtn.enUs {
+  width: 90px;
+}
 .modalContainer {
   background: #fff;
   padding: 20px;

src/components/Editor/Emoji.js

@@ -49,11 +49,11 @@ class Emoji extends React.Component {
           <div key={index} className="emoji">
             {page.map((item, index) => (
               <div className="item" key={item.id}>
-                <span className="helper" />
+                {/* <span className="helper" /> */}
                 <img
                   src={item.url}
                   alt={item.name}
-                  style={{ display: "inline-block" }}
+                  style={{ display: "inline-block", width: "28px" }}
                   onClick={() => onClick(item.name)}
                 />
               </div>

src/components/Editor/index.css

@@ -101,3 +101,32 @@
 .clearfix {
   clear: both;
 }
+
+.comment-unlogin-tip {
+  padding: 56px 0 24px 0;
+  text-align: center;
+  font-size: 16px;
+  color: #393939;
+}
+
+.comment-unlogin-button {
+  display: flex;
+  justify-content: center;
+}
+
+.comment-unlogin-button button {
+  width: 112px;
+  height: 36px;
+}
+
+@media (max-width: 575px) {
+  .comment-unlogin-tip {
+    padding: 36px 0 16px 0;
+    font-size: 14px;
+  }
+
+  .comment-unlogin-button button {
+    width: 82px;
+    height: 28px;
+  }
+}

src/components/Editor/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Fragment } from "react";
 import PropTypes from "prop-types";
 import { Icon, Button, Popover, Input, message } from "antd";
 import classnames from "classnames";
@@ -308,7 +308,8 @@ class Editor extends React.Component {
       emojiToolIcon,
       imageToolIcon,
       maxLength,
-      autoFocus
+      autoFocus,
+      app
     } = this.props;
     let placeholder = this.props.placeholder || intl.get("editor.placeholder");
     let btnSubmitText =
@@ -317,137 +318,158 @@ class Editor extends React.Component {
     const disabledSubmit = this.checkDisabledSubmit();
     const inputValue = value || this.state.value;
     const uploadFileList = fileList || this.state.fileList;
+    const isLogin = app.currentUser && app.currentUser.user_id > 0;
     return (
       <div className="comment-editor-container" onPaste={this.handlePaste}>
-        <div
-          className={classnames({
-            "comment-editor-toolbar": true,
-            "comment-editor-toolbar-error": inputValue.length > maxLength
-          })}
-        ></div>
-        <div className="comment-editor">
-          <TextArea
-            value={inputValue}
-            onChange={e => this.handleChange(e.target.value)}
-            rows={rows}
-            placeholder={placeholder}
-            autoFocus={autoFocus}
-          />
+        {isLogin ? (
+          <Fragment>
+            <div
+              className={classnames({
+                "comment-editor-toolbar": true,
+                "comment-editor-toolbar-error": inputValue.length > maxLength
+              })}
+            ></div>
+            <div className="comment-editor">
+              <TextArea
+                value={inputValue}
+                onChange={e => this.handleChange(e.target.value)}
+                rows={rows}
+                placeholder={placeholder}
+                autoFocus={autoFocus}
+              />
 
-          <div className="comment-toolbar">
-            <div className="comment-toolbar-left">
-              {showEmoji && (
-                <Popover
-                  trigger="click"
-                  placement={emojiPopoverPlacement}
-                  autoAdjustOverflow={false}
-                  overlayStyle={{ zIndex: 9999 }}
-                  content={
-                    <div
-                      style={{ width: 240, height: 205 }}
-                      onWheel={this.handleEmojiScroll}
+              <div className="comment-toolbar">
+                <div className="comment-toolbar-left">
+                  {showEmoji && (
+                    <Popover
+                      trigger="click"
+                      placement={emojiPopoverPlacement}
+                      autoAdjustOverflow={false}
+                      overlayStyle={{ zIndex: 9999 }}
+                      content={
+                        <div
+                          style={{ width: 240, height: 205 }}
+                          onWheel={this.handleEmojiScroll}
+                        >
+                          <Emoji
+                            onClick={this.handleClickEmoji}
+                            ref={node => {
+                              this.emoji = node;
+                            }}
+                            emojiList={this.props.app.emojiList}
+                          />
+                        </div>
+                      }
+                      overlayClassName="comment-emoji-popover"
                     >
-                      <Emoji
-                        onClick={this.handleClickEmoji}
-                        ref={node => {
-                          this.emoji = node;
-                        }}
-                        emojiList={this.props.app.emojiList}
-                      />
-                    </div>
-                  }
-                  overlayClassName="comment-emoji-popover"
-                >
-                  {emojiToolIcon || (
-                    <Icon type="smile-o" className="comment-toolbar-icon" />
+                      {emojiToolIcon || (
+                        <Icon type="smile-o" className="comment-toolbar-icon" />
+                      )}
+                    </Popover>
                   )}
-                </Popover>
-              )}
 
-              {showUpload ? (
-                <Popover
-                  trigger="click"
-                  // TODO: 针对非 react.js，直接使用 click 事件来控制展开或关闭
-                  visible={this.state.uploadVisible}
-                  placement={uploadPopoverPlacement}
-                  overlayClassName={uploadOverlayClassName}
-                  autoAdjustOverflow={false}
-                  overlayStyle={{ zIndex: 9999 }}
-                  onVisibleChange={visible => {
-                    this.setState({
-                      uploadVisible: visible
-                    });
-                  }}
-                  content={
-                    <div
-                      style={{
-                        width: 336, // 一行显示3张
-                        minHeight: 100,
-                        margin: "0 auto"
+                  {showUpload ? (
+                    <Popover
+                      trigger="click"
+                      // TODO: 针对非 react.js，直接使用 click 事件来控制展开或关闭
+                      visible={this.state.uploadVisible}
+                      placement={uploadPopoverPlacement}
+                      overlayClassName={uploadOverlayClassName}
+                      autoAdjustOverflow={false}
+                      overlayStyle={{ zIndex: 9999 }}
+                      onVisibleChange={visible => {
+                        this.setState({
+                          uploadVisible: visible
+                        });
                       }}
-                    >
-                      <Upload
-                        onRef={node => (this.uploadRef = node)}
-                        multiple={multiple}
-                        onChangeFileList={this.handleChangeFileList}
-                        onUpload={this.handleUpload}
-                        maxUpload={maxUpload}
-                        fileList={uploadFileList}
-                        showError={this.props.showError}
-                        onError={this.props.onError}
-                      />
-                      <div className="clearfix" />
-                    </div>
-                  }
-                  title={
-                    <div style={{ margin: "5px auto" }}>
-                      <span>
-                        {intl.get("editor.uploadTip")}
-                        {maxUpload >= 2 ? (
-                          <span style={{ color: "#666", fontWeight: 400 }}>
-                            {intl.get("editor.uploadCount", {
-                              count: maxUpload - uploadFileList.length
-                            })}
+                      content={
+                        <div
+                          style={{
+                            width: 336, // 一行显示3张
+                            minHeight: 100,
+                            margin: "0 auto"
+                          }}
+                        >
+                          <Upload
+                            onRef={node => (this.uploadRef = node)}
+                            multiple={multiple}
+                            onChangeFileList={this.handleChangeFileList}
+                            onUpload={this.handleUpload}
+                            maxUpload={maxUpload}
+                            fileList={uploadFileList}
+                            showError={this.props.showError}
+                            onError={this.props.onError}
+                          />
+                          <div className="clearfix" />
+                        </div>
+                      }
+                      title={
+                        <div style={{ margin: "5px auto" }}>
+                          <span>
+                            {intl.get("editor.uploadTip")}
+                            {maxUpload >= 2 ? (
+                              <span style={{ color: "#666", fontWeight: 400 }}>
+                                {intl.get("editor.uploadCount", {
+                                  count: maxUpload - uploadFileList.length
+                                })}
+                              </span>
+                            ) : null}
                           </span>
-                        ) : null}
-                      </span>
-                    </div>
-                  }
-                >
-                  {imageToolIcon ? (
-                    React.cloneElement(imageToolIcon, {
-                      onClick: () => this.handleShowUpload(true)
+                        </div>
+                      }
+                    >
+                      {imageToolIcon ? (
+                        React.cloneElement(imageToolIcon, {
+                          onClick: () => this.handleShowUpload(true)
+                        })
+                      ) : (
+                        <Icon
+                          type="picture"
+                          className="comment-toolbar-icon"
+                          style={{ marginLeft: 20 }}
+                          onClick={() => this.handleShowUpload(true)}
+                        />
+                      )}
+                    </Popover>
+                  ) : null}
+                </div>
+
+                <div className="comment-toolbar-right">
+                  {button ? (
+                    React.cloneElement(button, {
+                      onClick: button.props.onClick || handleSubmit
                     })
                   ) : (
-                    <Icon
-                      type="picture"
-                      className="comment-toolbar-icon"
-                      style={{ marginLeft: 20 }}
-                      onClick={() => this.handleShowUpload(true)}
-                    />
+                    <Button
+                      onClick={() => this.handleSubmit()}
+                      type="primary"
+                      loading={btnLoading}
+                      disabled={disabledSubmit}
+                    >
+                      {btnSubmitText}
+                    </Button>
                   )}
-                </Popover>
-              ) : null}
+                </div>
+              </div>
             </div>
-
-            <div className="comment-toolbar-right">
-              {button ? (
-                React.cloneElement(button, {
-                  onClick: button.props.onClick || handleSubmit
-                })
-              ) : (
-                <Button
-                  onClick={() => this.handleSubmit()}
-                  type="primary"
-                  loading={btnLoading}
-                  disabled={disabledSubmit}
-                >
-                  {btnSubmitText}
-                </Button>
-              )}
+          </Fragment>
+        ) : (
+          <Fragment>
+            <div className="comment-unlogin-tip">
+              {intl.get("comment.unlogin")}
+            </div>
+            <div className="comment-unlogin-button">
+              <Button
+                type="primary"
+                onClick={() => {
+                  window.location.href = `${app.LOGINLINK}?f=${window.location.href}`;
+                }}
+              >
+                {intl.get("account.login")}
+              </Button>
             </div>
-          </div>
-        </div>
+          </Fragment>
+        )}
       </div>
     );
   }

src/helper.js

@@ -72,10 +72,9 @@ export function renderContent(content, onClick) {
       }
       // 如果不存在对应的表情, 则返回原文
       // const emoji = emojiObejct[src];
-      console.log(src);
       const emoji = JSON.parse(sessionStorage.getItem("emojiMap"))[src];
       if (emoji) {
-        return `<img class="comment-emoji" src="${emoji}" alt="${emoji.title}" />`;
+        return `<img class="comment-emoji" src="${emoji}" alt="${emoji.title}" style="width:28px"/>`;
       }
       return `[${src}]`;
     })

src/index.js

@@ -113,6 +113,12 @@ if (process.env.NODE_ENV !== "production") {
         followers: 10,
         fans: 11,
         isFollowed: false
+      },
+      58297: {
+        nickname: "aaaaa",
+        followers: 10,
+        fans: 11,
+        isFollowed: false
       }
     },
     showHoverCard: true,
@@ -147,6 +153,9 @@ if (process.env.NODE_ENV !== "production") {
     onBeforeUpdateComment: () => {
       console.log("onBeforeUpdateComment");
     },
+    sendMessage: id => {
+      console.log("sendMessage", id);
+    },
     editorProps: {
       onCommentSuccess: data => {
         console.log(data);