@titaui/pc 1.10.7 → 1.10.8-2.beta-1

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

@@ -0,0 +1,102 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _supersetCharts = _interopRequireDefault(require("../../../superset-charts"));
+
+var _dynamicLeftQuoto = _interopRequireDefault(require("../../img/dynamic-left-quoto.svg"));
+
+var _dynamicRightQuoto = _interopRequireDefault(require("../../img/dynamic-right-quoto.svg"));
+
+var _dangerousHtml = _interopRequireDefault(require("../../../dangerous-html"));
+
+var _context = require("../../context");
+
+var _tools = require("../../../../utils/tools");
+
+var _header = _interopRequireDefault(require("../components/header"));
+
+var _utils = require("./utils");
+
+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 _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 prefixCls = "titaui-dynamic-chart";
+
+var DynamicChart = function DynamicChart(_ref) {
+  var data = _ref.data,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var contentRef = (0, _react.useRef)();
+
+  var _useContext = (0, _react.useContext)(_context.SearchKeyContext),
+      searchKeyWord = _useContext.searchKeyWord;
+
+  var chartQuery = (0, _utils.getChartProps)(data.biId); // const chartQuery = getChartProps('{"type":"diaryFeedChart","id":"43","timeRange":"2022/03/01T00:00:00 : 2022/03/05T00:00:00"}');
+  // console.log(chartQuery);
+
+  (0, _react.useEffect)(function () {
+    (0, _tools.highLightWord)({
+      parentDom: contentRef.current,
+      keyWord: searchKeyWord
+    });
+  }, [data, searchKeyWord]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])(prefixCls)
+  }, /*#__PURE__*/_react["default"].createElement(_header["default"], _extends({
+    data: data
+  }, restProps, {
+    user: _utils.systemPublisher,
+    desc: /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        marginLeft: "4px",
+        color: "#89919f"
+      }
+    }, "\u63A8\u9001\u4E86\u6D88\u606F")
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(prefixCls, "__content")
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
+    className: (0, _classnames["default"])("".concat(prefixCls, "__content-quoto"), "".concat(prefixCls, "__content-quoto--left")),
+    src: _dynamicLeftQuoto["default"],
+    alt: "left"
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    ref: contentRef
+  }, /*#__PURE__*/_react["default"].createElement(_dangerousHtml["default"], {
+    htmlText: data.content
+  }), /*#__PURE__*/_react["default"].createElement("img", {
+    className: (0, _classnames["default"])("".concat(prefixCls, "__content-quoto"), "".concat(prefixCls, "__content-quoto--right")),
+    src: _dynamicRightQuoto["default"],
+    alt: "right"
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(prefixCls, "__charts")
+  }, /*#__PURE__*/_react["default"].createElement(_supersetCharts["default"], _extends({
+    width: 800,
+    height: 400,
+    layout: "feed-card"
+  }, chartQuery))));
+};
+
+var _default = DynamicChart;
+exports["default"] = _default;

package/lib/components/dynamic/dynamic-item/dynamic-chart/utils.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.systemPublisher = exports.safeParse = exports.getChartProps = void 0;
+var systemPublisher = {
+  avatar: {
+    big: "https://file.tita.com/TitaImage/352728/d820ed195e204b5aa7d6d1b9bd94f215_b.png",
+    color: "#f0c75a",
+    hasAvatar: true,
+    large: "https://file.tita.com/TitaImage/352728/d820ed195e204b5aa7d6d1b9bd94f215_l.png",
+    medium: "https://file.tita.com/TitaImage/352728/d820ed195e204b5aa7d6d1b9bd94f215_m.png",
+    normal: "https://file.tita.com/TitaImage/352728/d820ed195e204b5aa7d6d1b9bd94f215_n.png",
+    original: "https://file.tita.com/TitaImage/352728/d820ed195e204b5aa7d6d1b9bd94f215_o.png",
+    small: "https://file.tita.com/TitaImage/352728/d820ed195e204b5aa7d6d1b9bd94f215_s.png"
+  },
+  blessingType: 0,
+  decorationType: 0,
+  departmentId: 0,
+  departmentName: null,
+  jobState: 0,
+  medalPosition: null,
+  medalUrl: null,
+  name: "Tita小助手",
+  postition: null,
+  praiseType: 0,
+  tag: null,
+  userId: 100000,
+  userMark: null,
+  userType: 0
+};
+exports.systemPublisher = systemPublisher;
+
+var safeParse = function safeParse(json) {
+  var parsed = {};
+
+  try {
+    parsed = JSON.parse(json);
+  } catch (e) {
+    throw new Error(e);
+  }
+
+  return parsed;
+};
+
+exports.safeParse = safeParse;
+
+var getChartProps = function getChartProps(json) {
+  var parsed = safeParse(json);
+
+  if (typeof parsed === "number") {
+    return {
+      id: parsed
+    };
+  }
+
+  return parsed;
+};
+
+exports.getChartProps = getChartProps;

