linkmore-design 1.0.67 → 1.0.68

package/lib/Approval/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
 Object.defineProperty(exports, "__esModule", {
@@ -7,12 +9,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _ = require("..");
 
+var _type = require("./type");
+
+var _util = require("./util");
+
+var _handle = require("./handle");
+
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
 
@@ -28,8 +38,20 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 
 var prefixCls = 'lm_approval';
 var colors = ['#36BCF1', '#AE86DC', '#8BD248', '#F5A173'];
-var statusMap = new Map([[1, '审核中'], [2, '已审核'], [3, '未通过']]);
-var defaultStatus = 1;
+var cacheColorMap = new Map();
+
+var getColorWithCache = function getColorWithCache(key) {
+  var color;
+
+  if (cacheColorMap.has(key)) {
+    color = cacheColorMap.get(key);
+  } else {
+    color = colors[parseInt(Math.random() * 4 + '')];
+    cacheColorMap.set(key, color);
+  }
+
+  return color;
+};
 
 var getLastChar = function getLastChar(name) {
   return name.substring(name.length - 1, name.length);
@@ -40,25 +62,26 @@ var LMDrawer = function LMDrawer(props) {
       visible = _props$visible === void 0 ? false : _props$visible,
       _props$title = props.title,
       title = _props$title === void 0 ? '' : _props$title,
-      _props$status = props.status,
-      status = _props$status === void 0 ? defaultStatus : _props$status,
-      _props$userType = props.userType,
-      userType = _props$userType === void 0 ? 'self' : _props$userType,
-      close = props.close,
+      user = props.user,
+      onClose = props.onClose,
       children = props.children,
+      _props$steps = props.steps,
+      steps = _props$steps === void 0 ? [] : _props$steps,
       _props$onComment = props.onComment,
       onComment = _props$onComment === void 0 ? function () {} : _props$onComment,
       _props$onRefuse = props.onRefuse,
       onRefuse = _props$onRefuse === void 0 ? function () {} : _props$onRefuse,
       _props$onAgree = props.onAgree,
       onAgree = _props$onAgree === void 0 ? function () {} : _props$onAgree;
+  var status = (0, _util.getStatus)(steps);
   var currentStatusCls = (0, _classnames.default)(prefixCls + '_title_status');
   var drawerCls = (0, _classnames.default)(prefixCls + '_drawer');
-  var statusText = statusMap.has(status) ? statusMap.get(status) : statusMap.get(1);
+
+  var statusText = _type.ApprovalType.toText(_type.ApprovalType.APPROVAL, status);
 
   var handleClose = function handleClose() {
     visible = false;
-    close();
+    onClose();
   };
 
   return /*#__PURE__*/_react.default.createElement(_.Drawer, {
@@ -68,19 +91,16 @@ var LMDrawer = function LMDrawer(props) {
     onClose: handleClose,
     extra: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: currentStatusCls
-    }, // 审核中
-    status === 1 && /*#__PURE__*/_react.default.createElement(_.IconFont, {
+    }, _type.ApprovalType.isPending(_type.ApprovalType.APPROVAL, status) && /*#__PURE__*/_react.default.createElement(_.IconFont, {
       className: 'icon blue',
       type: "lmweb-yuanxing-gengduo"
-    }), // 已审核
-    status === 2 && /*#__PURE__*/_react.default.createElement(_.IconFont, {
+    }), _type.ApprovalType.isAgree(_type.ApprovalType.APPROVAL, status) && /*#__PURE__*/_react.default.createElement(_.IconFont, {
       className: 'icon green',
       type: "lmweb-check-circle-fill"
-    }), // 未通过
-    status === 3 && /*#__PURE__*/_react.default.createElement(_.IconFont, {
+    }), _type.ApprovalType.isRefuse(_type.ApprovalType.APPROVAL, status) && /*#__PURE__*/_react.default.createElement(_.IconFont, {
       className: 'icon grey',
       type: "lmweb-stop"
-    }), /*#__PURE__*/_react.default.createElement("span", null, statusText)), status === 1 && userType === 'approver' && /*#__PURE__*/_react.default.createElement(_.Space, null, /*#__PURE__*/_react.default.createElement(_.Button, {
+    }), /*#__PURE__*/_react.default.createElement("span", null, statusText)), _type.ApprovalType.isPending(_type.ApprovalType.APPROVAL, status) && (0, _util.currentUserIsApprover)(steps, user) && /*#__PURE__*/_react.default.createElement(_.Space, null, /*#__PURE__*/_react.default.createElement(_.Button, {
       size: "small",
       onClick: onComment
     }, "\u4EC5\u8BC4\u8BBA"), /*#__PURE__*/_react.default.createElement(_.Button, {
@@ -105,88 +125,81 @@ var ApprovalItem = function ApprovalItem(props) {
       name = _props$name === void 0 ? '' : _props$name,
       _props$time = props.time,
       time = _props$time === void 0 ? '' : _props$time,
-      _props$type = props.type,
-      type = _props$type === void 0 ? 'start' : _props$type,
+      type = props.type,
+      _props$agreeList = props.agreeList,
+      agreeList = _props$agreeList === void 0 ? [] : _props$agreeList,
+      _props$approverList = props.approverList,
+      approverList = _props$approverList === void 0 ? [] : _props$approverList,
       _props$everyoneAgree = props.everyoneAgree,
       everyoneAgree = _props$everyoneAgree === void 0 ? false : _props$everyoneAgree,
       _props$comment = props.comment,
       comment = _props$comment === void 0 ? null : _props$comment,
-      approverList = props.approverList,
-      carbonCopyList = props.carbonCopyList,
-      _cacheColorMap = props._cacheColorMap,
-      _color = props._color,
-      _status = props._status;
+      _props$carbonCopyList = props.carbonCopyList,
+      carbonCopyList = _props$carbonCopyList === void 0 ? [] : _props$carbonCopyList,
+      _props$urge = props.urge,
+      urge = _props$urge === void 0 ? false : _props$urge,
+      approvalStatus = props.approvalStatus,
+      _isSelf = props._isSelf,
+      _user = props._user,
+      onUrge = props.onUrge,
+      onDeleteComment = props.onDeleteComment;
   var itemCls = (0, _classnames.default)(prefixCls + '_item');
   var itemHeaderCls = (0, _classnames.default)(itemCls + '_header');
   var itemBodyCls = (0, _classnames.default)(itemCls + '_body');
 
   var getIcon = function getIcon() {
-    if (_status === 1) {
+    if (_type.ApprovalType.isRefuse(type, approvalStatus)) {
       return /*#__PURE__*/_react.default.createElement(_.IconFont, {
-        className: 'icon blue',
-        type: "lmweb-yuanxing-gengduo"
-      });
-    }
-
-    if (_status === 2) {
-      return /*#__PURE__*/_react.default.createElement(_.IconFont, {
-        className: 'icon green',
-        type: "lmweb-check-circle-fill"
+        className: 'icon red',
+        type: "lmweb-close-circle-fill"
       });
     }
 
-    if (_status === 3) {
+    if (_type.ApprovalType.isPending(type, approvalStatus)) {
       return /*#__PURE__*/_react.default.createElement(_.IconFont, {
-        className: 'icon red',
-        type: "lmweb-close-circle-fill"
+        className: 'icon blue',
+        type: "lmweb-yuanxing-gengduo"
       });
     }
 
-    return null;
+    return /*#__PURE__*/_react.default.createElement(_.IconFont, {
+      className: 'icon green',
+      type: "lmweb-check-circle-fill"
+    });
   };
 
   var getApprovalText = function getApprovalText() {
-    if (type === 'refuse') {
+    if (_type.ApprovalType.isPending(type, approvalStatus)) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: 'desc blue'
+      }, "\u5BA1\u6838\u4E2D");
+    } else if (_type.ApprovalType.isAgree(type, approvalStatus)) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: 'desc green'
+      }, "\u5DF2\u540C\u610F");
+    } else if (_type.ApprovalType.isRefuse(type, approvalStatus)) {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: 'desc red'
       }, "\u62D2\u7EDD");
-    }
-
-    if (type === 'start') {
+    } else if (type === _type.ApprovalType.START) {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: 'desc green'
       }, "\u53D1\u8D77\u5BA1\u6279");
-    }
-
-    if (type === 'comment') {
+    } else if (type === _type.ApprovalType.ONLY_COMMENT) {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: 'desc grey'
       }, "\u4EC5\u8BC4\u8BBA");
-    }
-
-    if (type === 'carbonCopy') {
+    } else if (type === _type.ApprovalType.CARBON_COPY) {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: 'desc grey'
-      }, "\u5DF2\u6284\u90018\u4EBA");
-    }
-
-    if (type === 'agree') {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: 'desc green'
-      }, "\u5DF2\u540C\u610F");
-    }
-
-    if (type === 'pending') {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: 'desc blue'
-      }, "\u5BA1\u6838\u4E2D");
+      }, "\u5DF2\u6284\u9001", carbonCopyList.length, "\u4EBA");
     }
 
     return null;
   };
 
   var renderTip = function renderTip() {
-    if (type === 'pending') {
+    if (_type.ApprovalType.isPending(type, approvalStatus)) {
       if (everyoneAgree) {
         return /*#__PURE__*/_react.default.createElement("div", {
           className: "agree-tip"
@@ -203,114 +216,266 @@ var ApprovalItem = function ApprovalItem(props) {
 
   var renderComment = function renderComment() {
     if (comment) {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
         className: 'comment'
-      }, comment);
+      }, comment, _type.ApprovalType.isOnlyComment(type) && (0, _util.currentUserIsProposer)(_user, name) && /*#__PURE__*/_react.default.createElement("div", {
+        className: 'comment-delete',
+        onClick: onDeleteComment
+      }, /*#__PURE__*/_react.default.createElement(_.IconFont, {
+        className: "icon",
+        type: "lmweb-delete"
+      }), " \u5220\u9664")));
+    }
+
+    return null;
+  };
+
+  var renderUrge = function renderUrge() {
+    // 当前用户是提议发起者 && 审核中
+    if (_isSelf && _type.ApprovalType.isPending(type, approvalStatus)) {
+      return /*#__PURE__*/_react.default.createElement(_.Button, {
+        className: "urge",
+        disabled: urge,
+        size: "small",
+        onClick: onUrge
+      }, urge ? '已催办' : '催一下');
     }
 
     return null;
   };
 
   var renderList = function renderList() {
-    var list = approverList || carbonCopyList || [];
+    var list = [];
+
+    if (_type.ApprovalType.isCC(type)) {
+      list = carbonCopyList;
+    } else if (_type.ApprovalType.isApproval(type)) {
+      list = approverList.slice(agreeList.length);
+    }
+
+    var separate = type === _type.ApprovalType.APPROVAL && everyoneAgree; // 审批拒绝
+
+    if (_type.ApprovalType.isRefuse(type, approvalStatus)) {
+      return null;
+    } // 审批通过
+
+
+    if (_type.ApprovalType.isAgree(type, approvalStatus)) {
+      return null;
+    }
 
     if (list.length) {
       return /*#__PURE__*/_react.default.createElement("div", {
+        className: 'lm-approver-wrapper'
+      }, /*#__PURE__*/_react.default.createElement("div", {
         className: 'lm-approver-box'
       }, list.map(function (item, i) {
-        var circleColor;
-
-        if (_cacheColorMap.has(item)) {
-          circleColor = _cacheColorMap.get(item);
-        } else {
-          circleColor = colors[parseInt(Math.random() * 4 + '')];
-
-          _cacheColorMap.set(item, circleColor);
-        }
-
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: 'lm-approver-cell',
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
           key: item + i
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: 'lm-approver-cell'
         }, /*#__PURE__*/_react.default.createElement("div", {
           className: 'lm-approver-circle',
           style: {
-            backgroundColor: circleColor
+            backgroundColor: getColorWithCache(item)
           }
-        }, getLastChar(item)), /*#__PURE__*/_react.default.createElement("span", null, item));
-      }));
+        }, getLastChar(item)), /*#__PURE__*/_react.default.createElement("span", null, item)), separate && i != list.length - 1 && /*#__PURE__*/_react.default.createElement(_.IconFont, {
+          className: 'icon',
+          type: "lmweb-icon_m_put_away"
+        }));
+      })), renderUrge());
     }
 
     return null;
   };
 
