add:头像添加hover和点击效果

.babelrc

@@ -2,6 +2,9 @@
   "presets": ["env", "react"],
   "plugins": [
     "transform-object-rest-spread",
-    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
+    [
+      "import",
+      { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }
+    ]
   ]
-}
+}

lib/components/CommentBox/index.js

@@ -114,6 +114,7 @@ var CommentBox = function (_Component) {
                 replyId: item.id,
                 key: item.id,
                 content: item,
+                user_id: item.user_id,
                 action: "replyToReply" // 回复的回复
               }), _react2.default.createElement(
                 "div",
@@ -155,7 +156,9 @@ var CommentBox = function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var content = this.props.content;
+      var _props = this.props,
+          content = _props.content,
+          user_id = _props.user_id;
       var showReply = this.state.showReply;
 
       return _react2.default.createElement(
@@ -166,6 +169,7 @@ var CommentBox = function (_Component) {
           onShowReply: this.handleToggleReply,
           showReply: showReply,
           commentId: content.id,
+          user_id: user_id,
           action: "reply" // 评论的回复
         }),
         this.renderReplies(content.replies, content.reply_count, content.isNoMoreReply)

lib/components/CommentList/index.js

@@ -144,7 +144,12 @@ var CommentList = function (_Component) {
             _reactIntlUniversal2.default.get("comment.totalComment", { total: total })
           ),
           list.map(function (item) {
-            return _react2.default.createElement(_CommentBox2.default, { content: item, key: item.id, commentId: item.id });
+            return _react2.default.createElement(_CommentBox2.default, {
+              content: item,
+              user_id: item.user_id,
+              key: item.id,
+              commentId: item.id
+            });
           }),
           this.renderPagination()
         )

