@titaui/pc 1.6.11 → 1.6.15

package/lib/components/photo-card/components/card/index.css

@@ -1,80 +1,72 @@
-.okrtitauser-card {
-  position: relative;
+.titaui-photo-card {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  box-sizing: border-box;
   width: 278px;
   height: 359px;
-  text-align: center;
+  padding: 0 24px;
   background: #ffffff;
   box-shadow: 0px 4px 24px 0px rgba(127, 145, 180, 0.15);
   border-radius: 24px;
-  overflow: hidden;
 }
 
-.okrtitauser-card__header {
-  position: relative;
-  width: 278px;
+.titaui-photo-card__header {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
   height: 190px;
+  overflow: hidden;
   background: linear-gradient(180deg, rgba(20, 28, 40, 0) 0%, #141c28 100%);
-  background-size: 278px 190px;
   border-radius: 24px 24px 0 0;
-  overflow: hidden;
-  text-align: center;
 }
 
-.okrtitauser-card__header-mask {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 278px;
-  height: 190px;
-  background-size: 278px 190px;
-  border-radius: 24px 24px 0 0;
+.titaui-photo-card__header::after {
   content: "";
-  filter: blur(6px);
-}
-
-.okrtitauser-card__header-mask ::before {
-  position: absolute;
-  border-radius: 24px 24px 0 0;
-  top: 0;
-  left: 0;
-  background: #141c28;
+  width: 278px;
+  height: 26px;
+  background-color: #fff;
+  border-radius: 50% / 100% 100% 0 0;
+  margin-top: 4px;
 }
 
-.okrtitauser-card__header-imgbox {
-  position: absolute;
-  border-radius: 35px;
+.titaui-photo-card__header-img {
   width: 68px;
   height: 68px;
-  top: 28px;
-  left: 105px;
+  margin-top: 26px;
+  border-radius: 35px;
   border: 2px solid #fff;
 }
 
-.okrtitauser-card__header-imgbox-img {
-  width: 100%;
-  height: 100%;
-  border-radius: 35px;
+.titaui-photo-card__header-img .titaui-pc-avator-container img {
+  width: 68px !important;
+  height: 68px !important;
+}
+
+.titaui-photo-card__header-img .titaui-pc-avator-container .titaui-pc-avatar--text {
+  width: 68px !important;
+  height: 68px !important;
+  font-size: 22px !important;
 }
 
-.okrtitauser-card__header-name {
-  display: inline-block;
-  position: absolute;
-  top: 110px;
-  left: 109px;
+.titaui-photo-card__header-name {
   height: 28px;
+  margin-top: 14px;
   font-size: 20px;
   font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
   font-weight: 500;
   color: #ffffff;
   line-height: 28px;
+  cursor: pointer;
 }
 
-.okrtitauser-card__header-depart {
-  display: block;
-  position: absolute;
-  top: 140px;
-  left: 72px;
+.titaui-photo-card__header-name-tooltip {
+  z-index: 2001;
+}
+
+.titaui-photo-card__header-depart {
   height: 22px;
+  margin-top: 2px;
   font-size: 14px;
   font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
   font-weight: 400;
@@ -82,39 +74,24 @@
   line-height: 22px;
 }
 
-.okrtitauser-card__header-circle {
-  position: absolute;
-  top: 173px;
-  left: -12px;
-  width: 300px;
-  height: 26px;
-  background-color: #fff;
-  border-radius: 50% / 100% 100% 0 0;
-  overflow: hidden;
-}
-
-.okrtitauser-card__role {
-  position: absolute;
-  left: 94px;
-  top: 194px;
-  width: 89px;
-  height: 20px;
-  background-image: url(../../images/user-role.svg);
+.titaui-photo-card__data {
+  width: 230px;
+  height: 45px;
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
-.okrtitauser-card__attention {
-  position: absolute;
-  left: 24px;
-  top: 234px;
+.titaui-photo-card__data-attention {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
   width: 110px;
   height: 45px;
-  text-align: center;
 }
 
-.okrtitauser-card__attention-count {
-  margin-left: 44px;
-  width: 22px;
-  height: 26px;
+.titaui-photo-card__data-attention-count {
   font-size: 18px;
   font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
   font-weight: 500;
@@ -122,10 +99,7 @@
   line-height: 26px;
 }
 
-.okrtitauser-card__attention-title {
-  width: 36px;
-  height: 18px;
-  margin-left: 37px;
+.titaui-photo-card__data-attention-title {
   font-size: 12px;
   font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
   font-weight: 400;
@@ -133,19 +107,15 @@
   line-height: 18px;
 }
 
-.okrtitauser-card__visit {
-  position: absolute;
-  right: 24px;
-  top: 234px;
+.titaui-photo-card__data-visit {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
   width: 110px;
   height: 45px;
-  text-align: center;
 }
 
-.okrtitauser-card__visit-count {
-  margin-left: 45px;
-  width: 19px;
-  height: 26px;
+.titaui-photo-card__data-visit-count {
   font-size: 18px;
   font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
   font-weight: 500;
@@ -153,10 +123,7 @@
   line-height: 26px;
 }
 
-.okrtitauser-card__visit-title {
-  width: 36px;
-  height: 18px;
-  margin-left: 37px;
+.titaui-photo-card__data-visit-title {
   font-size: 12px;
   font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
   font-weight: 400;
@@ -164,30 +131,36 @@
   line-height: 18px;
 }
 
-.okrtitauser-card__attention-btn {
-  position: absolute;
-  top: 299px;
-  right: 24px;
+.titaui-photo-card__attention-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 230px;
   height: 36px;
+  margin-top: 20px;
   background: #f0f4fa;
   border-radius: 20px;
   cursor: pointer;
 }
 
-.okrtitauser-card__attention-btn-img {
-  width: 16px;
-  height: 16px;
-  background-image: url(../../images/user-add.svg);
-  margin: 10px 125px 10px 89px;
+.titaui-photo-card__attention-btn:hover {
+  background: rgba(240, 94, 94, 0.1);
+}
+
+.titaui-photo-card__attention-btn-img--hide {
+  display: none;
+}
+
+.titaui-photo-card__attention-btn-img--show {
+  display: block;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #6f7886;
+  line-height: 20px;
 }
 
-.okrtitauser-card__attention-btn-title {
-  position: absolute;
-  top: 8px;
-  right: 95px;
-  width: 28px;
-  height: 20px;
+.titaui-photo-card__attention-btn-title {
   font-size: 14px;
   font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
   font-weight: 400;

package/lib/components/photo-card/components/card/index.js

@@ -11,7 +11,19 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _data = require("../../data");
+var _default2 = _interopRequireDefault(require("../../../../components/avatar/default"));
+
+var _tooltipText = _interopRequireDefault(require("../../../tooltip/tooltip-text"));
+
+var _request = require("../../../../utils/request");
+
+var _userAdd = _interopRequireDefault(require("../../images/user-add.svg"));
+
+var _assistant = _interopRequireDefault(require("../../images/assistant.svg"));
+
+var _boss = _interopRequireDefault(require("../../images/boss.svg"));
+
+var _superManager = _interopRequireDefault(require("../../images/super-manager.svg"));
 
 require("./index.css");
 
@@ -21,6 +33,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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."); }
@@ -33,23 +47,96 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var preCls = "okrtitauser-card";
+var preCls = "titaui-photo-card";
 
-var Card = function Card() {
-  //背景图片
-  var backGroundstyle = {
-    backgroundImage: "url(".concat(_data.data.photo, ")")
-  }; //获得关注量初始数据
+var Card = function Card(props) {
+  var userInfo = props.userInfo;
 
-  var _useState = (0, _react.useState)(_data.data.attention_count),
+  var _useState = (0, _react.useState)({}),
       _useState2 = _slicedToArray(_useState, 2),
-      count = _useState2[0],
-      changeCount = _useState2[1]; //处理关注量的值+1的回调
-
+      backGroundstyle = _useState2[0],
+      setBackGroundstyle = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isAttention = _useState4[0],
+      setIsAttention = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(true),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isClickable = _useState6[0],
+      setIsClickable = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      attentionData = _useState8[0],
+      setAttentionData = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(0),
+      _useState10 = _slicedToArray(_useState9, 2),
+      visitData = _useState10[0],
+      setVisitData = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(""),
+      _useState12 = _slicedToArray(_useState11, 2),
+      role = _useState12[0],
+      setRole = _useState12[1];
+
+  (0, _react.useEffect)(function () {
+    (0, _request.rget)("v1")("follow/getFollowerList?toUserId=".concat(userInfo.Id)).then(function (res) {
+      setAttentionData(res.Data.total);
+    });
+    (0, _request.rget)("v1")("okr/okrCyclePageVisitor?toUserId=".concat(userInfo.Id)).then(function (res) {
+      setVisitData(res.Data.total);
+    });
+
+    if (userInfo.UserAvatar.HasAvatar) {
+      setBackGroundstyle({
+        backgroundImage: "url(".concat(userInfo.Avatar, ")"),
+        backgroundSize: "278px 190px",
+        backdropFilter: "blur(4px)"
+      });
+    } else {
+      setBackGroundstyle({
+        backgroundColor: userInfo.UserAvatar.Color
+      });
+    } // if (new OAuth().isPrincipalUser()) {
+    //   setRole(DepartLeader);
+    // }
+
+
+    for (var item in userInfo) {
+      switch (item) {
+        case "IsBoss":
+          if (userInfo["IsBoss"]) {
+            setRole(_boss["default"]);
+          }
+
+          break;
+
+        case "Role":
+          if (userInfo["Role"] === 2) {
+            setRole(_superManager["default"]);
+          }
+
+          if (userInfo["Role"] === 4) {
+            setRole(_assistant["default"]);
+          }
+
+          break;
+      }
+    }
+  }, []); //处理关注量的值+1的回调
 
   var handleAttentionCount = function handleAttentionCount(count) {
-    count = count + 1;
-    changeCount(count);
+    setIsClickable(false);
+
+    if (isClickable) {
+      setIsAttention(true); // rpost("v1")(`follow/addFollower?followerId=${userInfo.Id}`, userInfo);
+    } // rget("v1")(`follow/getFollowerList?toUserId=${userInfo.Id}`).then((res) => {
+    //   setAttentionData(res.Data.total);
+    // });
+
   };
 
   return (
@@ -61,43 +148,49 @@ var Card = function Card() {
       className: (0, _classnames["default"])("".concat(preCls, "__header")),
       style: backGroundstyle
     }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])("".concat(preCls, "__header-mask")),
-      style: backGroundstyle
-    }), /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])("".concat(preCls, "__header-imgbox"))
-    }, /*#__PURE__*/_react["default"].createElement("img", {
-      src: _data.data.photo,
-      alt: "",
-      className: (0, _classnames["default"])("".concat(preCls, "__header-imgbox-img"))
+      className: (0, _classnames["default"])("".concat(preCls, "__header-img"))
+    }, /*#__PURE__*/_react["default"].createElement(_default2["default"], {
+      userId: userInfo.Id,
+      name: userInfo.Name,
+      color: userInfo.UserAvatar.Color,
+      src: userInfo.Avatar
     })), /*#__PURE__*/_react["default"].createElement("span", {
       className: (0, _classnames["default"])("".concat(preCls, "__header-name"))
-    }, _data.data.username), /*#__PURE__*/_react["default"].createElement("span", {
+    }, /*#__PURE__*/_react["default"].createElement(_tooltipText["default"], {
+      overlayClassName: "".concat(preCls, "__header-name-tooltip"),
+      text: userInfo.Name,
+      maxWidth: 228,
+      mouseEnterDelay: 0.8
+    })), /*#__PURE__*/_react["default"].createElement("span", {
       className: (0, _classnames["default"])("".concat(preCls, "__header-depart"))
-    }, _data.data.department), /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])("".concat(preCls, "__header-circle"))
-    })), /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])("".concat(preCls, "__role"))
+    }, userInfo.Department)), /*#__PURE__*/_react["default"].createElement("img", {
+      src: role
     }), /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])("".concat(preCls, "__attention"))
+      className: (0, _classnames["default"])("".concat(preCls, "__data"))
     }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])("".concat(preCls, "__attention-count"))