package/lib/components/dynamic/dynamic-item/dynamic-create-o/index.css

@@ -58,22 +58,23 @@
   line-height: 18px;
 }
 
-.titaui-dynamic-create-o-item__okr-type {
-  margin-right: 4px;
-}
-
-.titaui-dynamic-create-o-item__okr-cycle {
-  margin-left: 4px;
+.titaui-dynamic-create-o-item__okr-type::after {
+  content: '';
+  width: 1px;
+  height: 14px;
+  background: linear-gradient(180deg, rgba(191, 199, 213, 0) 0%, #bfc7d5 50%, rgba(240, 242, 245, 0) 100%);
+  display: inline-block;
+  margin: 0 8px;
+  vertical-align: text-top;
 }
 
 .titaui-dynamic-create-o-item__okr-krs {
-  margin-top: 4px;
+  margin-top: 12px;
 }
 
 .titaui-dynamic-create-o-item__kr {
   display: flex;
-  align-items: center;
-  margin-top: 8px;
+  margin-top: 6px;
 }
 
 .titaui-dynamic-create-o-item__kr-order {
@@ -81,7 +82,7 @@
   color: #89919f;
   line-height: 18px;
   margin-right: 4px;
-  margin-top: 1px;
+  margin-top: 3px;
   word-break: keep-all;
 }
 
@@ -97,7 +98,7 @@
 }
 
 .titaui-dynamic-create-o-item__operate-desc {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 400;
   color: #89919f;
   line-height: 24px;

package/lib/components/dynamic/dynamic-item/dynamic-create-o/index.js

@@ -29,6 +29,8 @@ var _progress = _interopRequireDefault(require("../../../progress"));
 
 var _util = require("../../util");
 
+var _tools = require("../../../../utils/tools");
+
 require("./index.css");
 
 var _excluded = ["data"];
@@ -60,8 +62,9 @@ var DynamicCreateO = function DynamicCreateO(_ref) {
       okrTypeId = data.okrTypeId,
       principalUser = data.principalUser,
       _data$riskLevel = data.riskLevel,
-      riskLevel = _data$riskLevel === void 0 ? 3 : _data$riskLevel,
-      okrStatus = data.okrStatus,
+      riskLevel = _data$riskLevel === void 0 ? 1 : _data$riskLevel,
+      _data$okrStatus = data.okrStatus,
+      okrStatus = _data$okrStatus === void 0 ? 1 : _data$okrStatus,
       _data$okrProgress = data.okrProgress,
       okrProgress = _data$okrProgress === void 0 ? 0 : _data$okrProgress;
 
@@ -150,7 +153,7 @@ var DynamicCreateO = function DynamicCreateO(_ref) {
     onClick: handleClickOTitle
   }, /*#__PURE__*/_react["default"].createElement(_tooltip["default"].Text, {
     text: /*#__PURE__*/_react["default"].createElement(_searchKeyHandle["default"], {
-      str: okrName,
+      str: (0, _tools.htmlDecodeByRegExp)(okrName),
       keyWord: searchKeyWord
     }),
     isPercent: true
@@ -160,7 +163,7 @@ var DynamicCreateO = function DynamicCreateO(_ref) {
     className: "".concat(prefix, "__okr")
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "".concat(prefix, "__okr-type")
-  }, okrTypeInfo.text), /*#__PURE__*/_react["default"].createElement("span", null, "\xB7"), /*#__PURE__*/_react["default"].createElement("span", {
+  }, okrTypeInfo.text), /*#__PURE__*/_react["default"].createElement("span", {
     className: "".concat(prefix, "__okr-cycle")
   }, cycleName)), krs && krs.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(prefix, "__okr-krs")
@@ -176,7 +179,7 @@ var DynamicCreateO = function DynamicCreateO(_ref) {
         handleClickKrTitle(kr.krId);
       }
     }, /*#__PURE__*/_react["default"].createElement(_searchKeyHandle["default"], {
-      str: kr.krName,
+      str: (0, _tools.htmlDecodeByRegExp)(kr.krName),
       keyWord: searchKeyWord
     })));
   }))))));

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