lib/components/CommentList/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CommentList/index.js"],"names":["CommentList","props","state","app","sGetComment","page","list","total","pageType","limit","isNoMoreComment","onPageChange","onGetMoreBtnClick","length","intl","get","p","loading","spinning","Boolean","sCommentFavor","sReplyFavor","map","item","id","renderPagination","Component","propTypes"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;AAEA;;;;AACA;;;;AACA;;;;AACA;;;;;;;;;;IAEMA,W;;;AACJ,uBAAYC,KAAZ,EAAmB;AAAA;;AAAA,0HACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa,EAAb;AAFiB;AAGlB;;;;yCAEoB;AACnB,WAAKD,KAAL,CAAWE,GAAX,CAAeC,WAAf,CAA2B,EAAEC,MAAM,KAAKJ,KAAL,CAAWE,GAAX,CAAeE,IAAvB,EAA3B;AACD;;;uCAEkB;AAAA,uBAWb,KAAKJ,KAAL,CAAWE,GAXE;AAAA,UAEfG,IAFe,cAEfA,IAFe;AAAA,UAGfC,KAHe,cAGfA,KAHe;AAAA,UAIfF,IAJe,cAIfA,IAJe;AAAA,UAKfG,QALe,cAKfA,QALe;AAAA,UAMfC,KANe,cAMfA,KANe;AAAA,UAOfC,eAPe,cAOfA,eAPe;AAAA,UAQfN,WARe,cAQfA,WARe;AAAA,UASfO,YATe,cASfA,YATe;AAAA,UAUfC,iBAVe,cAUfA,iBAVe;;AAYjB,UAAIJ,aAAa,OAAjB,EAA0B;AACxB;AACA,eACE;AAAA;AAAA,YAAK,WAAU,wBAAf,EAAwC,SAASI,iBAAjD;AACE;AAAA;AAAA;AAAA;AAAA;AADF,SADF;AAKD,OAPD,MAOO,IAAIJ,aAAa,MAAjB,EAAyB;AAC9B,YAAI,CAACE,eAAD,IAAoBJ,KAAKO,MAAL,KAAgBN,KAAxC,EAA+C;AAC7C,iBACE;AAAA;AAAA;AACE,yBAAU,wBADZ;AAEE,uBAAS,mBAAM;AACbH,4BAAY,EAAEC,MAAMA,OAAO,CAAf,EAAZ;AACAM,6BAAaN,OAAO,CAApB;AACD;AALH;AAOE;AAAA;AAAA;AAAOS,2CAAKC,GAAL,CAAS,qBAAT;AAAP;AAPF,WADF;AAWD,SAZD,MAYO;AACL,iBAAO,IAAP;AACD;AACF,OAhBM,MAgBA,IAAIP,aAAa,YAAjB,EAA+B;AACpC,eACE;AAAA;AAAA,YAAK,WAAU,yBAAf;AACE;AACE,sBAAUC,KADZ;AAEE,qBAASJ,IAFX;AAGE,mBAAOE,KAHT;AAIE,sBAAU,qBAAK;AACbH,0BAAY,EAAEC,MAAMW,CAAR,EAAZ;AACAL,2BAAaK,CAAb;AACD;AAPH;AADF,SADF;AAaD;AACF;;;6BAEQ;AAAA,wBAC0B,KAAKf,KAAL,CAAWE,GADrC;AAAA,UACCG,IADD,eACCA,IADD;AAAA,UACOC,KADP,eACOA,KADP;AAAA,UACcU,OADd,eACcA,OADd;;;AAGP,UAAMC,WAAWC,QACfF,QAAQb,WAAR,IAAuBa,QAAQG,aAA/B,IAAgDH,QAAQI,WADzC,CAAjB;AAGA,aACE;AAAA;AAAA;AACE;AAAA;AAAA,YAAM,UAAUH,QAAhB;AAEE;AAAA;AAAA;AAAMJ,yCAAKC,GAAL,CAAS,sBAAT,EAAiC,EAAER,YAAF,EAAjC;AAAN,WAFF;AAGGD,eAAKgB,GAAL,CAAS;AAAA,mBACR,8BAAC,oBAAD,IAAY,SAASC,IAArB,EAA2B,KAAKA,KAAKC,EAArC,EAAyC,WAAWD,KAAKC,EAAzD,GADQ;AAAA,WAAT,CAHH;AAMG,eAAKC,gBAAL;AANH;AADF,OADF;AAYD;;;;EAhFuBC,gB;;AAmF1B1B,YAAY2B,SAAZ,GAAwB,EAAxB;;kBAEe,uBAAQ3B,WAAR,C","file":"index.js","sourcesContent":["import React, { Component } from \"react\";\nimport { Spin, Pagination } from \"antd\";\nimport intl from \"react-intl-universal\";\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({ page: this.props.app.page });\n  }\n\n  renderPagination() {\n    const {\n      list,\n      total,\n      page,\n      pageType,\n      limit,\n      isNoMoreComment,\n      sGetComment,\n      onPageChange,\n      onGetMoreBtnClick\n    } = this.props.app;\n    if (pageType === \"slice\") {\n      // 截断多余评论，通过点击查看更多跳转\n      return (\n        <div className=\"comment-list-show-more\" onClick={onGetMoreBtnClick}>\n          <span>查看更多</span>\n        </div>\n      );\n    } else if (pageType === \"more\") {\n      if (!isNoMoreComment && list.length !== total) {\n        return (\n          <div\n            className=\"comment-list-show-more\"\n            onClick={() => {\n              sGetComment({ page: page + 1 });\n              onPageChange(page + 1);\n            }}\n          >\n            <span>{intl.get(\"comment.moreComment\")}</span>\n          </div>\n        );\n      } else {\n        return null;\n      }\n    } else if (pageType === \"pagination\") {\n      return (\n        <div className=\"comment-list-pagination\">\n          <Pagination\n            pageSize={limit}\n            current={page}\n            total={total}\n            onChange={p => {\n              sGetComment({ page: p });\n              onPageChange(p);\n            }}\n          />\n        </div>\n      );\n    }\n  }\n\n  render() {\n    const { list, total, loading } = 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          <div>{intl.get(\"comment.totalComment\", { total })}</div>\n          {list.map(item => (\n            <CommentBox content={item} key={item.id} commentId={item.id} />\n          ))}\n          {this.renderPagination()}\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","page","list","total","pageType","limit","isNoMoreComment","onPageChange","onGetMoreBtnClick","length","intl","get","p","loading","spinning","Boolean","sCommentFavor","sReplyFavor","map","item","user_id","id","renderPagination","Component","propTypes"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;AAEA;;;;AACA;;;;AACA;;;;AACA;;;;;;;;;;IAEMA,W;;;AACJ,uBAAYC,KAAZ,EAAmB;AAAA;;AAAA,0HACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa,EAAb;AAFiB;AAGlB;;;;yCAEoB;AACnB,WAAKD,KAAL,CAAWE,GAAX,CAAeC,WAAf,CAA2B,EAAEC,MAAM,KAAKJ,KAAL,CAAWE,GAAX,CAAeE,IAAvB,EAA3B;AACD;;;uCAEkB;AAAA,uBAWb,KAAKJ,KAAL,CAAWE,GAXE;AAAA,UAEfG,IAFe,cAEfA,IAFe;AAAA,UAGfC,KAHe,cAGfA,KAHe;AAAA,UAIfF,IAJe,cAIfA,IAJe;AAAA,UAKfG,QALe,cAKfA,QALe;AAAA,UAMfC,KANe,cAMfA,KANe;AAAA,UAOfC,eAPe,cAOfA,eAPe;AAAA,UAQfN,WARe,cAQfA,WARe;AAAA,UASfO,YATe,cASfA,YATe;AAAA,UAUfC,iBAVe,cAUfA,iBAVe;;AAYjB,UAAIJ,aAAa,OAAjB,EAA0B;AACxB;AACA,eACE;AAAA;AAAA,YAAK,WAAU,wBAAf,EAAwC,SAASI,iBAAjD;AACE;AAAA;AAAA;AAAA;AAAA;AADF,SADF;AAKD,OAPD,MAOO,IAAIJ,aAAa,MAAjB,EAAyB;AAC9B,YAAI,CAACE,eAAD,IAAoBJ,KAAKO,MAAL,KAAgBN,KAAxC,EAA+C;AAC7C,iBACE;AAAA;AAAA;AACE,yBAAU,wBADZ;AAEE,uBAAS,mBAAM;AACbH,4BAAY,EAAEC,MAAMA,OAAO,CAAf,EAAZ;AACAM,6BAAaN,OAAO,CAApB;AACD;AALH;AAOE;AAAA;AAAA;AAAOS,2CAAKC,GAAL,CAAS,qBAAT;AAAP;AAPF,WADF;AAWD,SAZD,MAYO;AACL,iBAAO,IAAP;AACD;AACF,OAhBM,MAgBA,IAAIP,aAAa,YAAjB,EAA+B;AACpC,eACE;AAAA;AAAA,YAAK,WAAU,yBAAf;AACE;AACE,sBAAUC,KADZ;AAEE,qBAASJ,IAFX;AAGE,mBAAOE,KAHT;AAIE,sBAAU,qBAAK;AACbH,0BAAY,EAAEC,MAAMW,CAAR,EAAZ;AACAL,2BAAaK,CAAb;AACD;AAPH;AADF,SADF;AAaD;AACF;;;6BAEQ;AAAA,wBAC0B,KAAKf,KAAL,CAAWE,GADrC;AAAA,UACCG,IADD,eACCA,IADD;AAAA,UACOC,KADP,eACOA,KADP;AAAA,UACcU,OADd,eACcA,OADd;;;AAGP,UAAMC,WAAWC,QACfF,QAAQb,WAAR,IAAuBa,QAAQG,aAA/B,IAAgDH,QAAQI,WADzC,CAAjB;AAGA,aACE;AAAA;AAAA;AACE;AAAA;AAAA,YAAM,UAAUH,QAAhB;AAEE;AAAA;AAAA;AAAMJ,yCAAKC,GAAL,CAAS,sBAAT,EAAiC,EAAER,YAAF,EAAjC;AAAN,WAFF;AAGGD,eAAKgB,GAAL,CAAS;AAAA,mBACR,8BAAC,oBAAD;AACE,uBAASC,IADX;AAEE,uBAASA,KAAKC,OAFhB;AAGE,mBAAKD,KAAKE,EAHZ;AAIE,yBAAWF,KAAKE;AAJlB,cADQ;AAAA,WAAT,CAHH;AAWG,eAAKC,gBAAL;AAXH;AADF,OADF;AAiBD;;;;EArFuBC,gB;;AAwF1B3B,YAAY4B,SAAZ,GAAwB,EAAxB;;kBAEe,uBAAQ5B,WAAR,C","file":"index.js","sourcesContent":["import React, { Component } from \"react\";\nimport { Spin, Pagination } from \"antd\";\nimport intl from \"react-intl-universal\";\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({ page: this.props.app.page });\n  }\n\n  renderPagination() {\n    const {\n      list,\n      total,\n      page,\n      pageType,\n      limit,\n      isNoMoreComment,\n      sGetComment,\n      onPageChange,\n      onGetMoreBtnClick\n    } = this.props.app;\n    if (pageType === \"slice\") {\n      // 截断多余评论，通过点击查看更多跳转\n      return (\n        <div className=\"comment-list-show-more\" onClick={onGetMoreBtnClick}>\n          <span>查看更多</span>\n        </div>\n      );\n    } else if (pageType === \"more\") {\n      if (!isNoMoreComment && list.length !== total) {\n        return (\n          <div\n            className=\"comment-list-show-more\"\n            onClick={() => {\n              sGetComment({ page: page + 1 });\n              onPageChange(page + 1);\n            }}\n          >\n            <span>{intl.get(\"comment.moreComment\")}</span>\n          </div>\n        );\n      } else {\n        return null;\n      }\n    } else if (pageType === \"pagination\") {\n      return (\n        <div className=\"comment-list-pagination\">\n          <Pagination\n            pageSize={limit}\n            current={page}\n            total={total}\n            onChange={p => {\n              sGetComment({ page: p });\n              onPageChange(p);\n            }}\n          />\n        </div>\n      );\n    }\n  }\n\n  render() {\n    const { list, total, loading } = 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          <div>{intl.get(\"comment.totalComment\", { total })}</div>\n          {list.map(item => (\n            <CommentBox\n              content={item}\n              user_id={item.user_id}\n              key={item.id}\n              commentId={item.id}\n            />\n          ))}\n          {this.renderPagination()}\n        </Spin>\n      </div>\n    );\n  }\n}\n\nCommentList.propTypes = {};\n\nexport default Comment(CommentList);\n"]}