-    }, count), /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])("".concat(preCls, "__attention-title"))
+      className: (0, _classnames["default"])("".concat(preCls, "__data-attention"))
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _classnames["default"])("".concat(preCls, "__data-attention-count"))
+    }, attentionData >= 10000 ? "1w" : attentionData), /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _classnames["default"])("".concat(preCls, "__data-attention-title"))
     }, "\u5173\u6CE8\u91CF")), /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])("".concat(preCls, "__visit"))
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])("".concat(preCls, "__visit-count"))
-    }, _data.data.visit_count), /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])("".concat(preCls, "__visit-title"))
-    }, "\u8BBF\u95EE\u91CF")), /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])("".concat(preCls, "__data-visit"))
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _classnames["default"])("".concat(preCls, "__data-visit-count"))
+    }, visitData >= 10000 ? "1w" : visitData), /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _classnames["default"])("".concat(preCls, "__data-visit-title"))
+    }, "\u8BBF\u95EE\u91CF"))), /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])("".concat(preCls, "__attention-btn")),
       onClick: function onClick() {
-        return handleAttentionCount(count);
+        return handleAttentionCount(attentionData);
       }
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])("".concat(preCls, "__attention-btn-img"))
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      src: _userAdd["default"],
+      className: (0, _classnames["default"])("".concat(preCls, "__attention-btn-img"), _defineProperty({}, "".concat(preCls, "__attention-btn-img--hide"), isAttention))
     }), /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])("".concat(preCls, "__attention-btn-title"))
