@titaui/pc 1.11.18 → 1.11.21-beta.1

package/lib/components/avatar/name-avatar/index.css

@@ -55,4 +55,5 @@
   font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
   color: #6F7886;
   line-height: 20px;
+  margin-left: 4px;
 }

package/lib/components/avatar/name-avatar/index.js

@@ -58,7 +58,10 @@ var NameAvatar = function NameAvatar(props) {
       onDelUser = props.onDelUser,
       _props$textWidth = props.textWidth,
       textWidth = _props$textWidth === void 0 ? 42 : _props$textWidth,
-      textClass = props.textClass;
+      textClass = props.textClass,
+      renderRightTopCmp = props.renderRightTopCmp,
+      _props$avatarTips = props.avatarTips,
+      avatarTips = _props$avatarTips === void 0 ? '' : _props$avatarTips;
   var hasAvatar = src && !src.match(/default\w*.jpg$/);
 
   var _useState = (0, _react.useState)(false),
@@ -103,7 +106,7 @@ var NameAvatar = function NameAvatar(props) {
       style: {
         width: size.width,
         height: size.width,
-        verticalAlign: "top"
+        verticalAlign: 'top'
       },
       src: src
     });
@@ -120,11 +123,11 @@ var NameAvatar = function NameAvatar(props) {
         }
       }, /*#__PURE__*/_react["default"].createElement("div", {
         style: {
-          display: "inline-block",
+          display: 'inline-block',
           width: "".concat(size.fontSize, "px"),
-          margin: "0 auto",
-          overflow: "hidden",
-          whiteSpace: "nowrap",
+          margin: '0 auto',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
           fontSize: "".concat(size.fontSize, "px"),
           lineHeight: "".concat(size.width, "px")
         }
@@ -134,7 +137,7 @@ var NameAvatar = function NameAvatar(props) {
       })));
     }
 