lib/components/ContentItem/AvatarHoverCard.js

@@ -0,0 +1,178 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _col = require("antd/es/col");
+
+var _col2 = _interopRequireDefault(_col);
+
+var _row = require("antd/es/row");
+
+var _row2 = _interopRequireDefault(_row);
+
+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/col/style/css");
+
+require("antd/es/row/style/css");
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactIntlUniversal = require("react-intl-universal");
+
+var _reactIntlUniversal2 = _interopRequireDefault(_reactIntlUniversal);
+
+require("./AvatarHoverCard.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var AvatarHoverCard = function (_Component) {
+  _inherits(AvatarHoverCard, _Component);
+
+  function AvatarHoverCard(props) {
+    _classCallCheck(this, AvatarHoverCard);
+
+    var _this = _possibleConstructorReturn(this, (AvatarHoverCard.__proto__ || Object.getPrototypeOf(AvatarHoverCard)).call(this, props));
+
+    _this.state = {
+      showModal: false
+    };
+    return _this;
+  }
+
+  _createClass(AvatarHoverCard, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.getUserInfo({
+        id: this.props.user_id
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props,
+          image = _props.image,
+          user_id = _props.user_id,
+          currentUser = _props.currentUser,
+          userAvaHoverData = _props.userAvaHoverData;
+
+      var followed = userAvaHoverData[user_id] && userAvaHoverData[user_id].isFollowed;
+
+      return _react2.default.createElement(
+        "div",
+        { className: "AvatarHoverCard", onClick: function onClick(e) {
+            return e.stopPropagation();
+          } },
+        _react2.default.createElement(
+          "div",
+          { onClick: this.props.userAvaClick },
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex", className: "rowUser" },
+            _react2.default.createElement("div", {
+              className: "avatar",
+              style: {
+                backgroundImage: "url(" + image + ")"
+              }
+            }),
+            _react2.default.createElement(
+              "div",
+              { className: "nickname" },
+              userAvaHoverData[user_id] && userAvaHoverData[user_id].nickname
+            )
+          )
+        ),
+        _react2.default.createElement("div", { className: "divider" }),
+        _react2.default.createElement(
+          _row2.default,
+          { type: "flex", className: "rowNum" },
+          _react2.default.createElement(
+            _col2.default,
+            { className: "colFans" },
+            _react2.default.createElement(
+              "div",
+              { className: "count" },
+              userAvaHoverData[user_id] && userAvaHoverData[user_id].fans
+            ),
+            _react2.default.createElement(
+              "div",
+              { className: "text" },
+              _reactIntlUniversal2.default.get("bilingually.fan", {
+                ext: userAvaHoverData[user_id] && userAvaHoverData[user_id].fans > 1 ? "s" : ""
+              })
+            )
+          ),
+          _react2.default.createElement(_col2.default, { className: "hdivider" }),
+          _react2.default.createElement(
+            _col2.default,
+            { className: "colFollow" },
+            _react2.default.createElement(
+              "div",
+              { className: "count" },
+              userAvaHoverData[user_id] && userAvaHoverData[user_id].followers
+            ),
+            _react2.default.createElement(
+              "div",
+              { className: "text" },
+              _reactIntlUniversal2.default.get("bilingually.follow", {
+                ext: userAvaHoverData[user_id] && userAvaHoverData[user_id].followers > 1 ? "s" : ""
+              })
+            )
+          )
+        ),
+        currentUser.user_id !== user_id && _react2.default.createElement(
+          _row2.default,
+          { type: "flex", className: "rowBtn" },
+          followed ? _react2.default.createElement(
+            "div",
+            {
+              className: "unFollowBtn",
+              onClick: function onClick(e) {
+                e.stopPropagation();
+                _this2.props.unFocus({
+                  id: user_id
+                }).then(function () {
+                  _this2.props.getUserInfo({
+                    id: user_id
+                  });
+                });
+              }
+            },
+            _reactIntlUniversal2.default.get("bilingually.cancel_follow")
+          ) : _react2.default.createElement(
+            "div",
+            {
+              className: "followBtn",
+              onClick: function onClick(e) {
+                e.stopPropagation();
+                _this2.props.focus({ id: user_id }).then(function () {
+                  _this2.props.getUserInfo({
+                    id: user_id
+                  });
+                });
+              }
+            },
+            _reactIntlUniversal2.default.get("bilingually.follow", { ext: "" })
+          )
+        )
+      );
+    }
+  }]);
+
+  return AvatarHoverCard;
+}(_react.Component);
+
+exports.default = AvatarHoverCard;
+//# sourceMappingURL=AvatarHoverCard.js.map

