@titaui/pc 1.11.52-beta.3 → 1.11.52-beta.4

package/lib/components/dynamic/dynamic-like-ranking/image/like-ranking.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>点赞排行榜</title>
+    <defs>
+        <linearGradient x1="25.6749834%" y1="84.5410483%" x2="73.6493792%" y2="24.52131%" id="linearGradient-1">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFA5A5" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="公告/分享" transform="translate(-1082.000000, -727.000000)">
+            <g id="置顶分享" transform="translate(1066.000000, 713.000000)">
+                <g id="点赞排行榜" transform="translate(16.000000, 14.000000)">
+                    <circle id="椭圆形" fill="#F05E5E" cx="10" cy="10" r="10"></circle>
+                    <path d="M4.58285466,13.3531698 L6.82522274,10 L6.82522274,10 L10,11.9877624 L7.90149916,15.2903228 C7.78302165,15.4767793 7.53582378,15.5318872 7.34936727,15.4134097 C7.29756512,15.3804938 7.25403227,15.3360987 7.22213851,15.283661 L6.42650106,13.9755248 L6.42650106,13.9755248 L4.91535766,13.9755248 C4.69444376,13.9755248 4.51535766,13.7964387 4.51535766,13.5755248 C4.51535766,13.4963603 4.53884808,13.4189759 4.58285466,13.3531698 Z" id="路径-3" fill="url(#linearGradient-1)"></path>
+                    <path d="M10.416188,13.3531698 L12.6585561,10 L12.6585561,10 L15.8333333,11.9877624 L13.7348325,15.2903228 C13.616355,15.4767793 13.3691571,15.5318872 13.1827006,15.4134097 C13.1308985,15.3804938 13.0873656,15.3360987 13.0554718,15.283661 L12.2598344,13.9755248 L12.2598344,13.9755248 L10.748691,13.9755248 C10.5277771,13.9755248 10.348691,13.7964387 10.348691,13.5755248 C10.348691,13.4963603 10.3721814,13.4189759 10.416188,13.3531698 Z" id="路径-3" fill="url(#linearGradient-1)" transform="translate(12.916667, 12.916667) scale(-1, 1) translate(-12.916667, -12.916667) "></path>
+                    <circle id="椭圆形" fill="#FFFFFF" cx="10" cy="9.16666667" r="4.16666667"></circle>
+                    <path d="M10,10.4166667 L9.24792573,10.8120555 C9.0523879,10.9148558 8.81053703,10.8396772 8.70773671,10.6441394 C8.66680108,10.5662752 8.65267521,10.477088 8.66754595,10.3903849 L8.81117935,9.55293791 L8.81117935,9.55293791 L8.20273849,8.95985465 C8.04454506,8.80565416 8.04130814,8.55240886 8.19550862,8.39421542 C8.25691206,8.33122197 8.33736903,8.2902271 8.42442384,8.2775773 L9.26526843,8.15539542 L9.26526843,8.15539542 L9.64130557,7.39346097 C9.73907449,7.1953595 9.97892482,7.1140239 10.1770263,7.21179282 C10.2559113,7.25072492 10.3197623,7.31457592 10.3586944,7.39346097 L10.7347316,8.15539542 L10.7347316,8.15539542 L11.5755762,8.2775773 C11.7941941,8.30934434 11.9456667,8.51232148 11.9138996,8.73093943 C11.9012498,8.81799424 11.860255,8.8984512 11.7972615,8.95985465 L11.1888206,9.55293791 L11.1888206,9.55293791 L11.332454,10.3903849 C11.3697985,10.6081195 11.2235633,10.8149019 11.0058287,10.8522463 C10.9191257,10.867117 10.8299385,10.8529911 10.7520743,10.8120555 L10,10.4166667 L10,10.4166667 Z" id="星形" fill="#F05E5E"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/lib/components/dynamic/dynamic-like-ranking/index.css