-    var cuttedName = "";
+    var cuttedName = '';
     var cuttedNameLen = 0;
 
     for (var i = 0, lent = name.length; i < lent; i++) {
@@ -167,11 +170,11 @@ var NameAvatar = function NameAvatar(props) {
     className: "titaui-pc-avator__name-avatar-container",
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+  }, renderRightTopCmp, /*#__PURE__*/_react["default"].createElement("div", {
     onClick: handleDelUser,
     onMouseLeave: handleCloseIconMouseLeave,
     onMouseEnter: handleCloseIconMouseEnter,
-    className: "titaui-pc-avator__delete-wrapper ".concat(canDelUser && mouseIsEnterUser ? "titaui-pc-avator--enter" : ""),
+    className: "titaui-pc-avator__delete-wrapper ".concat(canDelUser && mouseIsEnterUser ? 'titaui-pc-avator--enter' : ''),
     style: {
       left: "".concat(size.width - 14, "px")
     }
@@ -185,7 +188,10 @@ var NameAvatar = function NameAvatar(props) {
     onClick: onClick,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave
-  }, hasAvatar ? renderImgAvatar() : renderTextAvatar()), showNameTips && isNameOverflow ? /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+  }, avatarTips && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    overlay: avatarTips,
+    placement: "top"
+  }, hasAvatar ? renderImgAvatar() : renderTextAvatar()), !avatarTips && (hasAvatar ? renderImgAvatar() : renderTextAvatar())), showNameTips && isNameOverflow ? /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
     overlay: /*#__PURE__*/_react["default"].createElement(_openData.OpenUserName, {
       name: name,
       id: userId
@@ -194,14 +200,17 @@ var NameAvatar = function NameAvatar(props) {
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "titaui-pc-avator__name ".concat(textClass),
     style: {
-      width: textWidth
+      maxWidth: textWidth
     }
   }, /*#__PURE__*/_react["default"].createElement("span", {
     ref: textRef
-  }, name))) : /*#__PURE__*/_react["default"].createElement("span", {
+  }, /*#__PURE__*/_react["default"].createElement(_openData.OpenUserName, {
+    name: name,
+    id: userId
+  })))) : /*#__PURE__*/_react["default"].createElement("span", {
     className: "titaui-pc-avator__name ".concat(textClass),
     style: {
-      width: textWidth
+      maxWidth: textWidth
     }
   }, /*#__PURE__*/_react["default"].createElement("span", {
     ref: textRef

package/lib/components/button/rect-btn/index.css

@@ -13,7 +13,7 @@
   align-items: center;
   justify-content: center;
   min-width: 64px;
-  font-size: 13px;
+  font-size: 14px;
   padding: 0 12px;
 }
 
@@ -60,21 +60,35 @@
   background: #5c8eff;
 }
 
+.titaui-rect-btn--secondary {
+  font-size: 14px;
+  font-weight: normal;
+  color: #2879ff;
+  line-height: 28px;
+  background: rgba(40, 121, 255, 0.2);
+  margin-right: 16px;
+}
+
+.titaui-rect-btn--secondary:hover {
+  color: #fff;
+  background-color: #2879ff;
+}
+
 .titaui-rect-btn--cancel {
-  color: #6F7886;
-  border: 1px solid #DFE3EA;
-  background: #FFFFFF;
+  color: #6f7886;
+  border: 1px solid #dfe3ea;
+  background: #ffffff;
 }
 
 .titaui-rect-btn--cancel:hover {
-  color: #2879FF;
-  border: 1px solid #2879FF;
+  color: #2879ff;
+  border: 1px solid #2879ff;
 }
 
 .titaui-rect-btn--delete {
-  background: #FFFFFF;
-  color: #F05E5E;
-  border: 1px solid #F05E5E;
+  background: #ffffff;
+  color: #f05e5e;
+  border: 1px solid #f05e5e;
 }
 
 .titaui-rect-btn--delete:hover {
@@ -93,10 +107,10 @@
 }
 
 .titaui-rect-btn--primary.titaui-rect-btn--disabled {
-  background: #93BCFF;
+  background: #93bcff;
   opacity: 1;
 }
 
 .titaui-rect-btn--primary.titaui-rect-btn--disabled:hover {
-  background: #93BCFF;
+  background: #93bcff;
 }

package/lib/components/button/rect-btn/index.js

@@ -34,7 +34,8 @@ function RectBtn(props) {
       className = _props$className === void 0 ? "" : _props$className,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
-      style = props.style;
+      style = props.style,
+      children = props.children;
 
   var renderIcon = function renderIcon() {
     if (typeof icon === "string") {
@@ -50,16 +51,19 @@ function RectBtn(props) {
     }, icon);
   };
 
-  var onClickHandler = function onClickHandler() {
+  var onClickHandler = function onClickHandler(e) {
     if (disabled) return;
-    onClick && onClick();
+
+    if (onClick) {
+      onClick(e);
+    }
   };
 
   return /*#__PURE__*/_react["default"].createElement("span", {
     className: (0, _classnames["default"])(precls, "".concat(precls, "--").concat(type), "".concat(precls, "--").concat(size), _defineProperty({}, "".concat(precls, "--disabled"), disabled), className),
     style: style,
     onClick: onClickHandler
-  }, icon && renderIcon(), props.children || text);
+  }, icon && renderIcon(), children || text);
 }
 
 var _default = RectBtn;

package/lib/components/communication/index.js

