@titaui/pc 1.5.69-beta.2 → 1.5.69-beta.23

package/lib/components/dynamic/dynamic-item/dynamic-relative/index.js

@@ -0,0 +1,192 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _header = _interopRequireDefault(require("../components/header"));
+
+var _tooltip = require("../../../tooltip");
+
+var _openData = require("../../../../utils/open-data");
+
+var _constant = require("../../constant");
+
+var _dynamicRelative = _interopRequireDefault(require("./img/dynamic-relative.svg"));
+
+var _conditionRender = _interopRequireDefault(require("../../components/condition-render"));
+
+var _manager = _interopRequireDefault(require("../../../drawer/manager"));
+
+var _util = require("../../util");
+
+var _context = require("../../context");
+
+var _searchKeyHandle = _interopRequireDefault(require("../../../search-key-handle"));
+
+require("./index.css");
+
+var _excluded = ["data"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var prefix = "titaui-dynamic-relative-item";
+
+var DynamicRelative = function DynamicRelative(_ref) {
+  var _classNames;
+
+  var data = _ref.data,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var objName = data.objName,
+      objId = data.objId,
+      objType = data.objType,
+      relateObjType = data.relateObjType,
+      relateObjName = data.relateObjName,
+      relateObjId = data.relateObjId,
+      objCycleName = data.objCycleName,
+      status = data.status,
+      objPrincipalUser = data.objPrincipalUser,
+      rObjprincipalUser = data.rObjprincipalUser,
+      rObjCycleName = data.rObjCycleName,
+      publishUser = data.publishUser;
+
+  var _useContext = (0, _react.useContext)(_context.SearchKeyContext),
+      searchKeyWord = _useContext.searchKeyWord;
+
+  var _getFeedTypeAndTypeCo = (0, _util.getFeedTypeAndTypeColor)(data.feedType),
+      feedTypeText = _getFeedTypeAndTypeCo.feedTypeText,
+      feedTypeColor = _getFeedTypeAndTypeCo.feedTypeColor;
+
+  var handleClickTitle = function handleClickTitle(id, type) {
+    if (type === _constant.EObjType.Kr) {
+      _manager["default"].open("krDetail", {
+        krId: id
+      });
+    }
+
+    if (type === _constant.EObjType.O) {
+      _manager["default"].open("okrDetail", {
+        okrId: id
+      });
+    }
+
+    if (type === _constant.EObjType.Project) {
+      window.open(window.location.href.replace(location.hash, "#work?iTalentNavCode=tita-work&work_id=" + id));
+    }
+
+    if (type === _constant.EObjType.Task) {
+      window.Talent.app.vent.trigger("global-pull-screen", id, "task");
+    }
+  };
+
+  var renderDesc = (0, _react.useMemo)(function () {
+    var text;
+
+    if (relateObjType === _constant.EObjType.Kr) {
+      text = "关联了关键成果";
+    }
+
+    if (relateObjType === _constant.EObjType.O) {
+      text = "关联了目标";
+    }
+
+    return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
+      className: prefix + "__operate-desc"
+    }, text), /*#__PURE__*/_react["default"].createElement("span", {
+      className: prefix + "-desc-operate-type",
+      style: {
+        background: feedTypeColor
+      }
+    }, feedTypeText));
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: prefix
+  }, /*#__PURE__*/_react["default"].createElement(_header["default"], _extends({
+    data: data
+  }, restProps, {
+    desc: renderDesc,
+    user: publishUser
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(prefix, "__content")
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: prefix + "__obj"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: prefix + "__obj-base-info"
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: (0, _classnames["default"])(prefix + "__obj-base-info-icon", {
+      "tu-icon-okr": relateObjType === _constant.EObjType.O,
+      "tu-icon-KR": relateObjType === _constant.EObjType.Kr
+    })
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: prefix + "__obj-title",
+    onClick: function onClick() {
+      handleClickTitle(relateObjId, relateObjType);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_tooltip.TooltipText, {
+    isPercent: true,
+    text: /*#__PURE__*/_react["default"].createElement(_searchKeyHandle["default"], {
+      str: relateObjName,
+      keyWord: searchKeyWord
+    })
+  }))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: prefix + "__obj-principal-user"
+  }, /*#__PURE__*/_react["default"].createElement(_conditionRender["default"], {
+    condition: rObjprincipalUser
+  }, /*#__PURE__*/_react["default"].createElement(_openData.OpenUserName, {
+    id: rObjprincipalUser.userId,
+    name: rObjprincipalUser.name
+  }))), /*#__PURE__*/_react["default"].createElement("span", {
+    className: prefix + "__obj-cycle"
+  }, rObjCycleName))), /*#__PURE__*/_react["default"].createElement("img", {
+    className: prefix + "__relative-img",
+    src: _dynamicRelative["default"]
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: prefix + "__space"
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: prefix + "__obj"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: prefix + "__obj-base-info"
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: (0, _classnames["default"])(prefix + "__obj-base-info-icon", (_classNames = {}, _defineProperty(_classNames, _constant.EStatusStatus2ClassType[status], objType === _constant.EObjType.Task), _defineProperty(_classNames, "tu-icon-project-s", objType === _constant.EObjType.Project), _classNames))
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: prefix + "__obj-title",
+    onClick: function onClick() {
+      handleClickTitle(objId, objType);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_tooltip.TooltipText, {
+    isPercent: true,
+    text: objName
+  }))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: prefix + "__obj-principal-user"
+  }, /*#__PURE__*/_react["default"].createElement(_conditionRender["default"], {
+    condition: objPrincipalUser
+  }, /*#__PURE__*/_react["default"].createElement(_openData.OpenUserName, {
+    id: objPrincipalUser.userId,
+    name: objPrincipalUser.name
+  }))), /*#__PURE__*/_react["default"].createElement("span", {
+    className: prefix + "__obj-cycle"
+  }, objCycleName)))));
+};
+
+var _default = DynamicRelative;
+exports["default"] = _default;

