@titaui/pc 1.10.5 → 1.10.6

package/lib/components/communication/CommunicationRecord.js

@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactTooltip = _interopRequireDefault(require("react-tooltip"));
 
-var _avatar = _interopRequireDefault(require("../../components-v1/avatar"));
+var _avatar = _interopRequireDefault(require("../avatar"));
 
 var _Portals = _interopRequireDefault(require("../../components-v1/portals/Portals"));
 
@@ -64,7 +64,11 @@ var CommunicationRecord = function CommunicationRecord(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_style.CommunicationItem, {
     className: className
   }, /*#__PURE__*/_react["default"].createElement(_avatar["default"], {
-    size: _avatar["default"].size(7),
+    size: {
+      width: 28,
+      fontSize: 14,
+      textNum: 1
+    },
     name: communicationTrack.publishUser.name,
     src: communicationTrack.publishUser.avatar.small,
     color: communicationTrack.publishUser.avatar.color,
@@ -78,8 +82,10 @@ var CommunicationRecord = function CommunicationRecord(_ref) {
     userName: communicationTrack.publishUser.name,
     userId: communicationTrack.publishUser.userId
   }), /*#__PURE__*/_react["default"].createElement("span", {
-    className: "".concat(prefix, "__communication-colon")
-  }, "\uFF1A")) : /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_ConvertUserName["default"], {
+    className: "".concat(prefix, "__communication-time")
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(prefix, "__communication-time-point")
+  }, "\xB7"), communicationTrack.createDate)) : /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_ConvertUserName["default"], {
     userName: communicationTrack.publishUser.name,
     userId: communicationTrack.publishUser.userId
   }), /*#__PURE__*/_react["default"].createElement("span", {
@@ -88,25 +94,25 @@ var CommunicationRecord = function CommunicationRecord(_ref) {
     userName: communicationTrack.parentUser.name,
     userId: communicationTrack.parentUser.userId
   }), /*#__PURE__*/_react["default"].createElement("span", {
-    className: "".concat(prefix, "__communication-colon")
-  }, "\uFF1A"), /*#__PURE__*/_react["default"].createElement(_Portals["default"], null, /*#__PURE__*/_react["default"].createElement(_reactTooltip["default"], {
+    className: "".concat(prefix, "__communication-time")
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(prefix, "__communication-time-point")
+  }, "\xB7"), communicationTrack.createDate), /*#__PURE__*/_react["default"].createElement(_Portals["default"], null, /*#__PURE__*/_react["default"].createElement(_reactTooltip["default"], {
     html: true,
     className: "tt-react-tooltip",
     place: "top",
     type: "dark",
     effect: "solid"
-  }))), /*#__PURE__*/_react["default"].createElement("span", {
-    className: "".concat(prefix, "__communication-content"),
-    ref: contentRef
-  }, (0, _openData.parseTag)(communicationTrack.content.trim()))), communicationTrack.attachments && /*#__PURE__*/_react["default"].createElement("div", {
+  })))), communicationTrack.attachments && /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(prefix, "__communication-attachments")
   }, /*#__PURE__*/_react["default"].createElement(_fileList["default"], {
     data: communicationTrack.attachments
   })), /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(prefix, "__communication-bottom")
   }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "".concat(prefix, "__communication-time")