+  var renderTime = function renderTime() {
+    // 当前用户是提议发起者 && 审核中
+    if (_isSelf && _type.ApprovalType.isPending(type, approvalStatus)) {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: 'yellow'
+      }, "\u5DF2\u7B49\u5F85".concat((0, _handle.getDistanceTime)(time)));
+    }
+
+    return /*#__PURE__*/_react.default.createElement("span", null, time);
+  };
+
+  var renderAvator = function renderAvator() {
+    if (_type.ApprovalType.isCC(type)) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'cc-box'
+      }, /*#__PURE__*/_react.default.createElement(_.IconFont, {
+        className: 'cc',
+        type: "lmweb-a-chaosongrenchaosongyonghu-02"
+      })), getIcon());
+    }
+
+    if (_type.ApprovalType.isPending(type, approvalStatus)) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'cc-box'
+      }, /*#__PURE__*/_react.default.createElement(_.IconFont, {
+        className: 'cc',
+        type: "lmweb-audit"
+      })), getIcon());
+    }
+
+    if (avator) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("img", {
+        className: 'picture',
+        src: avator,
+        alt: ""
+      }), getIcon());
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: 'subname',
+      style: {
+        backgroundColor: getColorWithCache(name)
+      }
+    }, getLastChar(name)), getIcon());
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: itemCls
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: itemHeaderCls
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "avator"
-  }, avator ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("img", {
-    className: 'picture',
-    src: avator,
-    alt: ""
-  }), getIcon()) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'subname',
-    style: {
-      backgroundColor: _color
-    }
-  }, getLastChar(name)), getIcon())), /*#__PURE__*/_react.default.createElement("div", {
+  }, renderAvator()), /*#__PURE__*/_react.default.createElement("div", {
     className: "content"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'name'
   }, name), getApprovalText()), /*#__PURE__*/_react.default.createElement("div", {
     className: "right"
-  }, time)), type !== 'start' && /*#__PURE__*/_react.default.createElement("div", {
+  }, renderTime())), type !== _type.ApprovalType.START && /*#__PURE__*/_react.default.createElement("div", {
     className: itemBodyCls
   }, renderTip(), renderComment(), renderList()));
 };
 