@@ -0,0 +1,146 @@
+.danamic-like-ranking {
+  margin-top: 10px;
+  width: 278px;
+  background: #ffffff;
+  box-shadow: 0px 0px 8px 0px rgba(127, 145, 180, 0.1);
+  border-radius: 12px;
+  padding: 12px 16px;
+  padding-top: 16px;
+  padding-bottom: 20px;
+  box-sizing: border-box;
+}
+
+.danamic-like-ranking__header {
+  height: 24px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #3f4755;
+  line-height: 24px;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.danamic-like-ranking__header-text {
+  margin-left: 4px;
+}
+
+.danamic-like-ranking__header-image {
+  width: 20px;
+  height: 20px;
+  position: relative;
+  top: -2px;
+}
+
+.danamic-like-ranking__header-right {
+  font-size: 14px;
+  cursor: pointer;
+  color: #2879ff;
+}
+
+.danamic-like-ranking__header-right:hover {
+  color: #5c8eff;
+}
+
+.danamic-like-ranking__content {
+  border-top: 1px solid #e9ecf0;
+  padding: 16px 0 0 0;
+}
+
+.danamic-like-ranking__content-table-empty {
+  margin: 50px auto 40px;
+  width: 160px;
+  height: 116px;
+  background: url("./image/ranking-empty.png") no-repeat;
+  background-size: 160px 116px;
+  position: relative;
+}
+
+.danamic-like-ranking__content-table-empty-text {
+  color: #6f7886;
+  width: 58px;
+  position: absolute;
+  bottom: 10px;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+
+.danamic-like-ranking__content-table-items {
+  display: grid;
+  grid-template-columns: auto 28px auto auto;
+  grid-row-gap: 16px;
+  margin-left: -8px;
+}
+
+.danamic-like-ranking__item:last-of-type {
+  margin-bottom: unset;
+}
+
+.danamic-like-ranking__item-pre {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.danamic-like-ranking__item-medal {
+  min-width: 21px;
+  height: 24px;
+}
+
+.danamic-like-ranking__item-num {
+  font-size: 14px;
+}
+
+.danamic-like-ranking__item-avatar .titaui-pc-avator-container {
+  display: inline-flex !important;
+}
+
+.danamic-like-ranking__item-name {
+  margin-left: 8px;
+  display: inline-flex;
+  align-items: center;
+}
+
+.danamic-like-ranking__item-like-text {
+  font-size: 13px;
+  font-weight: 400;
+  color: #89919f;
+  line-height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.danamic-like-ranking__item-like-num {
+  font-size: 16px;
+  font-weight: 600;
+  color: #3f4755;
+  line-height: 22px;
+  margin-right: 4px;
+}
+
+.danamic-like-ranking__tab-bar {
+  margin-bottom: 16px;
+  display: flex;
+}
+
+.danamic-like-ranking__tab-bar-item {
+  text-align: center;
+  width: 60px;
+  height: 28px;
+  line-height: 28px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #3f4755;
+  cursor: pointer;
+  margin-right: 6px;
+}
+
+.danamic-like-ranking__tab-bar-item--selected {
+  border-radius: 18px;
+  background: rgba(40, 121, 255, 0.1);
+  border-radius: 15px;
+  color: #2879ff;
+}

package/lib/components/dynamic/dynamic-like-ranking/index.js

@@ -0,0 +1,180 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _requestApi = require("../request-api");
+
+var _formatTime = require("../../../utils/format-time");
+
+var _auth = require("../../../utils/auth");
+
+var _item = _interopRequireDefault(require("./item"));
+
+var _bsGlobal = require("../../../utils/bs-global");
+
+var _getLocale = require("../../../utils/getLocale");
+
+require("./index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var preCls = "danamic-like-ranking";
+var Auth = new _auth.DynamicManagerAuth();
+
+var DynamicLikeRanking = function DynamicLikeRanking() {
+  var _useState = (0, _react.useState)([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      rankingData = _useState2[0],
+      setRankingData = _useState2[1];
+
+  var _useState3 = (0, _react.useState)((0, _getLocale.getLocale)("Mod_all")),
+      _useState4 = _slicedToArray(_useState3, 2),
+      type = _useState4[0],
+      setType = _useState4[1];
+
+  var _useState5 = (0, _react.useState)({
+    createDate: "",
+    endDate: ""
+  }),
+      _useState6 = _slicedToArray(_useState5, 2),
+      date = _useState6[0],
+      setDate = _useState6[1];
+
+  (0, _react.useEffect)(function () {
+    var createDate = date.createDate,
+        endDate = date.endDate;
+    (0, _requestApi.getRanking)({
+      ToUserIds: "",
+      ToDepIds: "",
+      ToGroupIds: "",
+      CreateDate: createDate,
+      EndDate: endDate,
+      ObjectType: 0,
+      ObjectTypeAction: 0,
+      PageNum: 1,
+      PageSize: 8,
+      ShowMySelf: true
+    }).then(function (res) {
+      if (res.Code === 1) {
+        var _res$Data = res.Data,
+            userPariseinfos = _res$Data.userPariseinfos,
+            currentUserPariseInfo = _res$Data.currentUserPariseInfo;
+        var data = userPariseinfos || [];
+        var currentUserIsInEighth = data.findIndex(function (item) {
+          return item.user.userId === (0, _bsGlobal.getUserInfo)().Id;
+        }) !== -1;
+
+        if (!currentUserIsInEighth) {
+          data = data.slice(0, 7);
+
+          if (currentUserPariseInfo && currentUserPariseInfo.user) {
+            data.push(currentUserPariseInfo);
+          }
+        }
+
+        setRankingData(data);
+      }
+    });
+  }, [date]);
+
+  var handleLinkToPraiseRaking = function handleLinkToPraiseRaking() {
+    var href = window.location.href;
+    var url = "".concat(href.split("#")[0], "#praise-raking");
+    window.open(url, "self");
+  };
+
+  var handleChangeDate = function handleChangeDate(item) {
+    setType(item);
+    var createDate = "";
+    var endDate = "";
+
+    if (item == (0, _getLocale.getLocale)("Feed_Tab_Title_Thismonth")) {
+      createDate = (0, _formatTime.showMonthFirstDay)();
+      endDate = (0, _formatTime.showNextMonthFirstDay)();
+    } else if (item == (0, _getLocale.getLocale)("Feed_Tab_Title_Thisweek")) {
+      createDate = (0, _formatTime.showWeekFirstDay)();
+      endDate = (0, _formatTime.showNextWeekFirstDay)();
+    }
+
+    setDate({
+      createDate: createDate,
+      endDate: endDate
+    });
+  };
+
+  function TabBar() {
+    var typeData = [(0, _getLocale.getLocale)("Mod_all"), (0, _getLocale.getLocale)("Feed_Tab_Title_Thisweek"), (0, _getLocale.getLocale)("Feed_Tab_Title_Thismonth")];
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(preCls, "__tab-bar")
+    }, typeData.map(function (item, key) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: key,
+        className: (0, _classnames["default"])("".concat(preCls, "__tab-bar-item"), _defineProperty({}, "".concat(preCls, "__tab-bar-item--selected"), type === item)),
+        onClick: function onClick() {
+          return handleChangeDate(item);
+        }
+      }, item);
+    }));
+  }
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("".concat(preCls))
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("".concat(preCls, "__header"))
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("".concat(preCls, "__header-left"))
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    className: (0, _classnames["default"])("".concat(preCls, "__header-image")),
+    src: require("./image/like-ranking.svg")
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: (0, _classnames["default"])("".concat(preCls, "__header-text"))
+  }, (0, _getLocale.getLocale)("Feed_Title_Likeranking"))), Auth.hasPraiseAuth() && /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("".concat(preCls, "__header-right")),
+    onClick: handleLinkToPraiseRaking
+  }, (0, _getLocale.getLocale)("Feed_Set_Pop_Butt_More"))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("".concat(preCls, "__content"))
+  }, TabBar(), /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("".concat(preCls, "__content-table"))
+  }, !rankingData || rankingData.length === 0 && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(preCls, "__content-table-empty")
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(preCls, "__content-table-empty-text")
+  }, "\u6682\u65E0\u6392\u884C")), rankingData && rankingData.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("".concat(preCls, "__content-table-items"))
+  }, rankingData.map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement(_item["default"], {
+      userInfo: item,
+      key: index
+    });
+  })))));
+};
+
+var _default = DynamicLikeRanking;
+exports["default"] = _default;