@@ -51,7 +51,7 @@
 }
 
 .titaui-dynamic-kr-item__object-name {
-  font-size: 16px;
+  font-size: 14px;
   color: #2879ff;
   line-height: 24px;
   margin: 0 4px;
@@ -64,7 +64,7 @@
 }
 
 .titaui-dynamic-kr-item__operate-desc {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 400;
   color: #89919f;
   line-height: 24px;

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

@@ -21,10 +21,12 @@ var _constant = require("../../constant");
 
 var _searchKeyHandle = _interopRequireDefault(require("../../../search-key-handle"));
 
-require("./index.css");
-
 var _context = require("../../context");
 
+var _tools = require("../../../../utils/tools");
+
+require("./index.css");
+
 var _excluded = ["data"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -95,7 +97,7 @@ var DynamicKr = function DynamicKr(_ref) {
     onClick: handleClickKrTitle
   }, /*#__PURE__*/_react["default"].createElement(_tooltip["default"].Text, {
     text: /*#__PURE__*/_react["default"].createElement(_searchKeyHandle["default"], {
-      str: name,
+      str: (0, _tools.htmlDecodeByRegExp)(name),
       keyWord: searchKeyWord
     }),
     isPercent: true

package/lib/components/dynamic/dynamic-item/{dynamic-share-to-dynamic → dynamic-learning}/index.css

@@ -1,6 +1,6 @@
 .titaui-dynamic-share-to-dynamic__operate-desc {
   margin-left: 4px;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: normal;
   color: #89919f;
   line-height: 24px;
@@ -38,7 +38,7 @@
   height: 104px;
   display: flex;
   border-radius: 18px;
-  background: rgba(240, 244, 250, 0.5);
+  background: rgba(40, 121, 255, 0.06);
   padding: 12px;
   box-sizing: border-box;
   margin-left: 88px;

package/lib/components/dynamic/dynamic-item/{dynamic-share-to-dynamic → dynamic-learning}/index.js

@@ -15,7 +15,7 @@ var _context = require("../../context");
 
 var _header = _interopRequireDefault(require("../components/header"));
 
-var _dangerousHtml = _interopRequireDefault(require("../../components/dangerous-html"));
+var _dangerousHtml = _interopRequireDefault(require("../../../dangerous-html"));
 
 var _tools = require("../../../../utils/tools");
 
@@ -56,7 +56,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var prefix = "titaui-dynamic-share-to-dynamic";
 var userId = (0, _bsGlobal.getUserInfo)().Id;
 
-var DynamicShare = function DynamicShare(_ref) {
+var DynamicLearning = function DynamicLearning(_ref) {
   var data = _ref.data,
       _ref$hasDynamicOperea = _ref.hasDynamicOpereateAuth,
       hasDynamicOpereateAuth = _ref$hasDynamicOperea === void 0 ? false : _ref$hasDynamicOperea,
@@ -103,8 +103,9 @@ var DynamicShare = function DynamicShare(_ref) {
   }, [data, searchKeyWord]);
   (0, _react.useEffect)(function () {
     if (data.shareContent && typeof data.shareContent === "string" && data.shareContent.substr(0, 1) === "{") {
-      setTitle(JSON.parse(data.shareContent).title);
-      setContent(htmlToText(JSON.parse(data.shareContent).content));
+      var shareContent = JSON.parse(data.shareContent);
+      setTitle(shareContent.title);
+      setContent(htmlToText(shareContent.content));
     }
   }, []);
   return /*#__PURE__*/_react["default"].createElement("div", {
@@ -139,5 +140,5 @@ var DynamicShare = function DynamicShare(_ref) {
   }, content))));
 };
 
-var _default = DynamicShare;
+var _default = DynamicLearning;
 exports["default"] = _default;

package/lib/components/dynamic/dynamic-item/dynamic-milestone/constant.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MileStoneStatusClass2StatusTypeText = void 0;
+exports.MileStoneStatusClass2StatusTypeText = exports.EStatusStatus2ClassType = void 0;
 
 var _getLocale = require("../../../../utils/getLocale");
 
@@ -13,4 +13,11 @@ var MileStoneStatusClass2StatusTypeText = {
   4: (0, _getLocale.getLocale)("OKR_MyO_E_Overdue"),
   3: (0, _getLocale.getLocale)("Pro_page_Sta_Completed")
 };
-exports.MileStoneStatusClass2StatusTypeText = MileStoneStatusClass2StatusTypeText;
+exports.MileStoneStatusClass2StatusTypeText = MileStoneStatusClass2StatusTypeText;
+var EStatusStatus2ClassType = {
+  3: "tu-icon-finished",
+  2: "tu-icon-running",
+  4: "tu-icon-deferred",
+  1: "tu-icon-notstart"
+};
+exports.EStatusStatus2ClassType = EStatusStatus2ClassType;

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

@@ -93,7 +93,7 @@
 }
 
 .titaui-dynamic-milestone-item__object-name {
-  font-size: 16px;
+  font-size: 14px;
   color: #2879ff;
   line-height: 24px;
   margin: 0 4px;
@@ -106,7 +106,7 @@
 }
 
 .titaui-dynamic-milestone-item__operate-desc {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 400;
   color: #89919f;
   line-height: 24px;

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

@@ -25,6 +25,8 @@ var _tooltip = _interopRequireDefault(require("../../../tooltip"));
 
 var _getLocale = require("../../../../utils/getLocale");
 
+var _tools = require("../../../../utils/tools");
+
 require("./index.css");
 
 var _excluded = ["data"];
@@ -81,7 +83,7 @@ var DynamicMilestone = function DynamicMilestone(_ref) {
       className: "".concat(prefix, "__content-title-text"),
       onClick: handleClickTaskTitle
     }, /*#__PURE__*/_react["default"].createElement(_searchKeyHandle["default"], {
-      str: name,
+      str: (0, _tools.htmlDecodeByRegExp)(name),
       keyWord: searchKeyWord
     }));
   }, [name, searchKeyWord]);