-var Approval = function Approval(props) {
-  var _props$status2 = props.status,
-      status = _props$status2 === void 0 ? 1 : _props$status2,
-      _props$steps = props.steps,
-      steps = _props$steps === void 0 ? [] : _props$steps;
+var Approval = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$proposer = props.proposer,
+      proposer = _props$proposer === void 0 ? '' : _props$proposer,
+      _props$user = props.user,
+      user = _props$user === void 0 ? '' : _props$user,
+      _props$steps2 = props.steps,
+      steps = _props$steps2 === void 0 ? [] : _props$steps2,
+      _onUrge2 = props.onUrge,
+      _props$onCarbonCopy = props.onCarbonCopy,
+      onCarbonCopy = _props$onCarbonCopy === void 0 ? function () {} : _props$onCarbonCopy,
+      _props$onDeleteCommen = props.onDeleteComment,
+      _onDeleteComment = _props$onDeleteCommen === void 0 ? function () {} : _props$onDeleteCommen;
+
+  var weakmap = new WeakMap();
+
+  var _isSelf = (0, _util.currentUserIsProposer)(proposer, user);
+
+  var mark = false;
+  steps.forEach(function (step) {
+    if (_type.ApprovalType.isPending(step.type, step.approvalStatus) && !step.name) {
+      step.name = '审批';
+    }
+
+    if (_type.ApprovalType.isCC(step.type) && !step.name) {
+      step.name = '抄送人';
+    }
 
-  var _cacheColorMap = new Map();
+    if (step.refuse) {
+      step.name = step.refuse;
+    }
 
-  steps.forEach(function (step, i) {
-    if (i === 0) {
-      step._status = status;
-    } else {
-      step._status = 2;
+    if (!step.name) {
+      step.name = 'unkonwn';
     }
 
-    if (!step._color) {
-      if (_cacheColorMap.has(step.name)) {
-        step._color = _cacheColorMap.get(step.name);
-      } else {
-        step._color = colors[parseInt(Math.random() * 4 + '')];
+    if (mark) {
+      weakmap.set(step, {
+        hidden: true
+      });
+    } // 拒绝|审核中，后面的不展示
 
-        _cacheColorMap.set(step.name, step._color);
-      }
+
+    if (_type.ApprovalType.isPending(step.type, step.approvalStatus) || _type.ApprovalType.isRefuse(step.type, step.approvalStatus)) {
+      mark = true;
     }
   });
-  var list = steps.map(function (step, i) {
-    return /*#__PURE__*/_react.default.createElement(ApprovalItem, Object.assign({
+  var list = []; // 210 012
+
+  var _loop = function _loop(i) {
+    var step = steps[i];
+    var obj = weakmap.get(step);
+
+    if (obj && obj.hidden) {
+      return "continue";
+    } // 抄送
+
+
+    if (_type.ApprovalType.isCC(step.type) && !step.isCarbonCopy) {
+      onCarbonCopy(step, i, steps);
+      step.time = (0, _handle.getCurrentTime)();
+      step.isCarbonCopy = true;
+    }
+
+    var element = /*#__PURE__*/_react.default.createElement(ApprovalItem, Object.assign({
       key: step.name + i,
-      _cacheColorMap: _cacheColorMap
-    }, step));
-  });
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, list);
-};
+      _isSelf: _isSelf,
+      _user: user
+    }, step, {
+      onUrge: function onUrge() {
+        _onUrge2(step, i, steps);
+      },
+      onDeleteComment: function onDeleteComment() {
+        _onDeleteComment(step, i, steps);
+      }
+    }));
+
+    list.push(element);
+  };
+
+  for (var i = steps.length - 1; i >= 0; i--) {
+    var _ret = _loop(i);
 
-var LMApproval = function LMApproval(props) {
+    if (_ret === "continue") continue;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, list);
+});
+var LMApproval = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
-      others = __rest(props, ["className"]);
+      _props$onUrge = props.onUrge,
+      onUrge = _props$onUrge === void 0 ? function () {} : _props$onUrge,
+      _props$onDeleteCommen2 = props.onDeleteComment,
+      onDeleteComment = _props$onDeleteCommen2 === void 0 ? function () {} : _props$onDeleteCommen2,
+      others = __rest(props, ["className", "onUrge", "onDeleteComment"]);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      update = _useState2[0],
+      setUpdate = _useState2[1];
+
+  var comment = (0, _handle.wrapperComment)(others.user, others.steps, update, setUpdate);
+  var agree = (0, _handle.wrapperAgree)(others.user, others.steps, update, setUpdate);
+  var refuse = (0, _handle.wrapperRefuse)(others.user, others.steps, update, setUpdate);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      comment: comment,
+      agree: agree,
+      refuse: refuse
+    };
+  });
+
+  var _onUrge = function _onUrge(step, i, steps) {
+    step.urge = true;
+    onUrge(step, i, steps);
+    setUpdate(!update);
+  };
 
   return /*#__PURE__*/_react.default.createElement(LMDrawer, Object.assign({
     className: (0, _classnames.default)(className, prefixCls)
-  }, others), /*#__PURE__*/_react.default.createElement(Approval, Object.assign({}, others)));
-};
-
+  }, others), /*#__PURE__*/_react.default.createElement(Approval, Object.assign({}, others, {
+    onUrge: _onUrge,
+    onDeleteComment: onDeleteComment,
+    __update: update
+  })));
+});
 var _default = LMApproval;
 exports.default = _default;