+      className: (0, _classnames["default"])("".concat(preCls, "__attention-btn-img--hide"), _defineProperty({}, "".concat(preCls, "__attention-btn-img--show"), isAttention))
+    }, "\u5DF2\u5173\u6CE8"), /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])("".concat(preCls, "__attention-btn-title"), _defineProperty({}, "".concat(preCls, "__attention-btn-img--hide"), isAttention))
     }, "\u5173\u6CE8")))
   );
 };

package/lib/components/photo-card/data.js

@@ -10,10 +10,10 @@ var _userPhoto = _interopRequireDefault(require("./images/user-photo.png"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var data = {
-  "username": "尔康康",
-  "department": "研发部-产品设计部门",
-  "attention_count": 66,
-  "visit_count": 12,
-  "photo": _userPhoto["default"]
+  username: "尔康康",
+  department: "研发部-产品设计部门",
+  attention_count: 88,
+  visit_count: 100000,
+  photo: _userPhoto["default"]
 };
 exports.data = data;

package/lib/components/photo-card/images/assistant.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="20px" viewBox="0 0 52 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>助理</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#9EC2FF" offset="0%"></stop>
+            <stop stop-color="#76A9FF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="-2.48949813e-15%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#2879FF" offset="0%"></stop>
+            <stop stop-color="#0E69FE" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="41.2046279%" id="linearGradient-3">
+            <stop stop-color="#1B71FF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="OKR" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="公司全部/隔级-交互规范" transform="translate(-1356.000000, -3280.000000)" fill-rule="nonzero">
+            <g id="角色" transform="translate(1356.000000, 3208.000000)">
+                <g id="助理" transform="translate(0.000000, 72.000000)">
+                    <rect id="矩形" fill="#2879FF" x="3" y="1" width="49" height="18" rx="9"></rect>
+                    <g id="编组-25">
+                        <polygon id="多边形" fill="url(#linearGradient-1)" points="9 0 17.660254 5 17.660254 15 9 20 0.33974596 15 0.33974596 5"></polygon>
+                        <polygon id="多边形" fill="url(#linearGradient-2)" points="8.93333333 1.8 16.1502117 5.89090909 16.1502117 14.0727273 8.93333333 18.1636364 1.71645497 14.0727273 1.71645497 5.89090909"></polygon>
+                        <g id="编组-29" transform="translate(5.000000, 5.000000)">
+                            <path d="M3.88814818,9.78562699 C3.68141594,9.77439872 3.29833383,9.75788656 2.91657268,9.73212759 C2.56255197,9.70835008 2.20853126,9.67928868 1.85583152,9.6442829 C1.35452234,9.5960674 0.85651559,9.52209292 0.364453219,9.41377315 C0.352564463,9.4111312 0.341336194,9.40584731 0.329447439,9.40386585 C0.178196053,9.3774464 0.106863521,9.27837343 0.0711972551,9.13636886 C-0.00145624941,8.84641533 -0.0133450047,8.35424963 0.0124139651,8.05835172 C0.0262841796,7.89851401 0.0460987717,7.73933679 0.067894823,7.57949908 C0.107524007,7.29416895 0.266040744,7.09206011 0.507118282,6.9421297 C0.772633816,6.77766858 1.06655027,6.68982389 1.36178769,6.60528163 C1.58503209,6.54121445 1.81422088,6.49431991 2.02095312,6.3833582 C2.23429023,6.26777308 2.43904101,6.1402992 2.58698997,5.94215328 C2.67351369,5.82590767 2.96544868,5.2466611 2.91657268,5.09937263 C2.88949274,5.01615134 5.00418303,4.911134 4.97380066,5.09937263 C4.90180764,5.54321949 5.37556357,6.07755299 5.77449736,6.28494572 C6.02746365,6.41638252 6.30024453,6.49167797 6.57170444,6.57357828 C6.8312756,6.65085519 7.09216773,6.72416918 7.33456624,6.84768014 C7.47194741,6.9176917 7.60206324,7.0002525 7.70906203,7.11385616 C7.84710369,7.25916317 7.91381282,7.43815498 7.93957179,7.6316775 C7.96599124,7.82387904 7.99108973,8.01674107 7.99769459,8.21026359 C8.0069414,8.46058794 7.99108973,8.90784056 7.8999426,9.14561567 C7.86757877,9.23081841 7.80879548,9.28828073 7.72557419,9.323947 C7.53271216,9.4065078 7.32928235,9.44943941 7.12519205,9.4890686 C6.64964184,9.58021572 6.16946822,9.64031998 5.68731315,9.69117744 C5.14769576,9.74731878 4.60609691,9.77638018 3.88814818,9.78562699 Z M3.99184455,6.66142297 C3.92183299,6.66142297 3.85182143,6.660102 3.78180987,6.66274395 C3.76463723,6.66274395 3.74019923,6.66802784 3.73029193,6.67925611 C3.67216913,6.75521204 3.61404633,6.83116798 3.56318887,6.91306829 C3.5473372,6.93882726 3.54073234,6.9857218 3.55328158,7.01148077 C3.6252746,7.15876924 3.70519345,7.30077381 3.7804889,7.44674131 C3.79237766,7.46853736 3.80228495,7.49825925 3.79700106,7.52137627 C3.73557583,7.82255807 3.66160135,8.12109793 3.60942292,8.4236007 C3.54535574,8.79611503 3.54139282,8.94350683 3.72500804,9.19845458 C3.78973571,9.25855884 3.848519,9.31866311 3.91324667,9.37084153 C3.96146218,9.40981023 4.01694303,9.40518682 4.07044243,9.37480445 C4.17612026,9.31536067 4.26396495,9.23544182 4.33595797,9.14033178 C4.39474126,9.06305487 4.45154309,8.98247553 4.42842606,8.87283478 C4.3537911,8.52343747 4.28311905,7.97446995 4.20650263,7.62507264 C4.18999047,7.55043767 4.16357102,7.48042611 4.24547133,7.42692672 C4.25207619,7.42230331 4.25603911,7.4130565 4.26000203,7.40579115 C4.32208775,7.29416895 4.38615493,7.18386772 4.44295676,7.07026406 C4.45880844,7.03723974 4.46277136,6.98968472 4.45352455,6.95401845 C4.42116071,6.83645187 4.33595797,6.74992815 4.2467923,6.67661416 C4.21244701,6.64821325 4.14045399,6.66406492 4.08497313,6.66208346 C4.05459076,6.660102 4.02288741,6.66142297 3.99184455,6.66142297 Z" id="形状" fill="url(#linearGradient-3)"></path>
+                            <path d="M4,5.16666667 C5.23711784,5.16666667 6.24,3.62199775 6.24,2.33333333 C6.24,1.04466891 5.23711784,1.77635684e-15 4,1.77635684e-15 C2.76288216,1.77635684e-15 1.76,1.04466891 1.76,2.33333333 C1.76,3.62199775 2.76288216,5.16666667 4,5.16666667 Z" id="路径" fill="#FFFFFF"></path>
+                        </g>
+                    </g>
+                    <g id="编组" opacity="0.8" transform="translate(22.000000, 1.000000)" fill="#FFFFFF" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal">
+                        <text id="助理">
+                            <tspan x="0" y="13">助理</tspan>
+                        </text>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/lib/components/photo-card/images/back-manager.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="88px" height="20px" viewBox="0 0 88 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>后台管理员</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#9EC2FF" offset="0%"></stop>
+            <stop stop-color="#76A9FF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="-2.48949813e-15%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#2879FF" offset="0%"></stop>
+            <stop stop-color="#0E69FE" offset="100%"></stop>
+        </linearGradient>
+        <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="36.4793396%" id="radialGradient-3">
+            <stop stop-color="#2879FF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" offset="100%"></stop>
+        </radialGradient>
+    </defs>
+    <g id="OKR" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="公司全部/隔级-交互规范" transform="translate(-1356.000000, -3316.000000)" fill-rule="nonzero">
+            <g id="角色" transform="translate(1356.000000, 3208.000000)">
+                <g id="后台管理员" transform="translate(0.000000, 108.000000)">
+                    <rect id="矩形" fill="#2879FF" x="3" y="1" width="85" height="18" rx="9"></rect>
+                    <g id="编组-25">
+                        <polygon id="多边形" fill="url(#linearGradient-1)" points="9 0 17.660254 5 17.660254 15 9 20 0.33974596 15 0.33974596 5"></polygon>
+                        <polygon id="多边形" fill="url(#linearGradient-2)" points="9 1.81818182 16.2168784 5.90909091 16.2168784 14.0909091 9 18.1818182 1.78312164 14.0909091 1.78312164 5.90909091"></polygon>
+                        <g id="设置" transform="translate(4.500000, 5.500000)">
+                            <path d="M8.26875,4.5 C8.26875,3.99375 8.55,3.54375 9,3.375 C8.775,2.5875 8.325,1.85625 7.7625,1.29375 C7.36875,1.575 6.80625,1.63125 6.35625,1.40625 C5.90625,1.125 5.68125,0.675 5.7375,0.16875 C5.34375,0.05625 4.89375,0 4.5,0 C4.05,0 3.65625,0.05625 3.2625,0.16875 C3.31875,0.61875 3.09375,1.125 2.64375,1.40625 C2.19375,1.6875 1.63125,1.63125 1.2375,1.29375 C0.675,1.85625 0.225,2.5875 0,3.375 C0.45,3.54375 0.73125,3.99375 0.73125,4.5 C0.73125,5.00625 0.45,5.45625 0,5.625 C0.225,6.4125 0.675,7.14375 1.2375,7.70625 C1.63125,7.425 2.19375,7.36875 2.64375,7.59375 C3.09375,7.875 3.31875,8.325 3.2625,8.83125 C3.65625,8.94375 4.10625,9 4.5,9 C4.95,9 5.34375,8.94375 5.7375,8.83125 C5.68125,8.38125 5.90625,7.875 6.35625,7.59375 C6.80625,7.3125 7.36875,7.36875 7.7625,7.70625 C8.325,7.14375 8.775,6.4125 9,5.625 C8.55,5.45625 8.26875,5.00625 8.26875,4.5 L8.26875,4.5 Z M4.5,6.35625 C3.43125,6.35625 2.5875,5.5125 2.5875,4.5 C2.5875,3.4875 3.43125,2.64375 4.5,2.64375 C5.56875,2.64375 6.4125,3.4875 6.4125,4.5 C6.4125,5.5125 5.56875,6.35625 4.5,6.35625 Z" id="形状" fill="url(#radialGradient-3)"></path>
+                            <path d="M4.5,5.625 C5.12132034,5.625 5.625,5.12132034 5.625,4.5 C5.625,3.87867966 5.12132034,3.375 4.5,3.375 C3.87867966,3.375 3.375,3.87867966 3.375,4.5 C3.375,5.12132034 3.87867966,5.625 4.5,5.625 Z" id="路径" fill="#FFFFFF"></path>
+                        </g>
+                    </g>
+                    <g id="编组" opacity="0.8" transform="translate(22.000000, 1.000000)" fill="#FFFFFF" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal">
+                        <text id="后台管理员">
+                            <tspan x="0" y="13">后台管理员</tspan>
+                        </text>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/lib/components/photo-card/images/boss.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="56px" height="20px" viewBox="0 0 56 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Boss</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FFEEC7" offset="0%"></stop>
+            <stop stop-color="#FFD896" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#FFCA3D" offset="0%"></stop>
+            <stop stop-color="#E2A916" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="41.2046279%" id="linearGradient-3">
+            <stop stop-color="#F0B929" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="OKR" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="公司全部/隔级-交互规范" transform="translate(-1356.000000, -3208.000000)" fill-rule="nonzero">
+            <g id="Boss" transform="translate(1356.000000, 3208.000000)">
+                <rect id="矩形" fill="#F2B20F" x="3" y="1" width="53" height="18" rx="9"></rect>
+                <g id="编组-25">
+                    <polygon id="多边形" fill="url(#linearGradient-1)" points="9 0 17.660254 5 17.660254 15 9 20 0.33974596 15 0.33974596 5"></polygon>
+                    <polygon id="多边形" fill="url(#linearGradient-2)" points="9 1.81818182 16.2168784 5.90909091 16.2168784 14.0909091 9 18.1818182 1.78312164 14.0909091 1.78312164 5.90909091"></polygon>
+                    <g id="编组-29" transform="translate(5.000000, 5.005988)">
+                        <path d="M3.88814818,9.78562699 C3.68141594,9.77439872 3.29833383,9.75788656 2.91657268,9.73212759 C2.56255197,9.70835008 2.20853126,9.67928868 1.85583152,9.6442829 C1.35452234,9.5960674 0.85651559,9.52209292 0.364453219,9.41377315 C0.352564463,9.4111312 0.341336194,9.40584731 0.329447439,9.40386585 C0.178196053,9.3774464 0.106863521,9.27837343 0.0711972551,9.13636886 C-0.00145624941,8.84641533 -0.0133450047,8.35424963 0.0124139651,8.05835172 C0.0262841796,7.89851401 0.0460987717,7.73933679 0.067894823,7.57949908 C0.107524007,7.29416895 0.266040744,7.09206011 0.507118282,6.9421297 C0.772633816,6.77766858 1.06655027,6.68982389 1.36178769,6.60528163 C1.58503209,6.54121445 1.81422088,6.49431991 2.02095312,6.3833582 C2.23429023,6.26777308 2.43904101,6.1402992 2.58698997,5.94215328 C2.67351369,5.82590767 2.96544868,5.2466611 2.91657268,5.09937263 C2.88949274,5.01615134 5.00418303,4.911134 4.97380066,5.09937263 C4.90180764,5.54321949 5.37556357,6.07755299 5.77449736,6.28494572 C6.02746365,6.41638252 6.30024453,6.49167797 6.57170444,6.57357828 C6.8312756,6.65085519 7.09216773,6.72416918 7.33456624,6.84768014 C7.47194741,6.9176917 7.60206324,7.0002525 7.70906203,7.11385616 C7.84710369,7.25916317 7.91381282,7.43815498 7.93957179,7.6316775 C7.96599124,7.82387904 7.99108973,8.01674107 7.99769459,8.21026359 C8.0069414,8.46058794 7.99108973,8.90784056 7.8999426,9.14561567 C7.86757877,9.23081841 7.80879548,9.28828073 7.72557419,9.323947 C7.53271216,9.4065078 7.32928235,9.44943941 7.12519205,9.4890686 C6.64964184,9.58021572 6.16946822,9.64031998 5.68731315,9.69117744 C5.14769576,9.74731878 4.60609691,9.77638018 3.88814818,9.78562699 Z M3.99184455,6.66142297 C3.92183299,6.66142297 3.85182143,6.660102 3.78180987,6.66274395 C3.76463723,6.66274395 3.74019923,6.66802784 3.73029193,6.67925611 C3.67216913,6.75521204 3.61404633,6.83116798 3.56318887,6.91306829 C3.5473372,6.93882726 3.54073234,6.9857218 3.55328158,7.01148077 C3.6252746,7.15876924 3.70519345,7.30077381 3.7804889,7.44674131 C3.79237766,7.46853736 3.80228495,7.49825925 3.79700106,7.52137627 C3.73557583,7.82255807 3.66160135,8.12109793 3.60942292,8.4236007 C3.54535574,8.79611503 3.54139282,8.94350683 3.72500804,9.19845458 C3.78973571,9.25855884 3.848519,9.31866311 3.91324667,9.37084153 C3.96146218,9.40981023 4.01694303,9.40518682 4.07044243,9.37480445 C4.17612026,9.31536067 4.26396495,9.23544182 4.33595797,9.14033178 C4.39474126,9.06305487 4.45154309,8.98247553 4.42842606,8.87283478 C4.3537911,8.52343747 4.28311905,7.97446995 4.20650263,7.62507264 C4.18999047,7.55043767 4.16357102,7.48042611 4.24547133,7.42692672 C4.25207619,7.42230331 4.25603911,7.4130565 4.26000203,7.40579115 C4.32208775,7.29416895 4.38615493,7.18386772 4.44295676,7.07026406 C4.45880844,7.03723974 4.46277136,6.98968472 4.45352455,6.95401845 C4.42116071,6.83645187 4.33595797,6.74992815 4.2467923,6.67661416 C4.21244701,6.64821325 4.14045399,6.66406492 4.08497313,6.66208346 C4.05459076,6.660102 4.02288741,6.66142297 3.99184455,6.66142297 Z" id="形状" fill="url(#linearGradient-3)"></path>
+                        <path d="M4,5.16666667 C5.23711784,5.16666667 6.24,3.62199775 6.24,2.33333333 C6.24,1.04466891 5.23711784,1.77635684e-15 4,1.77635684e-15 C2.76288216,1.77635684e-15 1.76,1.04466891 1.76,2.33333333 C1.76,3.62199775 2.76288216,5.16666667 4,5.16666667 Z" id="路径" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="编组" opacity="0.8" transform="translate(22.000000, 1.000000)" fill="#FFFFFF" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal">
+                    <text id="Boss">
+                        <tspan x="0" y="13">Boss</tspan>
+                    </text>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>