@titaui/pc 1.5.82 → 1.5.83

package/lib/components/dynamic/components/dynamic-search-input/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 _popup = _interopRequireDefault(require("../../../popup"));
+
+var _userSelector = require("../../../user-selector");
+
+require("./index.css");
+
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var prefix = "titaui-dynamic-search-input";
+var SearchType = {
+  dynamic: "动态",
+  person: "姓名"
+};
+
+var DynamicSearchInput = function DynamicSearchInput(_ref) {
+  var setSearchKey = _ref.setSearchKey,
+      setSearchKeyType = _ref.setSearchKeyType,
+      setSearchUser = _ref.setSearchUser;
+
+  var _useState = (0, _react.useState)("dynamic"),
+      _useState2 = _slicedToArray(_useState, 2),
+      searchDynamicType = _useState2[0],
+      setSearchDynamicType = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(""),
+      _useState4 = _slicedToArray(_useState3, 2),
+      searchInputValue = _useState4[0],
+      setSearchInputValue = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isMouseEnter = _useState6[0],
+      setIsMouseEnter = _useState6[1];
+
+  var popupRef = (0, _react.useRef)();
+  var selectorRef = (0, _react.useRef)();
+  var inputRef = (0, _react.useRef)();
+
+  var handleInputChange = function handleInputChange(e) {
+    setSearchInputValue(e.target.value);
+
+    if (searchDynamicType === "person") {
+      // @ts-ignore
+      selectorRef.current && selectorRef.current.open();
+    }
+  };
+
+  var handleKeyUp = function handleKeyUp(e) {
+    // 按回车
+    if (e.keyCode === 13 && searchDynamicType !== 'person') {
+      setSearchKey(searchInputValue);
+      setSearchKeyType(searchDynamicType);
+    }
+  };
+
+  var handleChangeSearchDynamicType = function handleChangeSearchDynamicType(type) {
+    setSearchDynamicType(type);
+    setSearchKeyType; // @ts-ignore
+
+    popupRef.current && popupRef.current.close();
+  };
+
+  var handleSelected = function handleSelected(_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 1),
+        user = _ref3[0];
+
+    setSearchInputValue(user.data.name);
+    setSearchUser(user.data);
+    setSearchKeyType(searchDynamicType);
+  };
+
+  var handleMouseEnter = function handleMouseEnter() {
+    setIsMouseEnter(true);
+  };
+
+  var handleMouseLeave = function handleMouseLeave() {
+    setIsMouseEnter(false);
+  };
+
+  var handleClearSearchValue = function handleClearSearchValue() {
+    setSearchInputValue('');
+    setSearchKey('');
+    setSearchUser(null);
+    setSearchKeyType(searchDynamicType);
+  };
+
+  var PopupContent = function PopupContent() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: prefix + "__popup"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])(prefix + "__popup-item", _defineProperty({}, prefix + "__popup-item--active", searchDynamicType === "dynamic")),
+      onClick: function onClick() {
+        handleChangeSearchDynamicType("dynamic");
+      }
+    }, "\u52A8\u6001"), /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])(prefix + "__popup-item", _defineProperty({}, prefix + "__popup-item--active", searchDynamicType === "person")),
+      onClick: function onClick() {
+        handleChangeSearchDynamicType("person");
+      }
+    }, "\u59D3\u540D"));
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: prefix,
+    ref: inputRef,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, /*#__PURE__*/_react["default"].createElement(_popup["default"], {
+    popup: PopupContent,
+    popupPlacement: "bottom",
+    ref: popupRef,
+    popupAlign: {
+      offset: [-10, 2],
+      overflow: {
+        adjustX: true,
+        adjustY: true
+      },
+      targetOffset: [0, 0]
+    }
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: prefix + "__select-type"
+  }, /*#__PURE__*/_react["default"].createElement("span", null, SearchType[searchDynamicType]), /*#__PURE__*/_react["default"].createElement("i", {
+    className: (0, _classnames["default"])("tu-icon-sort-down", prefix + "__icon")
+  }))), /*#__PURE__*/_react["default"].createElement("input", {
+    className: prefix + "__input",
+    value: searchInputValue,
+    onChange: handleInputChange,
+    onKeyUp: handleKeyUp,
+    placeholder: searchDynamicType === 'dynamic' ? '按关键词搜索' : '按姓名搜索'
+  }), isMouseEnter && searchInputValue && /*#__PURE__*/_react["default"].createElement("i", {
+    onClick: handleClearSearchValue,
+    className: (0, _classnames["default"])("tu-icon-circle", prefix + "__input-clear")
+  }), /*#__PURE__*/_react["default"].createElement(_userSelector.FieldPersonSelector, {
+    ref: selectorRef,
+    multiple: false,
+    position: "bottomRight",
+    onSelect: handleSelected,
+    disabledDepartSelect: true,
+    showSearchInput: false,
+    searchWord: searchInputValue,
+    trigger: /*#__PURE__*/_react["default"].createElement("span", null),
+    getPopupContainer: function getPopupContainer() {
+      return inputRef.current;
+    },
+    panes: {
+      depart: false,
+      group: false
+    },
+    popupAlign: {
+      offset: [17, 15],
+      overflow: {
+        adjustX: true,
+        adjustY: true
+      },
+      targetOffset: [0, 0]
+    }
+  }));
+};
+
+var _default = DynamicSearchInput;
+exports["default"] = _default;

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

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

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _util = require("../../util");
+
+require("./index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var prefix = "titaui-dynamic-obj-status";
+var StateIconMapping = {
+  delay: "".concat(prefix, "--delay"),
+  normal: "".concat(prefix, "--normal"),
+  risk: "".concat(prefix, "--risk"),
+  end: "".concat(prefix, "--end")
+};
+
+var DynamicObjStatus = function DynamicObjStatus(_ref) {
+  var _ref$oStatus = _ref.oStatus,
+      oStatus = _ref$oStatus === void 0 ? 1 : _ref$oStatus,
+      _ref$riskLevel = _ref.riskLevel,
+      riskLevel = _ref$riskLevel === void 0 ? 1 : _ref$riskLevel,
+      extraClass = _ref.extraClass;
+  return /*#__PURE__*/_react["default"].createElement("span", {
+    className: (0, _classnames["default"])(extraClass, prefix, StateIconMapping[(0, _util.getProgressState)(oStatus, riskLevel)])
+  });
+};
+
+var _default = DynamicObjStatus;
+exports["default"] = _default;

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

@@ -0,0 +1,21 @@
+.titaui-dynamic-percent {
+  font-size: 16px;
+  font-weight: 600;
+  color: #3f4755;
+  line-height: 24px;
+}
+
+.titaui-dynamic-percent__grow {
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 20px;
+  margin-left: 4px;
+}
+
+.titaui-dynamic-percent__grow--increase {
+  color: #5ad8a6;
+}
+
+.titaui-dynamic-percent__grow--decrease {
+  color: #f05e5e;
+}

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+require("./index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+var prefix = "titaui-dynamic-percent";
+
+var DynamicPercent = function DynamicPercent(_ref) {
+  var _classNames;
+
+  var _ref$percent = _ref.percent,
+      percent = _ref$percent === void 0 ? 0 : _ref$percent,
+      _ref$growPercent = _ref.growPercent,
+      growPercent = _ref$growPercent === void 0 ? 0 : _ref$growPercent,
+      extraClass = _ref.extraClass;
+  return /*#__PURE__*/_react["default"].createElement("span", {
+    className: (0, _classnames["default"])(extraClass, prefix)
+  }, percent, "%", growPercent !== 0 && /*#__PURE__*/_react["default"].createElement("span", {
+    className: (0, _classnames["default"])(prefix + "__grow", (_classNames = {}, _defineProperty(_classNames, prefix + "__grow--increase", growPercent > 0), _defineProperty(_classNames, prefix + "__grow--decrease", growPercent < 0), _classNames))
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: growPercent > 0 ? "tu-icon-simple-sort-up" : "tu-icon-simple-sort-down"
+  }), Math.abs(growPercent), "%"));
+};
+
+var _default = DynamicPercent;
+exports["default"] = _default;

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

@@ -0,0 +1,35 @@
+.titaui-dynamic-title {
+  display: inline-flex;
+  overflow: hidden;
+}
+
+.titaui-dynamic-title__content {
+  display: flex;
+  height: 36px;
+  overflow: hidden;
+  box-sizing: border-box;
+  background: #f6f7f9;
+  border-radius: 18px 18px 18px 1px;
+  word-break: keep-all;
+  white-space: nowrap;
+  padding: 7px 12px;
+  font-size: 14px;
+  line-height: 22px;
+  color: #3f4755;
+  font-weight: 600;
+}
+
+.titaui-dynamic-title__content-symbol {
+  color: #2879ff;
+  margin-right: 4px;
+}
+
+.titaui-dynamic-title__content-text {
+  flex: 1;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.titaui-dynamic-title__content-text:hover {
+  color: #2879ff !important;
+}

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

@@ -0,0 +1,59 @@
+"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 _tooltip = require("../../../tooltip");
+
+var _searchKeyHandle = _interopRequireDefault(require("../../../search-key-handle"));
+
+var _context = require("../../context");
+
+require("./index.css");
+
+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-title";
+
+var DynamicTitle = function DynamicTitle(_ref) {
+  var content = _ref.content,
+      onClickTitle = _ref.onClickTitle,
+      suffixContent = _ref.suffixContent;
+
+  var _useContext = (0, _react.useContext)(_context.SearchKeyContext),
+      searchKeyWord = _useContext.searchKeyWord;
+
+  var onTitleClick = function onTitleClick() {
+    onClickTitle && onClickTitle();
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: prefix
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(prefix, "__content")
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(prefix, "__content-symbol")
+  }, "#"), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(prefix, "__content-text"),
+    onClick: onTitleClick
+  }, /*#__PURE__*/_react["default"].createElement(_tooltip.TooltipText, {
+    text: /*#__PURE__*/_react["default"].createElement(_searchKeyHandle["default"], {
+      str: content,
+      keyWord: searchKeyWord
+    }),
+    isPercent: true
+  })), suffixContent));
+};
+
+var _default = DynamicTitle;
+exports["default"] = _default;