package/lib/components/dynamic/dynamic-item/dynamic-replay/index.css

@@ -0,0 +1,138 @@
+.titaui-dynamic-reply-item {
+  font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+}
+
+.titaui-dynamic-reply-item__content {
+  margin-left: 69px;
+}
+
+.titaui-dynamic-reply-item__detail {
+  margin-top: 16px;
+}
+
+.titaui-dynamic-reply-item__detail-gain {
+  margin-bottom: 16px;
+}
+
+.titaui-dynamic-reply-item__detail-drawback {
+  margin-bottom: 16px;
+}
+
+.titaui-dynamic-reply-item__detail-tasks-item {
+  display: flex;
+  align-items: center;
+  margin-left: 8px;
+  font-size: 14px;
+  color: #6f7886;
+  line-height: 22px;
+  cursor: pointer;
+}
+
+.titaui-dynamic-reply-item__detail-tasks-item::before {
+  content: "";
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  background: #2879ff;
+  border-radius: 50%;
+  margin-right: 6px;
+}
+
+.titaui-dynamic-reply-item__detail-tasks-item:hover {
+  color: #2879ff;
+}
+
+.titaui-dynamic-reply-item__detail-block-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #3f4755;
+  line-height: 22px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.titaui-dynamic-reply-item__detail-block-title::before {
+  content: "";
+  display: inline-block;
+  width: 4px;
+  height: 12px;
+  background: linear-gradient(180deg, #2879ff 0%, #9fbfff 100%);
+  border-radius: 2px;
+  margin-right: 4px;
+}
+
+.titaui-dynamic-reply-item__detail-block-title--sub {
+  display: flex;
+  align-items: center;
+  margin-bottom: 4px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #3f4755;
+  line-height: 22px;
+  margin-left: 8px;
+}
+
+.titaui-dynamic-reply-item__detail-block-title--sub::before {
+  content: "";
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  background: #2879ff;
+  border-radius: 50%;
+  margin-right: 6px;
+}
+
+.titaui-dynamic-reply-item__detail-block-content {
+  font-size: 14px;
+  font-weight: 400;
+  color: #6f7886;
+  line-height: 22px;
+  margin-bottom: 4px;
+  margin-left: 8px;
+}
+
+.titaui-dynamic-reply-item__detail-block-content--sub {
+  margin-left: 20px;
+}
+
+.titaui-dynamic-reply-item__object-name {
+  font-size: 14px;
+  color: #2879ff;
+  line-height: 22px;
+  margin: 0 4px;
+  overflow: hidden;
+}
+
+.titaui-dynamic-reply-item__object-name:hover {
+  cursor: pointer;
+  color: #5c8eff;
+}
+
+.titaui-dynamic-reply-item__operate-desc {
+  font-size: 14px;
+  font-weight: 400;
+  color: #89919f;
+  line-height: 22px;
+  margin: 0 8px 0 4px;
+  overflow: hidden;
+}
+
+.titaui-dynamic-reply-item__operate-desc-wrapper {
+  display: flex;
+}
+
+.titaui-dynamic-reply-item-desc-operate-type {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 2px;
+  height: 18px;
+  min-width: 40px;
+  clip-path: polygon(0 100%, 100% 100%, 100% 0, 15% 0);
+  -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 15% 0);
+  border-radius: 14px 10px 10px 4px;
+  font-size: 12px;
+  color: #ffffff;
+  line-height: 18px;
+}