package/lib/components/dynamic/dynamic-like-ranking/item.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _avatar = _interopRequireDefault(require("../../avatar"));
+
+var _bsGlobal = require("../../../utils/bs-global");
+
+var _openData = require("../../../utils/open-data");
+
+var _tooltip = _interopRequireDefault(require("../../tooltip"));
+
+var _getLocale = require("../../../utils/getLocale");
+
+require("./index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var preCls = "danamic-like-ranking__item";
+
+var Item = function Item(_ref) {
+  var userInfo = _ref.userInfo;
+
+  var formatRaking = function formatRaking(num) {
+    if (num === 1) {
+      return /*#__PURE__*/_react["default"].createElement("img", {
+        className: "".concat(preCls, "-medal"),
+        src: require("./image/ranking-1.png"),
+        alt: "\u91D1\u724C"
+      });
+    }
+
+    if (num === 2) {
+      return /*#__PURE__*/_react["default"].createElement("img", {
+        className: "".concat(preCls, "-medal"),
+        src: require("./image/ranking-2.png"),
+        alt: "\u94F6\u724C"
+      });
+    }
+
+    if (num === 3) {
+      return /*#__PURE__*/_react["default"].createElement("img", {
+        className: "".concat(preCls, "-medal"),
+        src: require("./image/ranking-3.png"),
+        alt: "\u94DC\u724C"
+      });
+    }
+
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      className: "".concat(preCls, "-num")
+    }, num);
+  };
+
+  if (!userInfo || Object.keys(userInfo).length === 0) return null;
+  var rankNum = userInfo.rankNum,
+      user = userInfo.user,
+      pariseNums = userInfo.pariseNums;
+  var avatar = user.avatar,
+      name = user.name,
+      userId = user.userId,
+      userType = user.userType; // 之后要用
+  // const url = getUrlForUserPage({
+  //   userId: userId,
+  //   userType: userType || 2,
+  // });
+  // const handleOpenUserPage = () => {
+  //   window.open(url, "_blank");
+  // };
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(preCls, "-pre")
+  }, formatRaking(rankNum)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(preCls, "-avatar")
+  }, /*#__PURE__*/_react["default"].createElement(_avatar["default"], {
+    name: name,
+    src: avatar.original,
+    color: avatar.color,
+    userId: userId,
+    size: {
+      width: 28,
+      textNum: 1,
+      fontSize: 14
+    }
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(preCls, "-name")
+  }, /*#__PURE__*/_react["default"].createElement(_tooltip["default"].Text, {
+    text: /*#__PURE__*/_react["default"].createElement(_openData.OpenUserName, {
+      id: userId,
+      name: name
+    }),
+    maxWidth: 120
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(preCls, "-like-text")
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(preCls, "-like-num")
+  }, (0, _bsGlobal.formatNum)(pariseNums)), (0, _getLocale.getLocale)("Mod_Kudos")));
+};
+
+var _default = Item;
+exports["default"] = _default;