@@ -71,7 +71,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-var prefix = "titaui-communication";
+var prefix = 'titaui-communication';
 
 var Communication = /*#__PURE__*/function (_PureComponent) {
   _inherits(Communication, _PureComponent);
@@ -90,14 +90,14 @@ var Communication = /*#__PURE__*/function (_PureComponent) {
           commentType = _this$props.commentType,
           okrFeedParams = _this$props.okrFeedParams;
       var url = commentType == 1 ? (0, _requestV.getApiUrl2)("comment/Get?feed_id=".concat(feedId, "&comment_type=0")) : (0, _requestV.getApiUrl)("okr/cycle/getFeed?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, "&commentCount=").concat(commentCount));
-      (0, _requestV.taker)(url, "GET").then(function (res) {
+      (0, _requestV.taker)(url, 'GET').then(function (res) {
         if (res.Code === 1) {
           var data = res.Data && (res.Data.feedComments || res.Data);
 
           _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({
@@ -137,10 +137,10 @@ var Communication = /*#__PURE__*/function (_PureComponent) {
 
       var communicationTrackList = _toConsumableArray(_this.state.communicationTrackList);
 
-      if (actionType === "delete") {
+      if (actionType === 'delete') {
         // 删除
         var url = (0, _requestV.getApiUrl2)("comment/Delete?comment_id=".concat(communicationTrackList[index].commentId, "&feed_id=").concat(feedId || _this.state.okrCommentFeedId));
-        (0, _requestV.taker)(url, "DELETE").then(function (res) {
+        (0, _requestV.taker)(url, 'DELETE').then(function (res) {
           if (res.Code === 1) {
             isShowAllCommunicationRecord ? _this.getFeedInfo(feedId, communicationTrackTotal - 1) : _this.getFeedInfo(feedId, commentCount);
 
@@ -151,7 +151,7 @@ var Communication = /*#__PURE__*/function (_PureComponent) {
             }
           }
         });
-      } else if (actionType === "reply") {
+      } else if (actionType === 'reply') {
         // 沟通里的回复
         if (_this.props.useCustomMblog && _this.props.onComment) {
           _this.props.onComment({
@@ -178,7 +178,7 @@ var Communication = /*#__PURE__*/function (_PureComponent) {
           isShowDefaultInput: false,
           needAutoFocus: true
         });
-      } else if (actionType === "praise") {
+      } else if (actionType === 'praise') {
         // 沟通里的点赞
         var isPraise = communicationTrackList[index].isPraise;
         isPraise = !isPraise;
@@ -189,7 +189,7 @@ var Communication = /*#__PURE__*/function (_PureComponent) {
 
         var _url = isPraise ? (0, _requestV.getApiUrl)("praise/add?objId=".concat(communicationTrackList[index].commentId, "&objType=19&praiseType=1")) : (0, _requestV.getApiUrl)("praise/cancel?objId=".concat(communicationTrackList[index].commentId, "&objType=19"));
 
-        (0, _requestV.taker)(_url, "POST").then(function (res) {
+        (0, _requestV.taker)(_url, 'POST').then(function (res) {
           if (res.Code === 1) {
             var praiseTotal = communicationTrackList[index].praiseTotal;
             communicationTrackList[index].isPraise = isPraise;
@@ -205,7 +205,7 @@ var Communication = /*#__PURE__*/function (_PureComponent) {
             });
           }
         });
-      } else if (actionType === "showPraiseRecord") {
+      } else if (actionType === 'showPraiseRecord') {
         // 显示点赞记录
         _this.setState({
           isShowPraiseRecordPop: true,
@@ -241,13 +241,13 @@ var Communication = /*#__PURE__*/function (_PureComponent) {
           communicationTrackTotal = _this$state3.communicationTrackTotal,
           isShowAllCommunicationRecord = _this$state3.isShowAllCommunicationRecord;
 
-      if (submitType === "submit") {
+      if (submitType === 'submit') {
         // 发送
         sentData.FeedId = feedId;
         sentData.CommentId = 0;
         sentData.ObjId = 0;
         sentData.ObjType = 0;
-        sentData.Content = sentData.Content || " ";
+        sentData.Content = sentData.Content || ' ';
 
         if (isShowReplyToUser) {
           sentData.CommentId = replyUserCommentId;
@@ -257,8 +257,8 @@ 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));
-        (0, _requestV.taker)(url, "POST", sentData).then(function (res) {
+        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);
 
@@ -313,17 +313,17 @@ var Communication = /*#__PURE__*/function (_PureComponent) {
       isShowAllCommunicationRecord: false,
       // 是否显示所有记录
       // 回复
-      replyUser: "",
-      replyUserId: "",
-      replyUserCommentId: "0",
+      replyUser: '',
+      replyUserId: '',
+      replyUserCommentId: '0',
       isShowReplyToUser: false,
       // 是否显示回复谁
       submitStatus: 0,
       praiseStatus: 0,
       // 点赞记录
-      praiseObjId: "",
+      praiseObjId: '',
       isShowPraiseRecordPop: false,
-      okrCommentFeedId: "",
+      okrCommentFeedId: '',
       isShowDefaultInput: showDefaultInput && communicationLength !== 0 ? true : false,
       needAutoFocus: false
     };
@@ -389,9 +389,9 @@ var Communication = /*#__PURE__*/function (_PureComponent) {
           commentCount = _this$props7.commentCount,
           useCustomMblog = _this$props7.useCustomMblog,
           _this$props7$submitTe = _this$props7.submitText,
-          submitText = _this$props7$submitTe === void 0 ? (0, _getLocale.getLocale)("Mod_Reply") : _this$props7$submitTe,
+          submitText = _this$props7$submitTe === void 0 ? (0, _getLocale.getLocale)('Mod_Reply') : _this$props7$submitTe,
           _this$props7$highLigh = _this$props7.highLightKeyWord,
-          highLightKeyWord = _this$props7$highLigh === void 0 ? "" : _this$props7$highLigh,
+          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,
           _this$props7$showUser = _this$props7.showUser,
@@ -404,10 +404,10 @@ var Communication = /*#__PURE__*/function (_PureComponent) {
         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", {
+      }, (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: (0, _classnames["default"])(_defineProperty({}, "".concat(prefix, "__communication-list"), communicationTrackList.length > 0))
@@ -432,12 +432,12 @@ var Communication = /*#__PURE__*/function (_PureComponent) {
       }))), !useCustomMblog && /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(prefix, "__reply-container")
       }, isShowReplyToUser && /*#__PURE__*/_react["default"].createElement(_style.ReplyToUser, {
-        height: isShowReplyToUser ? "auto" : "0",
-        padding: isShowReplyToUser ? "4px 0" : "0",
+        height: isShowReplyToUser ? 'auto' : '0',
+        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", {
+      }, (0, _getLocale.getLocale)('Mod_Reply')), /*#__PURE__*/_react["default"].createElement("span", {
         className: "name"
       }, /*#__PURE__*/_react["default"].createElement(_openData.OpenUserName, {
         name: replyUser,
@@ -457,14 +457,15 @@ var Communication = /*#__PURE__*/function (_PureComponent) {
         },
         name: user.Name,
         color: user.UserAvatar.Color,
-        src: user.UserAvatar.Medium
+        src: user.UserAvatar.Medium,
+        userId: user.Id
       })), /*#__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"),
+        placeholderText: (0, _getLocale.getLocale)('Mod_contentofyour'),
         isShowRange: false,
         isShowBtnCancel: false,
         isShowSendSms: isShowSendSms,
@@ -486,7 +487,7 @@ var Communication = /*#__PURE__*/function (_PureComponent) {
         onSubmit: function onSubmit() {
           return _this2.setState({
             isShowPraiseRecordPop: false,
-            praiseObjId: ""
+            praiseObjId: ''
           });
         }
       }));

package/lib/components/create-okr-modal/request-api.js

@@ -46,7 +46,7 @@ var createWidthKr = /*#__PURE__*/function () {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            url = "".concat(requestDomain(), "/api/v2/").concat(tenantId, "/").concat(userId, "/work/createWithKr");
+            url = "".concat(requestDomain(), "/api/v1/").concat(tenantId, "/").concat(userId, "/okr/createWithKr");
             _context.next = 3;
             return _axios["default"].post(url, _objectSpread({
               workType: 6

package/lib/components/drawer/headerAction.js

@@ -49,7 +49,9 @@ function HeaderAction(_ref) {
       _onClick = _ref.onClick,
       className = _ref.className,
       title = _ref.title,
-      children = _ref.children;
+      children = _ref.children,
+      approvalSetting = _ref.approvalSetting,
+      detailInfo = _ref.detailInfo;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -99,6 +101,8 @@ function HeaderAction(_ref) {
   if (children && children.length > 0) {
     content = /*#__PURE__*/_react["default"].createElement(_headerDrop["default"], {
       visible: dropVisible,
+      detailInfo: detailInfo,
+      approvalSetting: approvalSetting,
       onVisibleChange: function onVisibleChange(visible) {
         active.current = visible;
         !visible && setDropVisible(false);

package/lib/components/drawer/headerDrop.js

@@ -9,6 +9,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _helper = require("../okr-detail/helper");
+
 var _popup = _interopRequireDefault(require("../popup"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -44,7 +46,9 @@ var HeaderDropItem = function HeaderDropItem(_ref) {
       colorInDrop = _ref.colorInDrop,
       hoverColorInDrop = _ref.hoverColorInDrop,
       _onClick = _ref.onClick,
-      onClose = _ref.onClose;
+      onClose = _ref.onClose,
+      approvalSetting = _ref.approvalSetting,
+      detailInfo = _ref.detailInfo;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -52,7 +56,36 @@ var HeaderDropItem = function HeaderDropItem(_ref) {
       setHover = _useState2[1];
 
   var hasIcon = !!icon && typeof icon === "string";
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  var applyState = detailInfo.applyState;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, icon === 'tu-icon-del' ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (0, _helper.getApprovalIsShow)(approvalSetting, 'deleteOkr', applyState) ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: "header-drop-item",
+    style: {
+      color: hover ? hoverColorInDrop || hoverColor : colorInDrop || color
+    },
+    onClick: function onClick(e) {
+      _onClick && _onClick(e);
+      onClose(false);
+    },
+    onMouseOver: function onMouseOver() {
+      return setHover(true);
+    },
+    onMouseOut: function onMouseOut() {
+      return setHover(false);
+    }
+  }, hasIcon && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "header-drop-item-icon",
+    style: {
+      color: hover ? hoverIconColorInDrop || hoverColorInDrop || hoverColor : iconColorInDrop || colorInDrop || color
+    }
+  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement("span", {
+    className: icon
+  }) : icon), title) : /*#__PURE__*/_react["default"].createElement("div", {
+    className: "header-drop-item-approval"
+  }, hasIcon && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "header-drop-item-icon"
+  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement("span", {
+    className: icon
+  }) : icon), title)) : /*#__PURE__*/_react["default"].createElement("div", {
     className: "header-drop-item",
     style: {
       color: hover ? hoverColorInDrop || hoverColor : colorInDrop || color
@@ -74,19 +107,23 @@ var HeaderDropItem = function HeaderDropItem(_ref) {
     }
   }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement("span", {
     className: icon
-  }) : icon), title);
+  }) : icon), title));
 };
 
 var HeaderDrop = function HeaderDrop(_ref2) {
   var visible = _ref2.visible,
       onVisibleChange = _ref2.onVisibleChange,
       items = _ref2.items,
-      children = _ref2.children;
+      children = _ref2.children,
+      approvalSetting = _ref2.approvalSetting,
+      detailInfo = _ref2.detailInfo;
   var renderDrop = (0, _react.useMemo)(function () {
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "titaui-drawer-header-action-drop-wrapper"
     }, items.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement(HeaderDropItem, _extends({}, item, {
+        detailInfo: detailInfo,
+        approvalSetting: approvalSetting,
         onClose: function onClose() {
           return onVisibleChange(false);
         }

package/lib/components/drawer/index.css

@@ -48,6 +48,17 @@
   background: linear-gradient(180deg, rgba(191, 199, 213, 0) 0%, #BFC7D5 50%, rgba(240, 242, 245, 0) 100%);
 }
 
+.titaui-drawer-header-status {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 16px;
+  width: 68px;
+  height: 28px;
+  margin-right: 18px;
+  font-size: 12px;
+}
+
 .titaui-drawer-header-action {
   font-size: 18px;
   color: #a4acb9;
@@ -164,6 +175,39 @@
   background-repeat: no-repeat;
 }
 
+.titaui-drawer-header-action-drop-wrapper .header-drop-item-approval {
+  height: 32px;
+  display: flex;
+  align-items: center;
+  padding: 0 23px;
+  cursor: pointer;
+  color: #BFC7D5;
+}
+
+.titaui-drawer-header-action-drop-wrapper .header-drop-item-approval-icon {
+  font-size: 18px;
+  color: inherit;
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+  margin-right: 10px;
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
+.titaui-drawer-header-action-drop-wrapper .header-drop-item-approval-icon > span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  width: 18px;
+  height: 18px;
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
 .drawer-left .drawer-content-wrapper,
 .drawer-right .drawer-content-wrapper,
 .drawer-left .drawer-content,

package/lib/components/drawer/index.js

@@ -25,7 +25,9 @@ require("./index.css");
 
 var _context = _interopRequireDefault(require("../drawer-manager/context"));
 
-var _excluded = ["visible", "placement", "children", "mask", "width", "className", "contentWrapperStyle", "onClose", "style", "afterVisibleChange", "destroyOnClose", "bodyStyle", "zIndex"];
+var _dom = require("./utils/dom");
+
+var _excluded = ["visible", "placement", "children", "mask", "width", "className", "contentWrapperStyle", "onClose", "style", "afterVisibleChange", "destroyOnClose", "bodyStyle", "zIndex", "autoClosable"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -54,7 +56,7 @@ var Drawer = function Drawer(props) {
 
   var visible = props.visible,
       _props$placement = props.placement,
-      placement = _props$placement === void 0 ? "right" : _props$placement,
+      placement = _props$placement === void 0 ? 'right' : _props$placement,
       children = props.children,
       _props$mask = props.mask,
       mask = _props$mask === void 0 ? false : _props$mask,
@@ -70,6 +72,8 @@ var Drawer = function Drawer(props) {
       bodyStyle = props.bodyStyle,
       _props$zIndex = props.zIndex,
       zIndex = _props$zIndex === void 0 ? 1200 : _props$zIndex,
+      _props$autoClosable = props.autoClosable,
+      autoClosable = _props$autoClosable === void 0 ? false : _props$autoClosable,
       rest = _objectWithoutProperties(props, _excluded);
 
   var handleAfterVisibleChange = (0, _react.useCallback)(function (opened) {
@@ -89,6 +93,20 @@ var Drawer = function Drawer(props) {
     return children;
   }
 
+  var autoClose = function autoClose(e) {
+    if ((0, _dom.hasAncestorElement)(e.target, 'document-mouse-event-ignore,rc-tooltip,titaui-popup,rc-dialog-root,common-modal,in-modal,task-hot-add')) return;
+    onClose();
+  };
+
+  (0, _react.useEffect)(function () {
+    if (autoClosable) {
+      document.addEventListener('mousedown', autoClose);
+    }
+
+    return function () {
+      document.removeEventListener('mousedown', autoClose);
+    };
+  }, []);
   return /*#__PURE__*/_react["default"].createElement(DrawerContext.Provider, {
     value: {
       close: function close() {
@@ -96,7 +114,7 @@ var Drawer = function Drawer(props) {
       }
     }
   }, /*#__PURE__*/_react["default"].createElement(_rcDrawer["default"], _extends({
-    className: (0, _classnames["default"])("titaui-drawer", "document-mouse-event-ignore", className),
+    className: (0, _classnames["default"])('titaui-drawer', 'document-mouse-event-ignore', className),
     style: _objectSpread(_objectSpread({}, style), {}, {
       zIndex: zIndex
     })
@@ -123,7 +141,10 @@ function DrawerHeader(_ref) {
       content = _ref.content,
       style = _ref.style,
       onClose = _ref.onClose,
-      actionComponent = _ref.actionComponent;
+      status = _ref.status,
+      actionComponent = _ref.actionComponent,
+      approvalSetting = _ref.approvalSetting,
+      detailInfo = _ref.detailInfo;
   var drawer = (0, _react.useContext)(DrawerContext);
   var manager = (0, _react.useContext)(_context["default"]);
   var showClose = closable && (!!onClose || !!drawer);
@@ -146,16 +167,24 @@ function DrawerHeader(_ref) {
     onClick: manager && manager.goBack
   }, /*#__PURE__*/_react["default"].createElement("i", {
     className: "tu-icon-fanhui"
-  }), (0, _getLocale.getLocale)("Mod_Back")), showBackBtn && hasContent && /*#__PURE__*/_react["default"].createElement("div", {
+  }), (0, _getLocale.getLocale)('Mod_Back')), showBackBtn && hasContent && /*#__PURE__*/_react["default"].createElement("div", {
     className: "titaui-drawer-header-divider"
   }), hasContent && content, /*#__PURE__*/_react["default"].createElement("div", {
     style: {
       flex: 1
     }
-  }), /*#__PURE__*/_react["default"].createElement("div", null, actionComponent), displayActions.map(function (action) {
+  }), status && status.color && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "titaui-drawer-header-status",
+    style: {
+      color: status.color.color,
+      backgroundColor: status.color.bgColor
+    }
+  }, status.title), /*#__PURE__*/_react["default"].createElement("div", null, actionComponent), displayActions.map(function (action) {
     return /*#__PURE__*/_react["default"].createElement(_headerAction["default"], action);
   }), !!collapsedActions.length && /*#__PURE__*/_react["default"].createElement(_headerAction["default"], {
-    title: (0, _getLocale.getLocale)("Mod_MoreOperate"),
+    approvalSetting: approvalSetting,
+    detailInfo: detailInfo,
+    title: (0, _getLocale.getLocale)('Mod_MoreOperate'),
     icon: "tu-icon-10",
     children: collapsedActions
   }), showClose && /*#__PURE__*/_react["default"].createElement("div", {