@titaui/pc 1.12.14 → 1.12.17-beta.1

package/lib/components/nav-top/components/app-center/index.css

@@ -0,0 +1,170 @@
+@charset "UTF-8";
+
+.app-center {
+  padding: 32px 120px 28px;
+  position: relative;
+  box-shadow: 0 8px 24px 0 rgb 127 145 180/20%;
+}
+
+.app-center__title {
+  font-size: 24px;
+  color: #141c28;
+  line-height: 38px;
+  margin-bottom: 32px;
+  font-weight: 500;
+  font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+}
+
+.app-center__app-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.app-center__app-item {
+  flex: 1;
+  box-sizing: border-box;
+  min-width: 260px;
+  min-height: 56px;
+  margin: 4px 0;
+  padding: 12px 16px;
+  border-radius: 16px;
+  position: relative;
+  cursor: pointer;
+}
+
+.app-center__app-item-icon {
+  position: absolute;
+  left: 16px;
+  top: 12px;
+  width: 32px;
+  height: 32px;
+  margin-right: 12px;
+  background-size: contain;
+}
+
+.app-center__app-item-icon--chart {
+  background-image: url(./images/chart.svg);
+}
+
+.app-center__app-item-icon--document {
+  background-image: url("./images/file.svg");
+}
+
+.app-center__app-item-icon--interview {
+  background-image: url("./images/interview.svg");
+}
+
+.app-center__app-item-icon--learning {
+  background-image: url("./images/learning.svg");
+}
+
+.app-center__app-item-icon--okr {
+  background-image: url("./images/okr.svg");
+}
+
+.app-center__app-item-icon--performance {
+  background-image: url("./images/performance.svg");
+}
+
+.app-center__app-item-icon--project {
+  background-image: url("./images/project.svg");
+}
+
+.app-center__app-item-icon--summary {
+  background-image: url("./images/summary.svg");
+}
+
+.app-center__app-item-icon--plan {
+  background-image: url("./images/plan.svg");
+}
+
+.app-center__app-item-desc {
+  margin-top: 3px;
+  margin-left: 44px;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-center__app-item-name {
+  font-size: 16px;
+  color: #141c28;
+  line-height: 26px;
+  font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+}
+
+.app-center__app-item-sub-title {
+  font-size: 14px;
+  font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+  color: #89919f;
+  line-height: 22px;
+  margin-top: 4px;
+}
+
+.app-center__app-item-placeholder {
+  flex: 1;
+  height: 0;
+  box-sizing: border-box;
+  min-width: 260px;
+  padding: 0 16px;
+}
+
+.app-center__app-item--okr:hover {
+  background-color: rgba(40, 121, 255, 0.1);
+}
+
+.app-center__app-item--performance:hover {
+  background-color: rgba(255, 178, 0, 0.1);
+}
+
+.app-center__app-item--plan:hover {
+  background-color: rgba(90, 216, 166, 0.1);
+}
+
+.app-center__app-item--work:hover {
+  background-color: rgba(98, 77, 255, 0.1);
+}
+
+.app-center__app-item--report:hover {
+  background-color: rgba(63, 73, 255, 0.1);
+}
+
+.app-center__app-item--learning:hover {
+  background-color: rgba(240, 94, 94, 0.1);
+}
+
+.app-center__app-item--interview:hover {
+  background-color: rgba(240, 94, 94, 0.1);
+}
+
+.app-center__app-item--daily:hover {
+  background-color: rgba(255, 168, 28, 0.1);
+}
+
+.app-center__app-item--document:hover {
+  background-color: rgba(90, 216, 166, 0.1);
+}
+
+.app-center__drawer {
+  transform: translateY(54px);
+}
+
+.app-center__drawer .drawer-content-wrapper,
+    .app-center__drawer .drawer-content {
+  border-radius: 24px;
+}
+
+.app-center__drawer .drawer-mask {
+  border-radius: 24px 24px 0 0;
+}
+
+.app-center__app-right-img {
+  position: absolute;
+  right: 0;
+  bottom: 22px;
+}
+
+.app-center__app-right-img__img {
+  cursor: pointer;
+  width: 120px;
+  height: 144px;
+}

package/lib/components/nav-top/components/app-center/index.js

@@ -0,0 +1,211 @@
+"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 _drawer = _interopRequireDefault(require("../../../drawer"));
+
+var _bookDemo = _interopRequireDefault(require("../../../book-demo"));
+
+var _errorBoundary = _interopRequireDefault(require("../../../error-boundary"));
+
+var _utils = require("../../utils");
+
+var _errorLevel = _interopRequireDefault(require("../../../../utils/error-level"));
+
+require("./index.css");
+
+var _interface = require("./interface");
+
+var _yuyue = _interopRequireDefault(require("./images/yuyue.png"));
+
+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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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 precls = 'app-center';
+
+var AppCenter = function AppCenter(props) {
+  var _props$appCenterVisib = props.appCenterVisible,
+      appCenterVisible = _props$appCenterVisib === void 0 ? false : _props$appCenterVisib,
+      closeAppCenter = props.closeAppCenter,
+      setMenu = props.setMenu;
+
+  var _useState = (0, _react.useState)(function () {
+    var menus = (0, _utils.getMenus)();
+    return menus.filter(function (menu) {
+      return menu.code !== 'dynamic';
+    });
+  }),
+      _useState2 = _slicedToArray(_useState, 1),
+      apps = _useState2[0];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      init = _useState4[0],
+      setInit = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(function () {
+    var _window$BSGlobal, _window$BSGlobal$tena;
+
+    return ((_window$BSGlobal = window.BSGlobal) === null || _window$BSGlobal === void 0 ? void 0 : (_window$BSGlobal$tena = _window$BSGlobal.tenantAuthentication) === null || _window$BSGlobal$tena === void 0 ? void 0 : _window$BSGlobal$tena.Version) === 1;
+  }),
+      _useState6 = _slicedToArray(_useState5, 1),
+      isTrial = _useState6[0];
+
+  var _useState7 = (0, _react.useState)(function () {
+    var hash = window.location.hash.split('?')[0] || '';
+
+    if (hash) {
+      var activeApp = apps.find(function (app) {
+        return hash.includes(app.key);
+      });
+      return (activeApp === null || activeApp === void 0 ? void 0 : activeApp.id) || apps[0].id;
+    }
+
+    return apps[0].id;
+  }),
+      _useState8 = _slicedToArray(_useState7, 2),
+      currentAppId = _useState8[0],
+      setCurrentAppId = _useState8[1];
+
+  var bookDemoRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    setInit(true);
+  }, []);
+  (0, _react.useEffect)(function () {
+    var _apps$find;
+
+    var menus = ((_apps$find = apps.find(function (app) {
+      return app.id === currentAppId;
+    })) === null || _apps$find === void 0 ? void 0 : _apps$find.children) || [];
+    var navigations = (0, _utils.getMenus)();
+    var dynamic = navigations.filter(function (item) {
+      return item.code === 'dynamic';
+    });
+    setMenu([].concat(_toConsumableArray(dynamic), _toConsumableArray(menus)));
+
+    if (init) {
+      window.location.href = menus === null || menus === void 0 ? void 0 : menus[0].href;
+    }
+
+    closeAppCenter();
+  }, [currentAppId]);
+
+  var onAppSelectHandler = function onAppSelectHandler(app) {
+    if (app.type === 'newPage') {
+      window.location.href = "".concat(window.BSGlobal.apiPath, "/").concat(app.href);
+      return;
+    }
+
+    setCurrentAppId(app.id);
+  };
+
+  var getBookDemoVersion = function getBookDemoVersion() {
+    var menuVersion = window.BSGlobal.tenantAuthentication.MenuVersion;
+
+    if (menuVersion === _interface.ETrialVersion.OKR) {
+      return _bookDemo["default"].DemoType.TryOKR;
+    }
+
+    if (menuVersion === _interface.ETrialVersion.Performance) {
+      return _bookDemo["default"].DemoType.TryPerformance;
+    }
+
+    return _bookDemo["default"].DemoType.UniversalBookDemo;
+  };
+
+  var handlePoint = function handlePoint() {
+    if (bookDemoRef.current) {
+      bookDemoRef.current.show();
+    }
+
+    if (window.titaTracker) {
+      window.titaTracker('action').record({
+        actionName: '申请演示',
+        actionGroup: '试用版-申请演示',
+        productName: '系统内-申请演示'
+      });
+    }
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_drawer["default"], {
+    className: "".concat(precls, "__drawer"),
+    placement: "top",
+    onClose: closeAppCenter,
+    visible: appCenterVisible,
+    width: "100%",
+    autoClosable: true
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: precls
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(precls, "__app-list")
+  }, apps.length > 0 && apps.map(function (app) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(precls, "__app-item ").concat(precls, "__app-item--").concat(app.code),
+      onClick: function onClick() {
+        return onAppSelectHandler(app);
+      }
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _classnames["default"])("".concat(precls, "__app-item-icon"), "".concat(precls, "__app-item-icon--").concat(app.iconName))
+    }), /*#__PURE__*/_react["default"].createElement("span", {
+      className: "".concat(precls, "__app-item-desc")
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "".concat(precls, "__app-item-name")
+    }, app.title), isTrial && /*#__PURE__*/_react["default"].createElement("span", {
+      className: "".concat(precls, "__app-item-sub-title")
+    }, app.subTitle)));
+  }), new Array(20).fill(1).map(function () {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(precls, "__app-item-placeholder")
+    });
+  }))), isTrial && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(precls, "__app-right-img"),
+    onClick: handlePoint
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    className: "".concat(precls, "__app-right-img__img"),
+    src: _yuyue["default"],
+    alt: "\u9884\u7EA6\u6709\u5956"
+  })), /*#__PURE__*/_react["default"].createElement(_errorBoundary["default"], {
+    errorLevel: _errorLevel["default"].P0,
+    errorTag: "\u7533\u8BF7\u9884\u7EA6\u6F14\u793A\u5F02\u5E38"
+  }, /*#__PURE__*/_react["default"].createElement(_bookDemo["default"].BookDemoPC, {
+    visible: false,
+    ref: bookDemoRef,
+    type: getBookDemoVersion(),
+    source: 20220601
+  }))));
+};
+
+var _default = AppCenter;
+exports["default"] = _default;