package/lib/components/dynamic/constant.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EStatusStatus2ClassType = exports.ObjectType = exports.ObjTypeMapText = exports.EObjType = exports.EFeedType = exports.OkrRiskMapping = void 0;
+
+var _ObjTypeMapText;
+
+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; }
+
+var OkrRiskMapping = {
+  0: 'normal',
+  // 正常推进
+  1: 'normal',
+  // 正常推进
+  2: 'risk',
+  // 注意风险
+  3: 'delay',
+  // 已有风险
+  4: 'end',
+  // kr及o全都完成
+  5: 'delay',
+  // 延期完成
+  6: 'normal' // 正常推进
+
+};
+exports.OkrRiskMapping = OkrRiskMapping;
+var EFeedType;
+exports.EFeedType = EFeedType;
+
+(function (EFeedType) {
+  EFeedType[EFeedType["Unknow"] = 0] = "Unknow";
+  EFeedType[EFeedType["Share"] = 1] = "Share";
+  EFeedType[EFeedType["Plan"] = 4] = "Plan";
+  EFeedType[EFeedType["Report"] = 5] = "Report";
+  EFeedType[EFeedType["Assessment"] = 7] = "Assessment";
+  EFeedType[EFeedType["Project"] = 10] = "Project";
+  EFeedType[EFeedType["Reward"] = 11] = "Reward";
+  EFeedType[EFeedType["WorkHour"] = 13] = "WorkHour";
+  EFeedType[EFeedType["Bless"] = 14] = "Bless";
+  EFeedType[EFeedType["Kr"] = 15] = "Kr";
+  EFeedType[EFeedType["MileStone"] = 16] = "MileStone";
+  EFeedType[EFeedType["OkrEStatistics"] = 17] = "OkrEStatistics";
+  EFeedType[EFeedType["Reply"] = 18] = "Reply";
+  EFeedType[EFeedType["OkrCycle"] = 19] = "OkrCycle";
+  EFeedType[EFeedType["Task"] = 20] = "Task";
+  EFeedType[EFeedType["Progress"] = 21] = "Progress";
+  EFeedType[EFeedType["Align"] = 22] = "Align";
+  EFeedType[EFeedType["Relative"] = 23] = "Relative";
+  EFeedType[EFeedType["Announcement"] = 24] = "Announcement";
+  EFeedType[EFeedType["Signin"] = 80] = "Signin";
+  EFeedType[EFeedType["O"] = 101] = "O";
+})(EFeedType || (exports.EFeedType = EFeedType = {}));
+
+var EObjType;
+exports.EObjType = EObjType;
+
+(function (EObjType) {
+  EObjType[EObjType["Project"] = 4] = "Project";
+  EObjType[EObjType["Task"] = 7] = "Task";
+  EObjType[EObjType["O"] = 62] = "O";
+  EObjType[EObjType["Kr"] = 65] = "Kr";
+  EObjType[EObjType["Assess"] = 23] = "Assess";
+  EObjType[EObjType["MileStone"] = 27] = "MileStone";
+})(EObjType || (exports.EObjType = EObjType = {}));
+
+var ObjTypeMapText = (_ObjTypeMapText = {}, _defineProperty(_ObjTypeMapText, EObjType.Project, '项目'), _defineProperty(_ObjTypeMapText, EObjType.Task, '任务'), _defineProperty(_ObjTypeMapText, EObjType.O, '目标'), _defineProperty(_ObjTypeMapText, EObjType.Kr, '关键成果'), _defineProperty(_ObjTypeMapText, EObjType.MileStone, '里程碑'), _ObjTypeMapText);
+exports.ObjTypeMapText = ObjTypeMapText;
+var ObjectType = {
+  1: '公告/分享',
+  4: '项目',
+  5: '绩效考核表',
+  6: '绩效目标',
+  7: '任务',
+  8: '日报（总结）',
+  10: 'Feed',
+  11: '计划',
+  12: '计划表的操作记录',
+  62: '目标',
+  65: '关键成果',
+  70: '复盘',
+  79: '关键成果进展',
+  80: '公告',
+  42: '打赏'
+};
+exports.ObjectType = ObjectType;
+var EStatusStatus2ClassType = {
+  2: 'tu-icon-finished',
+  1: 'tu-icon-running',
+  4: 'tu-icon-canceled',
+  3: 'tu-icon-deferred',
+  6: 'tu-icon-paused',
+  0: 'tu-icon-notstart',
+  5: 'tu-icon-jiantou-right'
+};
+exports.EStatusStatus2ClassType = EStatusStatus2ClassType;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SearchKeyContext = void 0;
+
+var _react = require("react");
+
+var SearchKeyContext = /*#__PURE__*/(0, _react.createContext)({
+  searchKeyWord: ''
+});
+exports.SearchKeyContext = SearchKeyContext;

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