package/lib/components/dynamic/dynamic-like-ranking/mock.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.data = void 0;
+var data = [{
+  user: {
+    big: null,
+    color: "#b9cc4f",
+    hasAvatar: false,
+    large: null,
+    medium: null,
+    normal: null,
+    original: null,
+    small: null
+  },
+  ranking: 1,
+  name: "杨亮",
+  departmentId: 0,
+  departmentName: "默认部门",
+  userId: 560000215,
+  primaryDepartment: "默认部门",
+  primaryDepartmentId: 0,
+  likeNums: 1400
+}, {
+  user: {
+    big: null,
+    color: "#b9cc4f",
+    hasAvatar: false,
+    large: null,
+    medium: null,
+    normal: null,
+    original: null,
+    small: null
+  },
+  ranking: 2,
+  name: "杨亮",
+  departmentId: 0,
+  departmentName: "默认部门",
+  userId: 560000215,
+  primaryDepartment: "默认部门",
+  primaryDepartmentId: 0,
+  likeNums: 140
+}, {
+  user: {
+    big: null,
+    color: "#b9cc4f",
+    hasAvatar: false,
+    large: null,
+    medium: null,
+    normal: null,
+    original: null,
+    small: null
+  },
+  ranking: 3,
+  name: "杨亮",
+  departmentId: 0,
+  departmentName: "默认部门",
+  userId: 560000215,
+  primaryDepartment: "默认部门",
+  primaryDepartmentId: 0,
+  likeNums: 14000
+}, {
+  user: {
+    big: null,
+    color: "#b9cc4f",
+    hasAvatar: false,
+    large: null,
+    medium: null,
+    normal: null,
+    original: null,
+    small: null
+  },
+  ranking: 4,
+  name: "杨亮",
+  departmentId: 0,
+  departmentName: "默认部门",
+  userId: 560000215,
+  primaryDepartment: "默认部门",
+  primaryDepartmentId: 0,
+  likeNums: 14000000
+}];
+exports.data = data;