lib/components/ContentItem/AvatarHoverCard.less

@@ -0,0 +1,146 @@
+.AvatarHoverCard {
+  width: 260px;
+  padding: 14px 18px;
+}
+
+.rowUser {
+  align-items: center;
+}
+.avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 24px;
+  background-position: center;
+  background-size: cover;
+}
+.nickname {
+  font-size: 16px;
+  color: rgba(58, 58, 58, 1);
+  margin-left: 14px;
+}
+.divider {
+  height: 1px;
+  background: #e2e2e2;
+  margin: 12px 0;
+}
+.rowNum {
+  height: 45px;
+  align-items: center;
+}
+.colFans,
+.colFollow {
+  flex: 1;
+  text-align: center;
+  .count {
+    font-size: 17px;
+    font-weight: 500;
+    color: rgba(5, 18, 11, 1);
+  }
+  .text {
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(140, 140, 140, 1);
+  }
+}
+.hdivider {
+  width: 1px;
+  height: 25px;
+  background: #e2e2e2;
+}
+.rowBtn {
+  margin-top: 14px;
+  margin-bottom: 10px;
+  justify-content: space-around;
+}
+.followBtn,
+.unFollowBtn,
+.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;
+}
+
+.followBtn {
+  border: 1px solid rgba(113, 193, 53, 1);
+  color: rgba(113, 193, 53, 1);
+  background: #fff;
+}
+.unFollowBtn {
+  color: #fff;
+  background: rgba(113, 193, 53, 1);
+  border: 1px solid rgba(113, 193, 53, 1);
+}
+
+.modalContainer {
+  background: #fff;
+  padding: 20px;
+}
+
+.modalTitle {
+  color: #3a3a3a;
+  margin-left: 8px;
+  margin-bottom: 12px;
+  font-weight: 500;
+}
+
+.modalClose {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  font-size: 12px;
+}
+
+.nextComment {
+  width: 510px;
+  padding: 0;
+}
+.expressionBtnWrap,
+.pictureBtnWrap {
+  float: left;
+  width: 70px;
+  margin-top: 5px;
+  cursor: pointer;
+  .icon {
+    float: left;
+    color: #ffa405;
+    font-size: 18px !important;
+    margin: 0 !important;
+  }
+  .text {
+    float: left;
+    font-size: 12px;
+    color: #393939;
+    margin-left: 6px;
+  }
+}
+
+.btnGroup {
+  display: flex;
+}
+
+.cancelBtn,
+.submitBtn {
+  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;
+}
+.cancelBtn {
+  background: #e9e9e9;
+  color: #6d6d6d;
+  margin-right: 12px;
+}