@@ -0,0 +1,101 @@
+.titaui-dynamic-item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding: 24px 0 0 20px;
+}
+
+.titaui-dynamic-item-header-left {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  overflow: hidden;
+}
+
+.titaui-dynamic-item-header-left .titaui-pc-avator-container {
+  display: inline-flex;
+  align-items: center;
+}
+
+.titaui-dynamic-item-header-right {
+  font-size: 16px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: rotate(90deg);
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.titaui-dynamic-item-header-right:hover {
+  background: #f0f4fa;
+}
+
+.titaui-dynamic-item-header-desc {
+  flex: 1;
+  margin-left: 8px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.titaui-dynamic-item-header-desc-title {
+  word-break: keep-all;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-flex;
+  align-items: center;
+  flex: 1;
+  margin-right: 60px;
+}
+
+.titaui-dynamic-item-header-desc-user {
+  font-size: 14px;
+  font-weight: 600;
+  color: #3f4755;
+  line-height: 22px;
+}
+
+.titaui-dynamic-item-header-desc-user:hover {
+  cursor: pointer;
+  color: #2879ff;
+}
+
+.titaui-dynamic-item-header-desc-user--not-link:hover {
+  cursor: default !important;
+  color: #3f4755 !important;
+}
+
+.titaui-dynamic-item-header-desc-time {
+  font-size: 12px;
+  color: #89919f;
+  line-height: 18px;
+}
+
+.titaui-dynamic-item-header-desc-avatar:hover {
+  cursor: pointer;
+}
+
+.titaui-dynamic-item-header-desc-avatar--not-link:hover {
+  cursor: default !important;
+}
+
+.titaui-dynamic-item-header__more-operate {
+  font-size: 14px;
+  color: #3F4755;
+  line-height: 22px;
+}
+
+.titaui-dynamic-item-header__more-operate-selection {
+  display: flex;
+  align-items: center;
+  height: 32px;
+}
+
+.titaui-dynamic-item-header__more-operate-selection-icon {
+  margin-right: 10px;
+}