@@ -122,7 +124,7 @@ var DynamicMilestone = function DynamicMilestone(_ref) {
   }))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(prefix, "__content-status-and-time-range")
   }, /*#__PURE__*/_react["default"].createElement("i", {
-    className: (0, _classnames["default"])(_constant2.EStatusStatus2ClassType[status], "".concat(prefix, "__content-status-icon"))
+    className: (0, _classnames["default"])(_constant.EStatusStatus2ClassType[status], "".concat(prefix, "__content-status-icon"))
   }), /*#__PURE__*/_react["default"].createElement("span", {
     className: "".concat(prefix, "__content-status-text")
   }, _constant.MileStoneStatusClass2StatusTypeText[status]), /*#__PURE__*/_react["default"].createElement("i", {

package/lib/components/dynamic/dynamic-item/dynamic-okrs-communication/index.css

@@ -56,7 +56,7 @@
 }
 
 .titaui-dynamic-okrs-communication-item__operate-desc {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 400;
   color: #89919f;
   line-height: 24px;

package/lib/components/dynamic/dynamic-item/dynamic-plan-communication/index.css

@@ -56,7 +56,7 @@
 }
 
 .titaui-dynamic-plan-communication-item__operate-desc {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 400;
   color: #89919f;
   line-height: 24px;

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

@@ -28,12 +28,8 @@
   margin-top: 12px;
 }
 
-.titaui-dynamic-progress-item__status-percent {
-  margin-left: 8px;
-}
-
 .titaui-dynamic-progress-item__object-name {
-  font-size: 16px;
+  font-size: 14px;
   color: #2879ff;
   line-height: 24px;
   margin: 0 4px;
@@ -50,7 +46,7 @@
 }
 
 .titaui-dynamic-progress-item__operate-desc {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 400;
   color: #89919f;
   line-height: 24px;

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

@@ -33,6 +33,8 @@ var _conditionRender = _interopRequireDefault(require("../../../condition-render
 
 var _tooltip = _interopRequireDefault(require("../../../tooltip"));
 
+var _tools = require("../../../../utils/tools");
+
 require("./index.css");
 
 var _excluded = ["data"];
@@ -142,12 +144,12 @@ var DynamicProgress = function DynamicProgress(_ref) {
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(prefix, "__title")
   }, /*#__PURE__*/_react["default"].createElement(_title["default"], _extends({
-    content: obj === null || obj === void 0 ? void 0 : obj.objName,
+    content: (0, _tools.htmlDecodeByRegExp)(obj === null || obj === void 0 ? void 0 : obj.objName),
     onClickTitle: handleClickTitle
   }, (0, _utils.getDynamicTitleProps)(obj)))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(prefix, "__status")
   }, /*#__PURE__*/_react["default"].createElement(_conditionRender["default"], {
-    condition: obj && (obj.objType !== _constant.EObjType.Task || obj.objType !== _constant.EObjType.Project)
+    condition: obj && obj.objType !== _constant.EObjType.Task && obj.objType !== _constant.EObjType.Project
   }, /*#__PURE__*/_react["default"].createElement(_objStatus["default"], {
     oStatus: 1,
     riskLevel: riskLevel,

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

@@ -8,7 +8,7 @@
 }
 
 .titaui-dynamic-project-item__content {
-  height: 78px;
+  height: 68px;
   display: flex;
   align-items: center;
   border-radius: 12px;
@@ -93,7 +93,7 @@
 }
 
 .titaui-dynamic-project-item__operate-desc {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 400;
   color: #89919f;
   line-height: 24px;

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

@@ -25,6 +25,8 @@ var _tooltip = _interopRequireDefault(require("../../../tooltip"));
 
 var _getLocale = require("../../../../utils/getLocale");
 
+var _tools = require("../../../../utils/tools");
+
 require("./index.css");
 
 var _excluded = ["data"];
@@ -65,7 +67,7 @@ var DynamicProject = function DynamicProject(_ref) {
       className: "".concat(prefix, "__content-title-text"),
       onClick: handleClickTitle
     }, /*#__PURE__*/_react["default"].createElement(_searchKeyHandle["default"], {
-      str: workName,
+      str: (0, _tools.htmlDecodeByRegExp)(workName),
       keyWord: searchKeyWord
     }));
   }, [workName, searchKeyWord]);

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

@@ -1,5 +1,3 @@
-@charset "UTF-8";
-
 .titaui-dynamic-relative-item {
   position: relative;
   font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
@@ -15,6 +13,10 @@
   flex-direction: column;
 }
 
+.titaui-dynamic-relative-item__obj-other-info {
+  line-height: 18px;
+}
+
 .titaui-dynamic-relative-item__obj-base-info {
   display: flex;
   align-items: center;
@@ -26,7 +28,7 @@
   height: 40px;
   min-width: 40px;
   border-radius: 50%;
-  margin-right: 8px;
+  margin-right: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -80,9 +82,13 @@
 }
 
 .titaui-dynamic-relative-item__obj-principal-user::after {
-  content: '·';
+  content: '';
+  width: 1px;
+  height: 14px;
+  background: linear-gradient(180deg, rgba(191, 199, 213, 0) 0%, #bfc7d5 50%, rgba(240, 242, 245, 0) 100%);
   display: inline-block;
-  margin: 0 4px;
+  margin: 0 8px;
+  vertical-align: text-top;
 }
 
 .titaui-dynamic-relative-item__obj-cycle {
@@ -99,11 +105,11 @@
 }
 
 .titaui-dynamic-relative-item__space {
-  height: 20px;
+  height: 30px;
 }
 
 .titaui-dynamic-relative-item__operate-desc {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 400;
   color: #89919f;
   line-height: 24px;