-  }, communicationTrack.createDate), /*#__PURE__*/_react["default"].createElement(_style.CommunicationActionbar, {
+    className: "".concat(prefix, "__communication-content"),
+    ref: contentRef
+  }, (0, _openData.parseTag)(communicationTrack.content.trim())), /*#__PURE__*/_react["default"].createElement(_style.CommunicationActionbar, {
     className: "communication__actionbar"
   }, /*#__PURE__*/_react["default"].createElement(_style.ActionbarList, null, /*#__PURE__*/_react["default"].createElement(_style.ActionbarItem, {
     onMouseDown: function onMouseDown(event) {

package/lib/components/communication/index.css

@@ -5,17 +5,11 @@
   margin: 0 8px;
 }
 
-.titaui-communication__communication-colon {
-  font-size: 14px;
-  font-weight: 600;
-  color: #3f4755;
-  line-height: 22px;
-}
-
 .titaui-communication__communication-content {
   font-size: 14px;
   color: #6f7886;
   line-height: 22px;
+  position: relative;
 }
 
 .titaui-communication__communication-content .highlight {
@@ -47,9 +41,14 @@
 
 .titaui-communication__communication-time {
   font-size: 12px;
-  color: #89919f;
+  font-weight: 400;
+  color: #89919F;
   line-height: 18px;
-  margin-top: 4px;
+  margin-left: 6px;
+}
+
+.titaui-communication__communication-time-point {
+  margin-right: 4px;
 }
 
 .titaui-communication__communication-bottom {
@@ -68,8 +67,48 @@
   display: flex;
   align-items: center;
   user-select: none;
+  color: #2879ff;
 }
 
 .titaui-communication__communication-total-icon {
   margin-left: 4px;
+  margin-top: -2px;
+}
+
+.titaui-communication__reply-container-text {
+  margin-right: 4px;
+}
+
+.titaui-communication__reply-container--show-user {
+  margin-left: 40px;
+}
+
+.titaui-communication__reply-default-input {
+  display: flex;
+}
+
+.titaui-communication__reply-default-input-text {
+  flex: 1;
+  cursor: text;
+  font-size: 14px;
+  color: #BFC7D5;
+  line-height: 22px;
+  margin-left: 12px;
+  height: 32px;
+  border-radius: 16px;
+  background: rgba(240, 244, 250, 0.6);
+  border-radius: 16px;
+  border: 1px solid #E9ECF0;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding-left: 12px;
+}
+
+.titaui-communication__reply-default-input-avatar {
+  height: 32px;
+}
+
+.titaui-communication__reply-default-input-avatar .titaui-pc-avator-container {
+  display: inline-flex;
 }

package/lib/components/communication/index.js

@@ -19,12 +19,16 @@ var _CommunicationRecord = _interopRequireDefault(require("./CommunicationRecord
 
 var _requestV = require("../../utils/request-v1");
 
+var _bsGlobal = require("../../utils/bs-global");
+
 var _style = require("./style");
 
 var _openData = require("../../utils/open-data");
 
 var _getLocale = require("../../utils/getLocale");
 
+var _avatar = _interopRequireDefault(require("../avatar"));
+
 require("./index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -33,6 +37,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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -91,7 +97,7 @@ var Communication = /*#__PURE__*/function (_PureComponent) {
           _this.setState({
             communicationTrackList: data.comments ? data.comments : [],
             communicationTrackTotal: data.total,
-            okrCommentFeedId: commentType == 2 ? res.Data.feedId : ""
+            okrCommentFeedId: commentType === 2 ? res.Data.feedId : ""
           });
         } else {
           _this.setState({
@@ -162,7 +168,8 @@ var Communication = /*#__PURE__*/function (_PureComponent) {
           isShowReplyToUser: true,
           replyUser: communicationTrackList[index].publishUser.name,
           replyUserId: communicationTrackList[index].publishUser.userId,
-          replyUserCommentId: communicationTrackList[index].commentId
+          replyUserCommentId: communicationTrackList[index].commentId,
+          isShowDefaultInput: false
         });
       } else if (actionType === "praise") {
         // 沟通里的点赞
@@ -242,14 +249,15 @@ var Communication = /*#__PURE__*/function (_PureComponent) {
           submitStatus: 2
         });
 
-        var url = commentType == 1 ? (0, _requestV.getApiUrl2)("comment/Add") : (0, _requestV.getApiUrl)("okr/cycle/addComment?objId=".concat(okrFeedParams && okrFeedParams.objId, "&objType=").concat(okrFeedParams && okrFeedParams.objType, "&cycleType=").concat(okrFeedParams && okrFeedParams.cycleType, "&yqmNum=").concat(okrFeedParams && okrFeedParams.yqmNum, "&annualNum=").concat(okrFeedParams && okrFeedParams.annualNum));
+        var url = commentType === 1 ? (0, _requestV.getApiUrl2)("comment/Add") : (0, _requestV.getApiUrl)("okr/cycle/addComment?objId=".concat(okrFeedParams && okrFeedParams.objId, "&objType=").concat(okrFeedParams && okrFeedParams.objType, "&cycleType=").concat(okrFeedParams && okrFeedParams.cycleType, "&yqmNum=").concat(okrFeedParams && okrFeedParams.yqmNum, "&annualNum=").concat(okrFeedParams && okrFeedParams.annualNum));
         (0, _requestV.taker)(url, "POST", sentData).then(function (res) {
           if (res.Code === 1) {
             isShowAllCommunicationRecord ? _this.getFeedInfo(feedId, communicationTrackTotal + 1) : _this.getFeedInfo(feedId, commentCount);
 
             _this.setState({
               submitStatus: 1,
-              isShowReplyToUser: false
+              isShowReplyToUser: false,
+              isShowDefaultInput: true
             });
           } else {
             _this.setState({
@@ -271,11 +279,21 @@ var Communication = /*#__PURE__*/function (_PureComponent) {
       });
     };
 
-    var comments = props.usePropsComment ? props.communication || [] : [];
+    _this.handleShowMblog = function () {
+      _this.setState({
+        isShowDefaultInput: false
+      });
+    };
+
+    var showDefaultInput = props.showDefaultInput,
+        usePropsComment = props.usePropsComment,
+        communication = props.communication;
+    var comments = usePropsComment ? communication || [] : [];
+    var communicationLength = props.totalCommunicationNum || comments.length;
     _this.state = {
       communicationTrackList: comments,
       // 沟通记录
-      communicationTrackTotal: props.totalCommunicationNum || comments.length,
+      communicationTrackTotal: communicationLength,
       // 沟通记录条数
       isShowAllCommunicationRecord: false,
       // 是否显示所有记录
@@ -290,7 +308,8 @@ var Communication = /*#__PURE__*/function (_PureComponent) {
       // 点赞记录
       praiseObjId: "",
       isShowPraiseRecordPop: false,
-      okrCommentFeedId: ""
+      okrCommentFeedId: "",
+      isShowDefaultInput: showDefaultInput && communicationLength !== 0 ? true : false
     };
     return _this;
   }
@@ -304,14 +323,14 @@ var Communication = /*#__PURE__*/function (_PureComponent) {
           commentType = _this$props5.commentType,
           usePropsComment = _this$props5.usePropsComment;
 
-      if ((feedId || commentType == 2) && !usePropsComment) {
+      if ((feedId || commentType === 2) && !usePropsComment) {
         this.getFeedInfo(feedId, commentCount);
       }
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      if (prevProps.feedId != this.props.feedId || prevProps.okrFeedParams != this.props.okrFeedParams || prevProps.usePropsComment != this.props.usePropsComment) {
+      if (prevProps.feedId !== this.props.feedId || prevProps.okrFeedParams !== this.props.okrFeedParams || prevProps.usePropsComment !== this.props.usePropsComment) {
         var _this$props6 = this.props,
             feedId = _this$props6.feedId,
             commentCount = _this$props6.commentCount;
@@ -339,7 +358,8 @@ var Communication = /*#__PURE__*/function (_PureComponent) {
           isShowReplyToUser = _this$state4.isShowReplyToUser,
           submitStatus = _this$state4.submitStatus,
           isShowPraiseRecordPop = _this$state4.isShowPraiseRecordPop,
-          praiseObjId = _this$state4.praiseObjId;
+          praiseObjId = _this$state4.praiseObjId,
+          isShowDefaultInput = _this$state4.isShowDefaultInput;
       var _this$props7 = this.props,
           feedId = _this$props7.feedId,
           className = _this$props7.className,
@@ -356,21 +376,24 @@ var Communication = /*#__PURE__*/function (_PureComponent) {
           _this$props7$highLigh = _this$props7.highLightKeyWord,
           highLightKeyWord = _this$props7$highLigh === void 0 ? "" : _this$props7$highLigh,
           _this$props7$autoFocu = _this$props7.autoFocus,
-          autoFocus = _this$props7$autoFocu === void 0 ? false : _this$props7$autoFocu;
+          autoFocus = _this$props7$autoFocu === void 0 ? false : _this$props7$autoFocu,
+          _this$props7$showUser = _this$props7.showUser,
+          showUser = _this$props7$showUser === void 0 ? false : _this$props7$showUser;
+      var user = (0, _bsGlobal.getUserInfo)();
       return /*#__PURE__*/_react["default"].createElement(_style.CommunicationWrapper, {
         className: "communcation-wrapper ".concat(className)
-      }, /*#__PURE__*/_react["default"].createElement("div", null, communicationTrackTotal > 0 && /*#__PURE__*/_react["default"].createElement(_style.CommunicationRecordTotal, null, /*#__PURE__*/_react["default"].createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement("div", null, communicationTrackTotal > 3 && /*#__PURE__*/_react["default"].createElement(_style.CommunicationRecordTotal, null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(prefix, "__communication-total"),
         onMouseDown: function onMouseDown() {
           return _this2.handlerSwitchShowRecord();
         }
       }, (0, _getLocale.getLocale)("Mod_Allcommu"), "\xA0", /*#__PURE__*/_react["default"].createElement("span", null, communicationTrackTotal), communicationTrackTotal > commentCount && /*#__PURE__*/_react["default"].createElement("i", {
         className: (0, _classnames["default"])("".concat(prefix, "__communication-total-icon"), {
-          "tu-icon-APP-xi": isShowAllCommunicationRecord,
-          "tu-icon-arrow-down1": !isShowAllCommunicationRecord
+          "tu-icon-APP-xi": !isShowAllCommunicationRecord,
+          "tu-icon-arrow-down1": isShowAllCommunicationRecord
         })
       }))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(prefix, "__communication-list")
+        className: (0, _classnames["default"])(_defineProperty({}, "".concat(prefix, "__communication-list"), communicationTrackList.length > 0))
       }, communicationTrackList.length > 0 && communicationTrackList.map(function (item, index) {
         var length = communicationTrackList.length;
 
@@ -390,16 +413,14 @@ var Communication = /*#__PURE__*/function (_PureComponent) {
           }
         });
       }))), !useCustomMblog && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "communication__reply__cintainer"
-      }, /*#__PURE__*/_react["default"].createElement(_style.ReplyToUser, {
+        className: "".concat(prefix, "__reply-container")
+      }, isShowReplyToUser && /*#__PURE__*/_react["default"].createElement(_style.ReplyToUser, {
         height: isShowReplyToUser ? "auto" : "0",
-        padding: isShowReplyToUser ? "3px 0" : "0"
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        style: {
-          position: "relative",
-          top: "2px"
-        }
-      }, (0, _getLocale.getLocale)("Mod_Reply")), /*#__PURE__*/_react["default"].createElement(_style.ReplyUser, null, /*#__PURE__*/_react["default"].createElement("span", {
+        padding: isShowReplyToUser ? "4px 0" : "0",
+        className: (0, _classnames["default"])(_defineProperty({}, "".concat(prefix, "__reply-container--show-user"), showUser))
+      }, /*#__PURE__*/_react["default"].createElement(_style.ReplyUser, null, /*#__PURE__*/_react["default"].createElement("span", {
+        className: "".concat(prefix, "__reply-container-text")
+      }, (0, _getLocale.getLocale)("Mod_Reply")), /*#__PURE__*/_react["default"].createElement("span", {
         className: "name"
       }, /*#__PURE__*/_react["default"].createElement(_openData.OpenUserName, {
         name: replyUser,
@@ -407,7 +428,23 @@ var Communication = /*#__PURE__*/function (_PureComponent) {
       })), /*#__PURE__*/_react["default"].createElement("span", {
         className: "tu-icon-cross",
         onMouseDown: this.handlerCancelReplyUser
-      }))), /*#__PURE__*/_react["default"].createElement(_mblog["default"], {
+      }))), isShowDefaultInput && !isShowReplyToUser && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "".concat(prefix, "__reply-default-input")
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        className: "".concat(prefix, "__reply-default-input-avatar")
+      }, /*#__PURE__*/_react["default"].createElement(_avatar["default"], {
+        size: {
+          width: 28,
+          textNum: 1,
+          fontSize: 14
+        },
+        name: user.Name,
+        color: user.UserAvatar.Color,
+        src: user.UserAvatar.Medium
+      })), /*#__PURE__*/_react["default"].createElement("span", {
+        onClick: this.handleShowMblog,
+        className: "".concat(prefix, "__reply-default-input-text")
+      }, "\u8F93\u5165\u6C9F\u901A\u5185\u5BB9")), !isShowDefaultInput && /*#__PURE__*/_react["default"].createElement(_mblog["default"], {
         setTextareaRef: setTextareaRef || function () {},
         isHasPlaceholder: true,
         placeholderText: (0, _getLocale.getLocale)("Mod_contentofyour"),
@@ -424,7 +461,8 @@ var Communication = /*#__PURE__*/function (_PureComponent) {
         autoResizing: false,
         onMblogSubmit: function onMblogSubmit(submitType, sentData) {
           return _this2.handlerReply(submitType, sentData);
-        }
+        },
+        showUser: showUser
       })), isShowPraiseRecordPop && /*#__PURE__*/_react["default"].createElement(_praiseRecord["default"], {
         objId: praiseObjId,
         objType: 19,
@@ -441,7 +479,8 @@ var Communication = /*#__PURE__*/function (_PureComponent) {
   return Communication;
 }(_react.PureComponent);
 
-exports["default"] = Communication;
 Communication.defaultProps = {
   commentType: 1
-};
+};
+var _default = Communication;
+exports["default"] = _default;

package/lib/components/communication/style.js

@@ -7,6 +7,8 @@ exports.ReplyUser = exports.ReplyToUser = exports.ConfirmWrapper = exports.Confi
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _praiseBg = _interopRequireDefault(require("./praise-bg.png"));
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -17,7 +19,7 @@ var CommunicationWrapper = _styledComponents["default"].div(_templateObject || (
 
 exports.CommunicationWrapper = CommunicationWrapper;
 
-var CommunicationRecordTotal = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-bottom: 8px;\n  font-size: 12px;\n  color: #8f9ca6;\n  display: inline-block;\n  cursor: pointer;\n\n  &:hover {\n    color: #2879ff;\n  }\n"])));
+var CommunicationRecordTotal = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-bottom: 8px;\n  font-size: 13px;\n  line-height: 22px;\n  color: #8f9ca6;\n  display: inline-block;\n  cursor: pointer;\n\n  &:hover {\n    color: #2879ff;\n  }\n"])));
 
 exports.CommunicationRecordTotal = CommunicationRecordTotal;
 
@@ -29,7 +31,7 @@ var ReplyToUser = _styledComponents["default"].div(_templateObject3 || (_templat
 
 exports.ReplyToUser = ReplyToUser;
 
-var ReplyUser = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([void 0], ["\n  min-height: 20px;\n  margin-left: 10px;\n  padding: 2px 8px;\n  line-height: 20px;\n  font-family: '\\5B8B\\4F53';\n  border-radius: 12px;\n  display: inline-block;\n  color: #647481;\n  background-color: #f5f8fa;\n  vertical-align: middle;\n  word-break: break-all;\n  cursor: pointer;\n\n  &:hover {\n    color: #ff5b5b;\n    .tu-icon-cross {\n      color: #f04d4d;\n    }\n  }\n\n  .tu-icon-cross {\n    margin-left: 5px;\n    color: #a9b8bf;\n  }\n"])));
+var ReplyUser = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: 2px 8px;\n  line-height: 20px;\n  border-radius: 12px;\n  display: inline-flex;\n  align-items: center;\n  color: #89919F;\n  background-color: #f5f8fa;\n  word-break: break-all;\n\n  .tu-icon-cross {\n    margin-left: 4px;\n    font-size: 16px;\n    color: #89919F;\n    cursor: pointer;\n    &:hover {\n      color: #f05e5e;\n    }\n  }\n"])));
 
 exports.ReplyUser = ReplyUser;
 
@@ -37,7 +39,7 @@ var CommunicationItem = _styledComponents["default"].div(_templateObject5 || (_t
 
 exports.CommunicationItem = CommunicationItem;
 
-var CommunicationDetail = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: calc(100% - 35px);\n  margin-top: 2px;\n  margin-left: 8px;\n  display: flex;\n  flex-direction: column;\n\n  p {\n    line-height: 17px;\n  }\n"])));
+var CommunicationDetail = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: calc(100% - 35px);\n  margin-top: 2px;\n  margin-left: 12px;\n  display: flex;\n  flex-direction: column;\n\n  p {\n    line-height: 17px;\n  }\n"])));
 
 exports.CommunicationDetail = CommunicationDetail;
 
@@ -45,7 +47,7 @@ var CommunicationContent = _styledComponents["default"].p(_templateObject7 || (_
 
 exports.CommunicationContent = CommunicationContent;
 
-var CommunicationActionbar = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: none;\n  position: absolute;\n  right: 0;\n"])));
+var CommunicationActionbar = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: none;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n"])));
 
 exports.CommunicationActionbar = CommunicationActionbar;
 
@@ -81,7 +83,7 @@ var AttachmentAction = _styledComponents["default"].div(_templateObject16 || (_t
 
 exports.AttachmentAction = AttachmentAction;
 
-var ConfirmWrapper = _styledComponents["default"].div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  min-width: 300px;\n  border-radius: 2px;\n  box-shadow: 0 0 4px 0 rgba(0,0,0,0.20);\n  background-color: #ffffff;\n  \n  &.bg {\n    background: url(", ") no-repeat 0 0 / 101% 105%;\n    box-shadow: 0 6px 15px 0 rgba(0,0,0,0.15);\n  }\n"])), require("./praise-bg.png"));
+var ConfirmWrapper = _styledComponents["default"].div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  min-width: 300px;\n  border-radius: 2px;\n  box-shadow: 0 0 4px 0 rgba(0,0,0,0.20);\n  background-color: #ffffff;\n  \n  &.bg {\n    background: url(", ") no-repeat 0 0 / 101% 105%;\n    box-shadow: 0 6px 15px 0 rgba(0,0,0,0.15);\n  }\n"])), _praiseBg["default"]);
 
 exports.ConfirmWrapper = ConfirmWrapper;
 

package/lib/components/dynamic/components/obj-status/index.css

@@ -1,22 +1,5 @@
 .titaui-dynamic-obj-status {
   display: inline-block;
-  width: 18px;
-  height: 18px;
-  min-width: 18px;
-}
-
-.titaui-dynamic-obj-status--delay {
-  background: url("../../img/dynamic-delay.svg");
-}
-
-.titaui-dynamic-obj-status--normal {
-  background: url("../../img/dynamic-normal.svg");
-}
-
-.titaui-dynamic-obj-status--risk {
-  background: url("../../img/dynamic-risk.svg");
-}
-
-.titaui-dynamic-obj-status--end {
-  background: url("../../img/dynamic-end.svg");
+  font-size: 14px;
+  line-height: 24px;
 }

package/lib/components/dynamic/components/obj-status/index.js

@@ -11,17 +11,13 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _util = require("../../util");
 
+var _utils = require("./utils");
+
 require("./index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var prefix = "titaui-dynamic-obj-status";
-var StateIconMapping = {
-  delay: "".concat(prefix, "--delay"),
-  normal: "".concat(prefix, "--normal"),
-  risk: "".concat(prefix, "--risk"),
-  end: "".concat(prefix, "--end")
-};
 
 var DynamicObjStatus = function DynamicObjStatus(_ref) {
   var _ref$oStatus = _ref.oStatus,
@@ -30,8 +26,11 @@ var DynamicObjStatus = function DynamicObjStatus(_ref) {
       riskLevel = _ref$riskLevel === void 0 ? 1 : _ref$riskLevel,
       extraClass = _ref.extraClass;
   return /*#__PURE__*/_react["default"].createElement("span", {
-    className: (0, _classnames["default"])(extraClass, prefix, StateIconMapping[(0, _util.getProgressState)(oStatus, riskLevel)])
-  });
+    className: (0, _classnames["default"])(extraClass, prefix),
+    style: {
+      color: (0, _utils.getStatusColor)((0, _util.getProgressState)(oStatus, riskLevel))
+    }
+  }, (0, _utils.getStatusTextMapping)((0, _util.getProgressState)(oStatus, riskLevel)));
 };
 
 var _default = DynamicObjStatus;

package/lib/components/dynamic/components/obj-status/utils.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStatusTextMapping = exports.getStatusColor = exports["default"] = void 0;
+
+var _getLocale = require("../../../../utils/getLocale");
+
+var getStatusTextMapping = function getStatusTextMapping(status) {
+  var statusMapText = {
+    delay: (0, _getLocale.getLocale)("OKR_MyO_E_From_Delayed"),
+    normal: (0, _getLocale.getLocale)("Pro_page_Mil_Normal"),
+    risk: (0, _getLocale.getLocale)("Pro_page_Mil_Existingrisk"),
+    end: (0, _getLocale.getLocale)("OKR_MyO_E_From_Completed")
+  };
+  return statusMapText[status];
+};
+
+exports.getStatusTextMapping = getStatusTextMapping;
+
+var getStatusColor = function getStatusColor(status) {
+  var statusMapText = {
+    delay: "#F05E5E",
+    normal: "#2879ff",
+    risk: "#F6BD16",
+    end: "BFC7D5"
+  };
+  return statusMapText[status];
+};
+
+exports.getStatusColor = getStatusColor;
+var _default = {
+  getStatusTextMapping: getStatusTextMapping,
+  getStatusColor: getStatusColor
+};
+exports["default"] = _default;

package/lib/components/dynamic/components/percent/index.css

@@ -1,5 +1,5 @@
 .titaui-dynamic-percent {
-  font-size: 16px;
+  font-size: 20px;
   font-weight: 600;
   color: #3f4755;
   line-height: 24px;

package/lib/components/dynamic/components/title/index.css

@@ -1,31 +1,37 @@
 .titaui-dynamic-title {
   display: flex;
   overflow: hidden;
-  flex: 1;
+  word-break: keep-all;
+  white-space: nowrap;
+  font-size: 13px;
+  line-height: 18px;
+  border-radius: 18px;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  padding-left: 2px;
+  padding-right: 8px;
+}
+
+.titaui-dynamic-title__type {
+  color: #ffffff;
+  border-radius: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 6px;
+  padding: 1px 6px;
 }
 
 .titaui-dynamic-title__content {
   display: flex;
-  height: 36px;
   overflow: hidden;
   box-sizing: border-box;
-  background: rgba(240, 244, 250, 0.5);
-  border-radius: 18px 18px 18px 1px;
   word-break: keep-all;
   white-space: nowrap;
-  padding: 7px 12px;
-  font-size: 14px;
-  line-height: 22px;
-  color: #3f4755;
-  font-weight: 600;
   z-index: 2;
 }
 
-.titaui-dynamic-title__content-symbol {
-  color: #2879ff;
-  margin-right: 4px;
-}
-
 .titaui-dynamic-title__content-text {
   flex: 1;
   overflow: hidden;
@@ -33,12 +39,5 @@
 }
 
 .titaui-dynamic-title__content-text:hover {
-  color: #2879ff !important;
-}
-
-.titaui-dynamic-title__fill-empty {
-  flex: 1;
-  background: rgba(240, 244, 250, 0.5);
-  border-radius: 0 18px 18px 0;
-  margin-left: -18px;
+  opacity: 0.6;
 }

package/lib/components/dynamic/components/title/index.js

@@ -28,23 +28,37 @@ var prefix = "titaui-dynamic-title";
 var DynamicTitle = function DynamicTitle(_ref) {
   var content = _ref.content,
       onClickTitle = _ref.onClickTitle,
-      suffixContent = _ref.suffixContent;
+      type = _ref.type,
+      typeBgColor = _ref.typeBgColor,
+      titleBgColor = _ref.titleBgColor,
+      contentColor = _ref.contentColor;
 
   var _useContext = (0, _react.useContext)(_context.SearchKeyContext),
       searchKeyWord = _useContext.searchKeyWord;
 
   var onTitleClick = function onTitleClick() {
-    onClickTitle && onClickTitle();
+    if (onClickTitle) {
+      onClickTitle();
+    }
   };
 
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: prefix
+    className: prefix,
+    style: {
+      backgroundColor: titleBgColor
+    }
   }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(prefix, "__type"),
+    style: {
+      backgroundColor: typeBgColor
+    }
+  }, type), /*#__PURE__*/_react["default"].createElement("span", {
     className: "".concat(prefix, "__content")
   }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "".concat(prefix, "__content-symbol")
-  }, "#"), /*#__PURE__*/_react["default"].createElement("span", {
     className: "".concat(prefix, "__content-text"),
+    style: {
+      color: contentColor
+    },
     onClick: onTitleClick
   }, /*#__PURE__*/_react["default"].createElement(_tooltip["default"].Text, {
     text: /*#__PURE__*/_react["default"].createElement(_searchKeyHandle["default"], {
@@ -52,9 +66,7 @@ var DynamicTitle = function DynamicTitle(_ref) {
       keyWord: searchKeyWord
     }),
     isPercent: true
-  })), suffixContent), /*#__PURE__*/_react["default"].createElement("span", {
-    className: "".concat(prefix, "__fill-empty")
-  }));
+  }))));
 };
 
 var _default = DynamicTitle;