package/lib/components/nav-top/components/app-center/interface.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ETrialVersion = void 0;
+var ETrialVersion;
+exports.ETrialVersion = ETrialVersion;
+
+(function (ETrialVersion) {
+  ETrialVersion[ETrialVersion["OKR"] = 9] = "OKR";
+  ETrialVersion[ETrialVersion["Performance"] = 8] = "Performance";
+  ETrialVersion[ETrialVersion["Pro"] = 6] = "Pro";
+})(ETrialVersion || (exports.ETrialVersion = ETrialVersion = {}));
+
+var _default = {
+  ETrialVersion: ETrialVersion
+};
+exports["default"] = _default;

package/lib/components/nav-top/components/menu/index.js

@@ -45,7 +45,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var prefix = "titaui-nav-top-menu";
+var prefix = 'titaui-nav-top-menu';
 var popupAlign = {
   offset: [0, 5],
   overflow: {
@@ -62,7 +62,7 @@ var NewFeatureGuidePopupAlign = {
   },
   targetOffset: [0, 0]
 };
-var NEWMENUS = "#/interview";
+var NEWMENUS = '#/interview';
 
 var Menu = function Menu(_ref) {
   var menus = _ref.menus,
@@ -83,7 +83,7 @@ var Menu = function Menu(_ref) {
       feedNum = _useGlobalValue2[0];
 
   var containerRef = (0, _react.useRef)();
-  var apiPath = (0, _bsGlobal.getBSGlobal)("apiPath");
+  var apiPath = (0, _bsGlobal.getBSGlobal)('apiPath');
   var userId = (0, _bsGlobal.getUserInfo)().Id;
 
   var handlePopupVisibleChange = function handlePopupVisibleChange(visible) {
@@ -92,10 +92,10 @@ var Menu = function Menu(_ref) {
 
   var handleTracker = function handleTracker(menu) {
     if (window.titaTracker) {
-      window.titaTracker("action").record({
+      window.titaTracker('action').record({
         actionName: "\u5BFC\u822A\u83DC\u5355__".concat(menu.title),
-        actionGroup: "导航菜单",
-        productName: "导航菜单"
+        actionGroup: '导航菜单',
+        productName: '导航菜单'
       });
     }
   };
@@ -133,7 +133,7 @@ var Menu = function Menu(_ref) {
   var renderRawItem = function renderRawItem(menu) {
     var href = menu.href;
 
-    if (menu.title === "Learning") {
+    if (menu.title === 'Learning') {
       href = "".concat(apiPath, "/").concat(userId, "/eLearningHome#/");
     }
 
@@ -145,7 +145,7 @@ var Menu = function Menu(_ref) {
       popupVisible: !isKnow,
       popup: menu.href === NEWMENUS ? popup : null,
       mask: false,
-      action: ["focus"],
+      action: ['focus'],
       popupAlign: NewFeatureGuidePopupAlign,
       zIndex: 1000
     }, /*#__PURE__*/_react["default"].createElement("a", {
@@ -155,9 +155,9 @@ var Menu = function Menu(_ref) {
       onClick: function onClick() {
         return handleTracker(menu);
       }
-    }, menu.title, menu.href === "#dynamic" && feedNum > 0 && /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])("".concat(prefix, "__menu--hasNum"), _defineProperty({}, "".concat(prefix, "__menu--hasNum-active"), activeMenuId === menu.id && menu.href === "#dynamic"))
-    }, feedNum > 100 ? "99+" : feedNum), menu.href === NEWMENUS && /*#__PURE__*/_react["default"].createElement("img", {
+    }, menu.title, menu.href === '#dynamic' && feedNum > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])("".concat(prefix, "__menu--hasNum"), _defineProperty({}, "".concat(prefix, "__menu--hasNum-active"), activeMenuId === menu.id && menu.href === '#dynamic'))
+    }, feedNum > 100 ? '99+' : feedNum), menu.href === NEWMENUS && /*#__PURE__*/_react["default"].createElement("img", {
       src: _new["default"],
       alt: "",
       className: "".concat(prefix, "__tips-new")
@@ -175,7 +175,7 @@ var Menu = function Menu(_ref) {
     }, items.map(function (menu) {
       var href = menu.href;
 
-      if (menu.title === "Learning") {
+      if (menu.title === 'Learning') {
         href = "".concat(apiPath, "/").concat(userId, "/eLearningHome#/");
       }
 
@@ -196,7 +196,7 @@ var Menu = function Menu(_ref) {
       popupPlacement: "bottomLeft",
       popupAlign: popupAlign
     }, /*#__PURE__*/_react["default"].createElement("span", {
-      className: (0, _classnames["default"])("tu-icon-diot", "".concat(prefix, "__more-icon"), _defineProperty({}, "".concat(prefix, "__more-icon--active"), isActiveHideMeun))
+      className: (0, _classnames["default"])('tu-icon-diot', "".concat(prefix, "__more-icon"), _defineProperty({}, "".concat(prefix, "__more-icon--active"), isActiveHideMeun))
     }));
   };
 

package/lib/components/nav-top/components/user-message/images/bell-1.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="导航" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="试用版-滑出一级菜单1" transform="translate(-967.000000, -16.000000)" stroke="#FFFFFF" stroke-width="1.6">
+            <g id="消息" transform="translate(964.000000, 10.000000)">
+                <g id="bell" transform="translate(3.000000, 6.000000)">
+                    <path d="M11.0147551,3.73333333 C11.2716347,3.73333333 11.5100213,3.81274976 11.7063493,3.94879059 C11.9087141,4.0890144 12.0668261,4.28879775 12.1546337,4.5230515 C13.7164592,5.35127212 14.628956,6.03022217 15.271064,6.91744287 C15.8964201,7.78151685 16.2647551,8.84360493 16.2647551,9.99166667 L16.2647551,9.99166667 L16.2647551,14.1995335 L17.2351572,15.7271908 L13.1381228,16.3419612 C13.0764552,16.9803581 12.7329879,17.5356623 12.2344854,17.8838935 C11.8888575,18.1253335 11.4682834,18.2666667 11.0147551,18.2666667 C10.5612267,18.2666667 10.1406527,18.1253335 9.79502475,17.8838935 C9.29652228,17.5356623 8.95305493,16.9803581 8.89138739,16.3419612 L8.89138739,16.3419612 L5.13199196,16.3416667 L5.76475508,14.1995335 L5.76475508,9.99166667 C5.76475508,8.84366279 6.13305178,7.78162343 6.75832153,6.91759709 C7.40033245,6.03043703 8.31267653,5.35153921 9.37484426,5.00264003 C9.9622003,4.2892328 10.1205014,4.08920232 10.3230866,3.94883346 C10.5194668,3.81276391 10.7578617,3.73333333 11.0147551,3.73333333 Z"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/lib/components/nav-top/components/user-message/index.js

@@ -25,7 +25,7 @@ var _redPack = _interopRequireDefault(require("./components/red-pack"));
 
 var _request = require("../../request.apis");
 
-var _bell3x = _interopRequireDefault(require("./images/bell@3x.png"));
+var _bell = _interopRequireDefault(require("./images/bell-1.svg"));
 
 var _useGlobalValue = _interopRequireDefault(require("../../useGlobalValue"));
 
@@ -231,7 +231,7 @@ function UserMessage() {
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])("".concat(prefixCls, "__msg-total"))
   }, infosNum > 100 ? '99+' : infosNum)), /*#__PURE__*/_react["default"].createElement("img", {
-    src: _bell3x["default"],
+    src: _bell["default"],
     className: (0, _classnames["default"])(_defineProperty({}, "".concat(prefixCls, "__msg-dot"), infosNum !== preData)),
     alt: ""
   }))), /*#__PURE__*/_react["default"].createElement(_redPack["default"], {

package/lib/components/nav-top/images/home.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="导航" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="试用版-滑出一级菜单1" transform="translate(-835.000000, -16.000000)">
+            <g id="个人首页" transform="translate(832.000000, 13.000000)">
+                <g id="home" transform="translate(3.000000, 3.000000)">
+                    <g id="首页" transform="translate(3.025000, 2.383333)">
+                        <path d="M7.975,1.31064196 C8.2909739,1.31064196 8.60694781,1.41143718 8.87195063,1.61302763 L8.87195063,1.61302763 L14.332463,5.766897 C14.8849137,6.18715208 15.2092593,6.84141097 15.2092593,7.53554073 L15.2092593,7.53554073 L15.2092593,13.7203704 C15.2092593,14.3340201 14.9605286,14.8895756 14.5583854,15.2917188 C14.1562423,15.6938619 13.6006868,15.9425926 12.987037,15.9425926 L12.987037,15.9425926 L2.96296296,15.9425926 C2.34931324,15.9425926 1.79375769,15.6938619 1.39161456,15.2917188 C0.989471435,14.8895756 0.740740741,14.3340201 0.740740741,13.7203704 L0.740740741,13.7203704 L0.740740741,7.53554073 C0.740740741,6.84141097 1.06508631,6.18715208 1.61753702,5.766897 L1.61753702,5.766897 L7.07804937,1.61302763 C7.34305219,1.41143718 7.6590261,1.31064196 7.975,1.31064196 Z" id="矩形" stroke="#FFFFFF" stroke-width="1.48148148"></path>
+                        <path d="M5.40833333,11.3666667 L10.5416667,11.3666667 C10.9466755,11.3666667 11.275,11.6949912 11.275,12.1 C11.275,12.5050088 10.9466755,12.8333333 10.5416667,12.8333333 L5.40833333,12.8333333 C5.00332452,12.8333333 4.675,12.5050088 4.675,12.1 C4.675,11.6949912 5.00332452,11.3666667 5.40833333,11.3666667 Z" id="矩形" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/lib/components/nav-top/index.css

@@ -10,22 +10,26 @@
   font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
 }
 
+.titaui-nav-top--position {
+  position: relative;
+  z-index: 1201;
+}
+
 .titaui-nav-top__left {
   display: inline-flex;
   justify-content: space-between;
   align-items: center;
-  min-width: 204px;
+  width: 120px;
   height: 54px;
   border-radius: 0px 0px 0px 24px;
-  box-sizing: border-box;
-  padding: 0 10px 0 20px;
+  padding: 0 20px;
   cursor: default;
 }
 
 .titaui-nav-top__left-home {
   display: inline-flex;
   border-radius: 4px;
-  padding: 4px;
+  margin-right: 24px;
 }
 
 .titaui-nav-top__left-home--active {
@@ -33,8 +37,8 @@
 }
 
 .titaui-nav-top__left-home-img {
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
 }
 
 .titaui-nav-top__left-home--hover:hover {
@@ -50,6 +54,55 @@
   cursor: pointer;
 }
 
+.titaui-nav-top__left-dynamic, .titaui-nav-top__left-app-center {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  background: url("./images/app-center.png") no-repeat;
+  background-size: contain;
+  color: #ffffff;
+  padding: 2px;
+  border-radius: 8px;
+  transition: transform 0.3s;
+  cursor: pointer;
+}
+
+.titaui-nav-top__left-dynamic:hover, .titaui-nav-top__left-app-center:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.titaui-nav-top__left-dynamic--active, .titaui-nav-top__left-app-center--active {
+  transform: rotate(-90deg);
+}
+
+.titaui-nav-top__left-dynamic {
+  position: relative;
+  margin-right: -6px;
+  margin-left: 20px;
+}
+
+.titaui-nav-top__left-dynamic-feed-num {
+  position: absolute;
+  right: -6px;
+  top: -2px;
+  background: #fe5042;
+  border-radius: 18px;
+  height: 16px;
+  font-size: 12px;
+  color: #ffffff;
+  line-height: 18px;
+  padding: 0 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 8px;
+  font-weight: 400;
+}
+
+.titaui-nav-top__left-app-center {
+  margin-right: 12px;
+}
+
 .titaui-nav-top__line {
   width: 1px;
   min-width: 1px;
@@ -68,8 +121,8 @@
 
 .titaui-nav-top__msg {
   margin-right: 24px;
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   cursor: pointer;
   display: inline-flex;
 }