package/lib/components/dynamic/dynamic-item/{components/replay → dynamic-replay}/index.js

@@ -11,32 +11,55 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _commonTitle = _interopRequireDefault(require("../../../components/common-title"));
+var _context = require("../../context");
 
-var _manager = _interopRequireDefault(require("../../../../drawer/manager"));
+var _searchKeyHandle = _interopRequireDefault(require("../../../search-key-handle"));
 
-var _context = require("../../../context");
+var _header = _interopRequireDefault(require("../components/header"));
 
-var _searchKeyHandle = _interopRequireDefault(require("../../../../search-key-handle"));
+var _manager = _interopRequireDefault(require("../../../drawer/manager"));
 
-var _constant = require("../../../constant");
+var _constant = require("../../constant");
+
+var _title = _interopRequireDefault(require("../../components/title"));
+
+var _util = require("../../util");
+
+var _tooltip = require("../../../tooltip");
 
 require("./index.css");
 
+var _excluded = ["data"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var prefix = "titaui-dynamic-replay";
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-var DynamicReplay = function DynamicReplay(_ref) {
-  var data = _ref.data;
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var prefix = "titaui-dynamic-reply-item";
+
+var DynamicReply = function DynamicReply(_ref) {
+  var data = _ref.data,
+      restProps = _objectWithoutProperties(_ref, _excluded);
 
   var _useContext = (0, _react.useContext)(_context.SearchKeyContext),
       searchKeyWord = _useContext.searchKeyWord;
 
+  var replayObjType = data.replayObjType,
+      feedType = data.feedType,
+      publishUser = data.publishUser;
+
+  var _getFeedTypeAndTypeCo = (0, _util.getFeedTypeAndTypeColor)(feedType),
+      feedTypeText = _getFeedTypeAndTypeCo.feedTypeText,
+      feedTypeColor = _getFeedTypeAndTypeCo.feedTypeColor;
+
   var handleShowTaskDrawer = function handleShowTaskDrawer(taskId) {
     window.Talent.app.vent.trigger("global-pull-screen", taskId, "task");
   };
@@ -55,9 +78,50 @@ var DynamicReplay = function DynamicReplay(_ref) {
     }
   };
 
+  var handleClickOTitle = function handleClickOTitle() {
+    _manager["default"].open("okrDetail", {
+      okrId: data.obj.objId
+    });
+  };
+
+  var renderDesc = (0, _react.useMemo)(function () {
+    var dom;
+
+    if (replayObjType === _constant.EObjType.O) {
+      dom = "的目标复盘";
+    }
+
+    if (replayObjType === _constant.EObjType.Kr) {
+      dom = /*#__PURE__*/_react["default"].createElement("span", {
+        className: prefix + "__operate-desc-wrapper"
+      }, "\u5728\u76EE\u6807", /*#__PURE__*/_react["default"].createElement("span", {
+        className: prefix + "__object-name",
+        onClick: handleClickOTitle
+      }, /*#__PURE__*/_react["default"].createElement(_tooltip.TooltipText, {
+        text: data.obj.objName,
+        isPercent: true
+      })), "\u4E0B\u5173\u952E\u6210\u679C\u7684\u590D\u76D8");
+    }
+
+    return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
+      className: prefix + "__operate-desc"
+    }, dom), /*#__PURE__*/_react["default"].createElement("span", {
+      className: prefix + "-desc-operate-type",
+      style: {
+        background: feedTypeColor
+      }
+    }, feedTypeText));
+  }, []);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: prefix
-  }, /*#__PURE__*/_react["default"].createElement(_commonTitle["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_header["default"], _extends({
+    data: data
+  }, restProps, {
+    desc: renderDesc,
+    user: publishUser
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: prefix + "__content"
+  }, /*#__PURE__*/_react["default"].createElement(_title["default"], {
     content: "".concat(data.replayObjType === 65 ? "KR：" : "O：").concat(data.replayObjName),
     onClickTitle: handleClickTitle
   }), /*#__PURE__*/_react["default"].createElement("div", {
@@ -103,6 +167,7 @@ var DynamicReplay = function DynamicReplay(_ref) {
     className: prefix + "__detail-block-title"
   }, "\u884C\u52A8\u8BA1\u5212"), data.tasks && data.tasks.map(function (task) {
     return /*#__PURE__*/_react["default"].createElement("div", {
+      key: task.taskId,
       className: prefix + "__detail-tasks-item",
       onClick: function onClick() {
         handleShowTaskDrawer(task.taskId);
@@ -111,8 +176,8 @@ var DynamicReplay = function DynamicReplay(_ref) {
       str: task.taskName,
       keyWord: searchKeyWord
     }));
-  }))));
+  })))));
 };
 