lib/components/ContentItem/index.css

@@ -22,6 +22,7 @@
   border-radius: 20px;
   background-position: center;
   background-size: cover;
+  cursor: pointer;
 }
 .comment-item-content {
   margin: 10px 0;
@@ -87,6 +88,16 @@
   margin-right: 10px;
 }
 
+.avatar-hover-card-overlay {
+  padding-top: 0;
+}
+.avatar-hover-card-overlay .ant-popover-inner-content {
+  padding: 0;
+}
+.avatar-hover-card-overlay .ant-popover-arrow {
+  display: none;
+}
+
 @media screen and (max-width: 616px) and (min-width: 449px) {
   .comment-item-right {
     display: inline-block;

lib/components/ContentItem/index.js

@@ -16,6 +16,12 @@ var _tooltip = require("antd/es/tooltip");
 
 var _tooltip2 = _interopRequireDefault(_tooltip);
 
+var _popover = require("antd/es/popover");
+
+var _popover2 = _interopRequireDefault(_popover);
+
+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/popconfirm/style/css");
@@ -24,6 +30,8 @@ require("antd/es/icon/style/css");
 
 require("antd/es/tooltip/style/css");
 
+require("antd/es/popover/style/css");
+
 var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
@@ -46,6 +54,10 @@ var _reactIntlUniversal = require("react-intl-universal");
 
 var _reactIntlUniversal2 = _interopRequireDefault(_reactIntlUniversal);
 
+var _AvatarHoverCard = require("./AvatarHoverCard");
+
+var _AvatarHoverCard2 = _interopRequireDefault(_AvatarHoverCard);
+
 var _Comment = require("../../Comment");
 
 var _Comment2 = _interopRequireDefault(_Comment);
@@ -98,12 +110,14 @@ var CommentItem = function (_Component) {
     _this.state = {
       showInput: false,
       showPreviewer: false,
-      previewerIndex: 0
+      previewerIndex: 0,
+      popoverVisible: false
     };
     _this.handleToggleInput = _this.handleToggleInput.bind(_this);
     _this.renderTextWithReply = _this.renderTextWithReply.bind(_this);
     _this.showPreviewer = _this.showPreviewer.bind(_this);
     _this.hidePreviewer = _this.hidePreviewer.bind(_this);
+    _this.handleVisibleChange = _this.handleVisibleChange.bind(_this);
     return _this;
   }
 
@@ -127,6 +141,13 @@ var CommentItem = function (_Component) {
     value: function handleToggleInput() {
       this.setState({ showInput: !this.state.showInput });
     }
+  }, {
+    key: "handleVisibleChange",
+    value: function handleVisibleChange(visible) {
+      this.setState({
+        popoverVisible: visible
+      });
+    }
   }, {
     key: "renderTextWithReply",
     value: function renderTextWithReply(text, content) {
@@ -162,8 +183,12 @@ var CommentItem = function (_Component) {
           action = _props.action,
           showReply = _props.showReply,
           onShowReply = _props.onShowReply,
-          app = _props.app;
-      var locale = this.props.app.locale;
+          app = _props.app,
+          user_id = _props.user_id;
+      var _props$app = this.props.app,
+          locale = _props$app.locale,
+          userAvaClick = _props$app.userAvaClick,
+          showHoverCard = _props$app.showHoverCard;
       var showInput = this.state.showInput;
 
 
@@ -196,10 +221,36 @@ var CommentItem = function (_Component) {
         _react2.default.createElement(
           "div",
           { className: "comment-item-left" },
-          _react2.default.createElement("div", {
+          showHoverCard ? _react2.default.createElement(
+            _popover2.default,
+            {
+              content: _react2.default.createElement(_AvatarHoverCard2.default, _extends({}, this.props.app, {
+                user_id: user_id,
+                handleVisibleChange: this.handleVisibleChange,
+                image: content.user_avatar || _avatar2.default
+              }))
+              // placement={this.props.placement}
+              // trigger="click"
+              , visible: this.state.popoverVisible,
+              onVisibleChange: this.handleVisibleChange,
+              overlayClassName: "avatar-hover-card-overlay"
+            },
+            _react2.default.createElement("div", {
+              className: "comment-item-avatar",
+              style: {
+                backgroundImage: "url(" + (content.user_avatar || _avatar2.default) + ")"
+              },
+              onClick: function onClick() {
+                return userAvaClick(user_id);
+              }
+            })
+          ) : _react2.default.createElement("div", {
             className: "comment-item-avatar",
             style: {
               backgroundImage: "url(" + (content.user_avatar || _avatar2.default) + ")"
+            },
+            onClick: function onClick() {
+              userAvaClick(user_id);
             }
           })
         ),
@@ -211,7 +262,12 @@ var CommentItem = function (_Component) {
             null,
             _react2.default.createElement(
               "strong",
-              null,
+              {
+                onClick: function onClick() {
+                  return userAvaClick(user_id);
+                },
+                style: { cursor: "pointer" }
+              },
               content.user_name || _reactIntlUniversal2.default.get("comment.tourist")
             ),
             _react2.default.createElement(

lib/index.js

@@ -112,6 +112,49 @@ if (process.env.NODE_ENV !== "production") {
     businessId: "test",
     businessUserId: 4,
     userId: 71299,
+    currentUser: {
+      user_id: 71748
+    },
+    userAvaHoverData: {
+      71763: {
+        nickname: "aaa",
+        followers: 20,
+        fans: 2,
+        isFollowed: true
+      },
+      71748: {
+        nickname: "L0",
+        followers: 10,
+        fans: 11,
+        isFollowed: false
+      },
+      71299: {
+        nickname: "narro",
+        followers: 10,
+        fans: 11,
+        isFollowed: false
+      }
+    },
+    showHoverCard: true,
+    userAvaClick: function userAvaClick(id) {
+      console.log("userAvaClick", id);
+    },
+    getUserInfo: function getUserInfo(id) {
+      console.log("getinfo:", id);
+    },
+    focus: function focus(id) {
+      return new Promise(function (resolve, reject) {
+        console.log("focus:", id);
+        resolve();
+      });
+    },
+    unFocus: function unFocus(id) {
+      return new Promise(function (resolve, reject) {
+        console.log("unFocus:", id);
+        resolve();
+      });
+    },
+
     onCountChange: function onCountChange(c) {
       console.log(c);
     },

lib/version.json

@@ -1,8 +1,8 @@
 {
     "name":       "comment",
-    "buildDate":  1561545661645,
+    "buildDate":  1562073871881,
     "version":    "1.0.4",
-    "numCommits": 156,
-    "hash":       "b06e101",
+    "numCommits": 158,
+    "hash":       "1b15efb",
     "dirty":      true
 }

package.json

@@ -46,6 +46,7 @@
     "babel-plugin-import": "^1.8.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.7.0",
+    "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "husky": "^0.14.3",
     "lint-staged": "^7.2.0",

src/components/CommentBox/index.js

@@ -58,6 +58,7 @@ class CommentBox extends Component {
                   replyId={item.id}
                   key={item.id}
                   content={item}
+                  user_id={item.user_id}
                   action="replyToReply" // 回复的回复
                 />,
                 <div className="comment-more-box" key="show_more_button">
@@ -96,7 +97,7 @@ class CommentBox extends Component {
   }
 
   render() {
-    const { content } = this.props;
+    const { content, user_id } = this.props;
     const { showReply } = this.state;
     return (
       <div>
@@ -105,6 +106,7 @@ class CommentBox extends Component {
           onShowReply={this.handleToggleReply}
           showReply={showReply}
           commentId={content.id}
+          user_id={user_id}
           action="reply" // 评论的回复
         />
         {this.renderReplies(

src/components/CommentList/index.js

@@ -79,7 +79,12 @@ class CommentList extends Component {
           {/* <div>共 {total} 条评论</div> */}
           <div>{intl.get("comment.totalComment", { total })}</div>
           {list.map(item => (
-            <CommentBox content={item} key={item.id} commentId={item.id} />
+            <CommentBox
+              content={item}
+              user_id={item.user_id}
+              key={item.id}
+              commentId={item.id}
+            />
           ))}
           {this.renderPagination()}
         </Spin>

src/components/ContentItem/AvatarHoverCard.js

@@ -0,0 +1,124 @@
+import React, { Component } from "react";
+import { Row, Col } from "antd";
+import intl from "react-intl-universal";
+import "./AvatarHoverCard.less";
+
+class AvatarHoverCard extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: false
+    };
+  }
+
+  componentDidMount() {
+    this.props.getUserInfo({
+      id: this.props.user_id
+    });
+  }
+
+  render() {
+    const { image, user_id, currentUser, userAvaHoverData } = this.props;
+    const followed =
+      userAvaHoverData[user_id] && userAvaHoverData[user_id].isFollowed;
+
+    return (
+      <div className="AvatarHoverCard" onClick={e => e.stopPropagation()}>
+        {/* <Link to={`/bilingual/user/${user_id}`}> */}
+        <div onClick={this.props.userAvaClick}>
+          <Row type="flex" className="rowUser">
+            <div
+              className="avatar"
+              style={{
+                backgroundImage: `url(${image})`
+              }}
+            />
+            <div className="nickname">
+              {userAvaHoverData[user_id] && userAvaHoverData[user_id].nickname}
+            </div>
+          </Row>
+        </div>
+        {/* </Link> */}
+        <div className="divider" />
+        <Row type="flex" className="rowNum">
+          <Col className="colFans">
+            <div className="count">
+              {userAvaHoverData[user_id] && userAvaHoverData[user_id].fans}
+            </div>
+            <div className="text">
+              {intl.get("bilingually.fan", {
+                ext:
+                  userAvaHoverData[user_id] &&
+                  userAvaHoverData[user_id].fans > 1
+                    ? "s"
+                    : ""
+              })}
+            </div>
+          </Col>
+          <Col className="hdivider" />
+          <Col className="colFollow">
+            <div className="count">
+              {userAvaHoverData[user_id] && userAvaHoverData[user_id].followers}
+            </div>
+            <div className="text">
+              {intl.get("bilingually.follow", {
+                ext:
+                  userAvaHoverData[user_id] &&
+                  userAvaHoverData[user_id].followers > 1
+                    ? "s"
+                    : ""
+              })}
+            </div>
+          </Col>
+        </Row>
+        {currentUser.user_id !== user_id && (
+          <Row type="flex" className="rowBtn">
+            {followed ? (
+              <div
+                className="unFollowBtn"
+                onClick={e => {
+                  e.stopPropagation();
+                  this.props
+                    .unFocus({
+                      id: user_id
+                    })
+                    .then(() => {
+                      this.props.getUserInfo({
+                        id: user_id
+                      });
+                    });
+                }}
+              >
+                {intl.get("bilingually.cancel_follow")}
+              </div>
+            ) : (
+              <div
+                className="followBtn"
+                onClick={e => {
+                  e.stopPropagation();
+                  this.props.focus({ id: user_id }).then(() => {
+                    this.props.getUserInfo({
+                      id: user_id
+                    });
+                  });
+                }}
+              >
+                {intl.get("bilingually.follow", { ext: "" })}
+              </div>
+            )}
+
+            {/* 发私信按钮，暂时隐藏 */}
+            {/* <div
+            className={styles.privateMessageBtn}
+            onClick={this.toggleShowModal}
+          >
+            发私信
+          </div> */}
+          </Row>
+        )}
+      </div>
+    );
+  }
+}
+
+export default AvatarHoverCard;

src/components/ContentItem/AvatarHoverCard.less

@@ -0,0 +1,146 @@
+.AvatarHoverCard {
+  width: 260px;
+  padding: 14px 18px;
+}
+
+.rowUser {
+  align-items: center;
+}
+.avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 24px;
+  background-position: center;
+  background-size: cover;
+}
+.nickname {
+  font-size: 16px;
+  color: rgba(58, 58, 58, 1);
+  margin-left: 14px;
+}
+.divider {
+  height: 1px;
+  background: #e2e2e2;
+  margin: 12px 0;
+}
+.rowNum {
+  height: 45px;
+  align-items: center;
+}
+.colFans,
+.colFollow {
+  flex: 1;
+  text-align: center;
+  .count {
+    font-size: 17px;
+    font-weight: 500;
+    color: rgba(5, 18, 11, 1);
+  }
+  .text {
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(140, 140, 140, 1);
+  }
+}
+.hdivider {
+  width: 1px;
+  height: 25px;
+  background: #e2e2e2;
+}
+.rowBtn {
+  margin-top: 14px;
+  margin-bottom: 10px;
+  justify-content: space-around;
+}
+.followBtn,
+.unFollowBtn,
+.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;
+}
+
+.followBtn {
+  border: 1px solid rgba(113, 193, 53, 1);
+  color: rgba(113, 193, 53, 1);
+  background: #fff;
+}
+.unFollowBtn {
+  color: #fff;
+  background: rgba(113, 193, 53, 1);
+  border: 1px solid rgba(113, 193, 53, 1);
+}
+
+.modalContainer {
+  background: #fff;
+  padding: 20px;
+}
+
+.modalTitle {
+  color: #3a3a3a;
+  margin-left: 8px;
+  margin-bottom: 12px;
+  font-weight: 500;
+}
+
+.modalClose {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  font-size: 12px;
+}
+
+.nextComment {
+  width: 510px;
+  padding: 0;
+}
+.expressionBtnWrap,
+.pictureBtnWrap {
+  float: left;
+  width: 70px;
+  margin-top: 5px;
+  cursor: pointer;
+  .icon {
+    float: left;
+    color: #ffa405;
+    font-size: 18px !important;
+    margin: 0 !important;
+  }
+  .text {
+    float: left;
+    font-size: 12px;
+    color: #393939;
+    margin-left: 6px;
+  }
+}
+
+.btnGroup {
+  display: flex;
+}
+
+.cancelBtn,
+.submitBtn {
+  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;
+}
+.cancelBtn {
+  background: #e9e9e9;
+  color: #6d6d6d;
+  margin-right: 12px;
+}

src/components/ContentItem/index.css

@@ -22,6 +22,7 @@
   border-radius: 20px;
   background-position: center;
   background-size: cover;
+  cursor: pointer;
 }
 .comment-item-content {
   margin: 10px 0;
@@ -87,6 +88,16 @@
   margin-right: 10px;
 }
 
+.avatar-hover-card-overlay {
+  padding-top: 0;
+}
+.avatar-hover-card-overlay .ant-popover-inner-content {
+  padding: 0;
+}
+.avatar-hover-card-overlay .ant-popover-arrow {
+  display: none;
+}
+
 @media screen and (max-width: 616px) and (min-width: 449px) {
   .comment-item-right {
     display: inline-block;

src/components/ContentItem/index.js

@@ -1,11 +1,12 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { Avatar, Icon, Tooltip, Popconfirm } from "antd";
+import { Icon, Tooltip, Popconfirm, Popover } from "antd";
 import dayjs from "dayjs";
 import "dayjs/locale/zh-cn";
 // import 'dayjs/locale/es';
 import relativeTime from "dayjs/plugin/relativeTime";
 import intl from "react-intl-universal";
+import AvatarHoverCard from "./AvatarHoverCard";
 import Comment from "../../Comment";
 import CommentInput from "../CommentInput";
 import avatar from "../../avatar";
@@ -27,12 +28,14 @@ class CommentItem extends Component {
     this.state = {
       showInput: false,
       showPreviewer: false,
-      previewerIndex: 0
+      previewerIndex: 0,
+      popoverVisible: false
     };
     this.handleToggleInput = this.handleToggleInput.bind(this);
     this.renderTextWithReply = this.renderTextWithReply.bind(this);
     this.showPreviewer = this.showPreviewer.bind(this);
     this.hidePreviewer = this.hidePreviewer.bind(this);
+    this.handleVisibleChange = this.handleVisibleChange.bind(this);
   }
 
   showPreviewer(index) {
@@ -52,6 +55,12 @@ class CommentItem extends Component {
     this.setState({ showInput: !this.state.showInput });
   }
 
+  handleVisibleChange(visible) {
+    this.setState({
+      popoverVisible: visible
+    });
+  }
+
   renderTextWithReply(text, content) {
     let newText = text;
     const { reply } = content;
@@ -81,10 +90,11 @@ class CommentItem extends Component {
       action,
       showReply,
       onShowReply,
-      app
+      app,
+      user_id
     } = this.props;
 
-    const { locale } = this.props.app;
+    const { locale, userAvaClick, showHoverCard } = this.props.app;
     const { showInput } = this.state;
 
     let newContent = content.content;
@@ -116,20 +126,53 @@ class CommentItem extends Component {
     return (
       <div className="comment-item-box">
         <div className="comment-item-left">
-          {/* <Avatar src={content.user_avatar || avatar} size="large" /> */}
-          <div
-            className="comment-item-avatar"
-            style={{
-              backgroundImage: `url(${content.user_avatar || avatar})`
-            }}
-          />
+          {showHoverCard ? (
+            <Popover
+              content={
+                <AvatarHoverCard
+                  {...this.props.app}
+                  user_id={user_id}
+                  handleVisibleChange={this.handleVisibleChange}
+                  image={content.user_avatar || avatar}
+                />
+              }
+              // placement={this.props.placement}
+              // trigger="click"
+              visible={this.state.popoverVisible}
+              onVisibleChange={this.handleVisibleChange}
+              overlayClassName="avatar-hover-card-overlay"
+            >
+              <div
+                className="comment-item-avatar"
+                style={{
+                  backgroundImage: `url(${content.user_avatar || avatar})`
+                }}
+                onClick={() => userAvaClick(user_id)}
+              />
+            </Popover>
+          ) : (
+            <div
+              className="comment-item-avatar"
+              style={{
+                backgroundImage: `url(${content.user_avatar || avatar})`
+              }}
+              onClick={() => {
+                userAvaClick(user_id);
+              }}
+            />
+          )}
         </div>
         <div className="comment-item-right">
           <div>
             {/* <a href={`/${content.user_id}`}>
               {content.user_name || "暂无昵称"}
             </a> */}
-            <strong>{content.user_name || intl.get("comment.tourist")}</strong>
+            <strong
+              onClick={() => userAvaClick(user_id)}
+              style={{ cursor: "pointer" }}
+            >
+              {content.user_name || intl.get("comment.tourist")}
+            </strong>
             <span style={{ marginLeft: 10 }}>
               <Tooltip
                 placement="top"

src/index.js

@@ -77,6 +77,49 @@ if (process.env.NODE_ENV !== "production") {
     businessId: "test",
     businessUserId: 4,
     userId: 71299,
+    currentUser: {
+      user_id: 71748
+    },
+    userAvaHoverData: {
+      71763: {
+        nickname: "aaa",
+        followers: 20,
+        fans: 2,
+        isFollowed: true
+      },
+      71748: {
+        nickname: "L0",
+        followers: 10,
+        fans: 11,
+        isFollowed: false
+      },
+      71299: {
+        nickname: "narro",
+        followers: 10,
+        fans: 11,
+        isFollowed: false
+      }
+    },
+    showHoverCard: true,
+    userAvaClick: id => {
+      console.log("userAvaClick", id);
+    },
+    getUserInfo: id => {
+      console.log("getinfo:", id);
+    },
+    focus: id => {
+      return new Promise(function(resolve, reject) {
+        console.log("focus:", id);
+        resolve();
+      });
+    },
+    unFocus: id => {
+      return new Promise(function(resolve, reject) {
+        console.log("unFocus:", id);
+        resolve();
+      });
+    },
+
     onCountChange: c => {
       console.log(c);
     },