package/lib/Approval/style/index.css

@@ -569,6 +569,19 @@ html {
 .lm_approval_item .lm_approval_item_header .avator .icon.red {
   color: #FA4F53;
 }
+.lm_approval_item .lm_approval_item_header .avator .cc-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: #1890FC;
+}
+.lm_approval_item .lm_approval_item_header .avator .cc-box .cc {
+  color: #fff;
+  font-size: 20px;
+}
 .lm_approval_item .lm_approval_item_header .avator .subname {
   width: 100%;
   height: 100%;
@@ -606,8 +619,13 @@ html {
 .lm_approval_item .lm_approval_item_header .right {
   font-size: 12px;
   line-height: 20px;
+}
+.lm_approval_item .lm_approval_item_header .right span {
   color: var(--color-45);
 }
+.lm_approval_item .lm_approval_item_header .right span.yellow {
+  color: #FD9827;
+}
 .lm_approval_item .lm_approval_item_body {
   min-height: 32px;
   margin: 4px 0 4px 20px;
@@ -627,12 +645,24 @@ html {
   background-color: var(--color-4);
   border-radius: 2px;
 }
-.lm_approval_item .lm_approval_item_body .lm-approver-box {
+.lm_approval_item .lm_approval_item_body .comment .comment-delete {
+  color: #1890FC;
+  font-size: var(--font-size-sm);
+  line-height: 20px;
+  cursor: pointer;
+}
+.lm_approval_item .lm_approval_item_body .comment .comment-delete .icon {
+  font-size: 14px;
+}
+.lm-approver-wrapper {
+  display: flex;
+}
+.lm-approver-wrapper .lm-approver-box {
   display: flex;
   flex-wrap: wrap;
   margin-top: 4px;
 }
-.lm_approval_item .lm_approval_item_body .lm-approver-box .lm-approver-cell {
+.lm-approver-wrapper .lm-approver-box .lm-approver-cell {
   display: flex;
   margin: 0 8px 8px 0;
   height: 24px;
@@ -641,7 +671,7 @@ html {
   padding-right: 8px;
   background-color: var(--color-4);
 }
-.lm_approval_item .lm_approval_item_body .lm-approver-box .lm-approver-cell .lm-approver-circle {
+.lm-approver-wrapper .lm-approver-box .lm-approver-cell .lm-approver-circle {
   width: 20px;
   height: 20px;
   border-radius: 50%;
@@ -651,8 +681,16 @@ html {
   margin-top: 2px;
   text-align: center;
 }
-.lm_approval_item .lm_approval_item_body .lm-approver-box .lm-approver-cell span {
+.lm-approver-wrapper .lm-approver-box .lm-approver-cell span {
   color: var(--color-85);
   font-size: var(--font-size-sm);
   margin-left: 4px;
 }
+.lm-approver-wrapper .lm-approver-box .icon {
+  margin-top: 5px;
+  margin-right: 8px;
+  color: rgba(0, 0, 0, 0.45);
+}
+.lm-approver-wrapper .urge {
+  margin-top: 4px;
+}