-var _default = DynamicReplay;
+var _default = DynamicReply;
 exports["default"] = _default;

package/lib/components/dynamic/dynamic-item/dynamic-report/index.css

@@ -0,0 +1,153 @@
+.titaui-dynamic-report-item {
+  font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+}
+
+.titaui-dynamic-report-item__content {
+  margin-left: 69px;
+  line-height: 24px;
+  word-wrap: break-word;
+}
+
+.titaui-dynamic-report-item__content ul {
+  list-style-type: disc;
+  padding-left: 20px;
+}
+
+.titaui-dynamic-report-item__content ol {
+  list-style-type: decimal;
+  padding-left: 20px;
+}
+
+.titaui-dynamic-report-item__content li {
+  list-style-type: inherit;
+  margin: 5px 0;
+}
+
+.titaui-dynamic-report-item__content table {
+  margin: 5px 0;
+}
+
+.titaui-dynamic-report-item__content table td {
+  border: 1px solid #999;
+  padding: 3px 5px;
+  min-width: 50px;
+  height: 20px;
+}
+
+.titaui-dynamic-report-item__content p {
+  margin: 5px 0;
+}
+
+.titaui-dynamic-report-item__content blockquote {
+  display: block;
+  border-left: 4px solid #e3ecf1;
+  padding: 5px;
+  font-size: 12px;
+}
+
+.titaui-dynamic-report-item__content p,
+    .titaui-dynamic-report-item__content li {
+  line-height: 1.7;
+}
+
+.titaui-dynamic-report-item__content a {
+  word-wrap: break-word;
+  word-break: break-all;
+}
+
+.titaui-dynamic-report-item__content pre {
+  padding: 10px;
+  margin: 5px 0px;
+  font-size: 0.8em;
+}
+
+.titaui-dynamic-report-item__content pre code {
+  line-height: 1.5;
+}
+
+.titaui-dynamic-report-item__summary {
+  margin-bottom: 16px;
+  margin-top: 12px;
+}
+
+.titaui-dynamic-report-item__block-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #3f4755;
+  line-height: 22px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.titaui-dynamic-report-item__block-title::before {
+  content: "";
+  display: inline-block;
+  width: 4px;
+  height: 12px;
+  background: linear-gradient(180deg, #2879ff 0%, #9fbfff 100%);
+  border-radius: 2px;
+  margin-right: 4px;
+}
+
+.titaui-dynamic-report-item__content-text {
+  margin-left: 8px;
+}
+
+.titaui-dynamic-report-item__complete-type {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.titaui-dynamic-report-item__complete-type-icon {
+  margin-right: 4px;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+}
+
+.titaui-dynamic-report-item__complete-type-icon--normal {
+  background: url("../../img/dynamic-submit-normal.svg") no-repeat;
+}
+
+.titaui-dynamic-report-item__complete-type-icon--delay {
+  background: url("../../img/dynamic-submit-delay.svg") no-repeat;
+}
+
+.titaui-dynamic-report-item__complete-type--normal {
+  color: #5ad8a6;
+}
+
+.titaui-dynamic-report-item__complete-type--delay {
+  color: #624dff;
+}
+
+.titaui-dynamic-report-item .highlight {
+  color: #f05e5e;
+}
+
+.titaui-dynamic-report-item__operate-desc {
+  font-size: 14px;
+  font-weight: 400;
+  color: #89919f;
+  line-height: 22px;
+  margin: 0 8px 0 4px;
+  overflow: hidden;
+}
+
+.titaui-dynamic-report-item-desc-operate-type {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 2px;
+  height: 18px;
+  min-width: 40px;
+  clip-path: polygon(0 100%, 100% 100%, 100% 0, 15% 0);
+  -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 15% 0);
+  border-radius: 14px 10px 10px 4px;
+  font-size: 12px;
+  color: #ffffff;
+  line-height: 18px;
+}