package/lib/components/dynamic/dynamic-liking/image/like-dynamic.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>点赞动态</title>
+    <defs>
+        <circle id="path-1" cx="4.16666667" cy="4.16666667" r="4.16666667"></circle>
+        <filter x="-21.4%" y="-89.9%" width="142.9%" height="279.8%" filterUnits="objectBoundingBox" id="filter-3">
+            <feGaussianBlur stdDeviation="1" in="SourceGraphic"></feGaussianBlur>
+        </filter>
+    </defs>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="绩效考核/@与回复/打赏" transform="translate(-1082.000000, -1196.000000)">
+            <g id="动态" transform="translate(1066.000000, 1182.000000)">
+                <g id="点赞动态" transform="translate(16.000000, 14.000000)">
+                    <circle id="椭圆形" fill="#FFBB4D" cx="10" cy="10" r="10"></circle>
+                    <g id="编组-22" transform="translate(3.213090, 6.000000)">
+                        <g id="形状结合" transform="translate(2.786910, 0.000000)">
+                            <mask id="mask-2" fill="white">
+                                <use xlink:href="#path-1"></use>
+                            </mask>
+                            <use id="蒙版" fill="#FFFFFF" xlink:href="#path-1"></use>
+                            <path d="M10.2801853,3.1428106 C10.8347673,3.46511621 11.1504539,3.83580442 11.1504539,4.23019237 C11.1504539,5.47283306 8.01644712,6.48019237 4.15045387,6.48019237 C0.284460621,6.48019237 -2.84954613,5.47283306 -2.84954613,4.23019237 C-2.84954613,4.22851539 -2.84954042,4.22683884 -2.84952901,4.22516273 L-1.2577765,4.5010035 C-0.785172265,5.18948386 1.45644516,5.7109616 4.15045387,5.7109616 C7.1793128,5.7109616 9.636332,5.05179396 9.65039321,4.23722128 Z" fill="#FFBB4D" filter="url(#filter-3)" mask="url(#mask-2)" transform="translate(4.150454, 4.811501) rotate(-15.000000) translate(-4.150454, -4.811501) "></path>
+                        </g>
+                        <path d="M13.5483912,2.43826668 C13.8700102,3.63856542 11.1035159,5.42274043 7.36925322,6.42333311 C3.6349905,7.42392579 0.347048662,7.26203205 0.0254295863,6.06173332 C-0.165835376,5.34792276 0.73504509,4.4276179 2.28211975,3.58842283 L2.28182412,4.54792105 C1.69502828,4.95952847 1.38922509,5.35593246 1.47431833,5.67350475 C1.68598216,6.46344494 4.23609808,6.46649321 7.17016165,5.68031324 C10.1042252,4.89413328 12.3111663,3.61643544 12.0995024,2.82649525 C12.0230062,2.54100753 11.6410777,2.35829814 11.0459776,2.27847735 C10.8979016,1.89023186 10.7402483,1.60445999 10.5721988,1.42051892 C12.2176585,1.40720458 13.365042,1.75399842 13.5483912,2.43826668 Z" id="形状结合" fill="#FFFFFF"></path>
+                        <path d="M9.78691037,2.50417127 C9.41404232,1.78496057 8.81138292,1.23999086 8.09496376,1 L7.95280143,1.78102951 C8.42427797,1.9275763 8.82526021,2.27106798 9.08234723,2.72966003 L9.78691037,2.50417127 Z" id="路径" fill="#FFBB4D"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/lib/components/dynamic/dynamic-liking/index.css

@@ -0,0 +1,81 @@
+.dynamic-liking {
+  margin-top: 10px;
+  width: 278px;
+  background: #ffffff;
+  box-shadow: 0px 0px 8px 0px rgba(127, 145, 180, 0.1);
+  border-radius: 12px;
+  padding: 12px 16px;
+  padding-top: 16px;
+  box-sizing: border-box;
+}
+
+.dynamic-liking__header {
+  height: 24px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #3f4755;
+  line-height: 24px;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dynamic-liking__header-text {
+  margin-left: 4px;
+}
+
+.dynamic-liking__header-image {
+  width: 20px;
+  height: 20px;
+  position: relative;
+  top: -2px;
+}
+
+.dynamic-liking__content {
+  border-top: 1px solid #e9ecf0;
+  padding: 16px 0 0 0;
+}
+
+.dynamic-liking__item {
+  display: flex;
+  align-items: flex-start;
+  vertical-align: text-top;
+  margin-top: 18px;
+}
+
+.dynamic-liking__item:nth-of-type(1) {
+  margin-top: 0;
+}
+
+.dynamic-liking__item-avatar {
+  position: relative;
+  top: 2px;
+}
+
+.dynamic-liking__item-center {
+  margin-left: 8px;
+}
+
+.dynamic-liking__item-center-name {
+  font-size: 12px;
+  font-weight: 600;
+  color: #3F4755;
+  line-height: 18px;
+  display: flex;
+}
+
+.dynamic-liking__item-center-time {
+  font-size: 12px;
+  font-weight: 400;
+  color: #89919F;
+  line-height: 18px;
+}
+
+.dynamic-liking__item-dynamic {
+  font-size: 12px;
+  font-weight: 400;
+  color: #89919F;
+  line-height: 18px;
+  margin-left: 8px;
+}