@antv/dumi-theme-antv 0.5.3 → 0.5.4-beta.1

package/dist/slots/ManualContent/Sidebar.js

@@ -0,0 +1,77 @@
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+import { Affix, Drawer, Layout, Menu } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { useMedia } from 'react-use';
+import { useMenu } from "../../hooks/useMenu";
+import { getAncestorMenuItems } from "../../utils/menu";
+import styles from "./index.module.less";
+export var Sidebar = function Sidebar() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    drawOpen = _useState2[0],
+    setDrawOpen = _useState2[1];
+  var _useMenu = useMenu(),
+    _useMenu2 = _slicedToArray(_useMenu, 2),
+    menuItems = _useMenu2[0],
+    selectedKey = _useMenu2[1];
+  var is767Wide = useMedia('(min-width: 767.99px)', true);
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    openKeys = _useState4[0],
+    setOpenKeys = _useState4[1];
+  useEffect(function () {
+    var items = getAncestorMenuItems(menuItems, selectedKey);
+    setOpenKeys(function (prev) {
+      return _toConsumableArray(new Set([].concat(_toConsumableArray(prev), _toConsumableArray(items.map(function (item) {
+        return item.key;
+      })))));
+    });
+  }, [menuItems, selectedKey]);
+  var menu = /*#__PURE__*/React.createElement(Menu, {
+    key: "sider-menu",
+    openKeys: openKeys,
+    onOpenChange: function onOpenChange(openKeys) {
+      return setOpenKeys(openKeys);
+    },
+    selectedKeys: [selectedKey],
+    mode: "inline",
+    items: menuItems,
+    inlineIndent: 16,
+    style: {
+      height: '100%'
+    },
+    triggerSubMenuAction: "click",
+    forceSubMenuRender: true
+  });
+  var Icon = drawOpen ? MenuFoldOutlined : MenuUnfoldOutlined;
+  return /*#__PURE__*/React.createElement(Affix, {
+    offsetTop: 0,
+    className: styles.affix,
+    style: {
+      height: is767Wide ? '100vh' : 'inherit'
+    }
+  }, is767Wide ? /*#__PURE__*/React.createElement(Layout.Sider, {
+    width: "auto",
+    theme: "light",
+    className: styles.sider
+  }, menu) : /*#__PURE__*/React.createElement(Drawer, {
+    handler: /*#__PURE__*/React.createElement(Icon, {
+      className: styles.menuSwitch
+    }),
+    wrapperClassName: styles.menuDrawer,
+    onChange: function onChange(open) {
+      return setDrawOpen(!!open);
+    },
+    width: 280
+  }, menu));
+};

package/dist/slots/ManualContent/index.js

@@ -1,311 +1,14 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { MenuFoldOutlined, MenuUnfoldOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
-import { get } from 'lodash';
-import { Affix, BackTop, Layout, Menu } from 'antd';
-import { useFullSidebarData, useLocale, useRouteMeta, useSiteData } from 'dumi';
-import Drawer from 'rc-drawer';
-import React, { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useMedia } from 'react-use';
-import readingTime from 'reading-time';
-import URI from 'uri-parse';
-import { ContentTable } from "../ContentTable";
-import { SEO } from "../SEO";
-import { useScrollToTop } from "../hooks";
-import { NavigatorBanner } from "./NavigatorBanner";
-import ReadingTime from "./ReadingTime";
-import { usePreview } from "./usePreview";
-import { getBaseRoute, getIndexRoute, getNavigateUrl, getOpenKeys } from "./utils";
-import 'rc-drawer/assets/index.css';
+import { Layout } from 'antd';
+import React, { Suspense } from 'react';
 import styles from "./index.module.less";
-/**
- * 文档的结构
- */
+import { Main } from "./Main";
+import { Sidebar } from "./Sidebar";
 export var ManualContent = function ManualContent(_ref) {
   var children = _ref.children;
-  var locale = useLocale();
-  var currentLocale = locale.id;
-  var _useSiteData = useSiteData(),
-    _useSiteData$themeCon = _useSiteData.themeConfig,
-    githubUrl = _useSiteData$themeCon.githubUrl,
-    relativePath = _useSiteData$themeCon.relativePath,
-    docs = _useSiteData$themeCon.docs;
-  var sidebar = useFullSidebarData();
-  var is767Wide = useMedia('(min-width: 767.99px)', true);
-  var is991Wide = useMedia('(min-width: 991.99px)', true);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    drawOpen = _useState2[0],
-    setDrawOpen = _useState2[1];
-  var navigate = useNavigate();
-
-  // 获取阅读时间
-  var mdInfo = useRouteMeta();
-  var text = mdInfo.texts.reduce(function (prev, next) {
-    return prev + next.value;
-  }, '');
-  var _readingTime = readingTime(text),
-    time = _readingTime.time;
-
-  // linkoTitle用来映射路由和Title
-  var linkoTitle = {};
-  for (var _i = 0, _Object$values = Object.values(sidebar); _i < _Object$values.length; _i++) {
-    var route = _Object$values[_i];
-    route[0].children.forEach(function (item) {
-      linkoTitle[item.link] = item.title;
-    });
-  }
-  /**
-   *  /api/xxx -->  /api
-   *  /en/api  -->  /en/api
-   */
-  var baseRoute = getBaseRoute();
-
-  // 获取最终的 MenuData
-  var renderSidebar = getMenuData(sidebar, docs, baseRoute, []);
-  function getMenuData(funllSidebarData, rootList, hrefId, list) {
-    function fullSidebarDataToMenuData(rootList, hrefId, list) {
-      // 递归
-      rootList.forEach(function (item) {
-        var href = (!baseRoute.startsWith('/en') ? "/".concat(item.slug) : "/en/".concat(item.slug)).toLocaleLowerCase();
-        var id = href.split('/').slice(0, href.split('/').length - 1).join('/');
-        if (href.includes(baseRoute)) {
-          if (id === hrefId) {
-            list.push(_objectSpread(_objectSpread({}, item), {}, {
-              key: href,
-              label: item.title[currentLocale]
-            }));
-          }
-        }
-      });
-      var _iterator = _createForOfIteratorHelper(list),
-        _step;
-      try {
-        var _loop = function _loop() {
-          var _funllSidebarData$ite;
-          var item = _step.value;
-          item.children = [];
-          fullSidebarDataToMenuData(rootList, item.key, item.children);
-          funllSidebarData[item.key] && ((_funllSidebarData$ite = funllSidebarData[item.key][0].children) === null || _funllSidebarData$ite === void 0 ? void 0 : _funllSidebarData$ite.forEach(function (itemChild) {
-            var label = itemChild.title;
-            var key = itemChild.link;
-            var tag = get(itemChild, ['frontmatter', 'tag']);
-            item.children.push(_objectSpread(_objectSpread({}, itemChild), {}, {
-              label: tag ? /*#__PURE__*/React.createElement("div", {
-                className: styles.memuLabel
-              }, label, /*#__PURE__*/React.createElement("div", {
-                className: styles.tag
-              }, tag)) : label,
-              key: key
-            }));
-          }));
-          // children 的 order 排序
-          item.children.sort(function (a, b) {
-            return a.order - b.order;
-          });
-          if (item.children.length == 0) {
-            delete item.children;
-          }
-        };
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          _loop();
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-      if (hrefId == baseRoute) {
-        var _funllSidebarData$bas;
-        funllSidebarData[baseRoute] && ((_funllSidebarData$bas = funllSidebarData[baseRoute][0].children) === null || _funllSidebarData$bas === void 0 ? void 0 : _funllSidebarData$bas.forEach(function (itemChild) {
-          var key = itemChild.link;
-          var label = itemChild.title;
-          list.push(_objectSpread(_objectSpread({}, itemChild), {}, {
-            label: label,
-            key: key
-          }));
-        }));
-        list.sort(function (a, b) {
-          return a.order - b.order;
-        });
-        return list;
-      }
-    }
-    return fullSidebarDataToMenuData(rootList, hrefId, list);
-  }
-
-  // 获取打开的菜单栏
-  var _useState3 = useState(function () {
-      return getOpenKeys();
-    }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    defaultOpenKeys = _useState4[0],
-    setDefaultOpenKeys = _useState4[1];
-
-  // 获取第一个md文件的路由
-  var indexRoute = getIndexRoute(renderSidebar);
-
-  // 点击菜单栏
-  var onClick = function onClick(e) {
-    navigate(e.key);
-    useScrollToTop();
-  };
-  var _useState5 = useState(),
-    _useState6 = _slicedToArray(_useState5, 2),
-    defaultSelectedKey = _useState6[0],
-    setDefaultSelectedKey = _useState6[1];
-  //上一夜下一页
-  var _useState7 = useState(undefined),
-    _useState8 = _slicedToArray(_useState7, 2),
-    prev = _useState8[0],
-    setPrev = _useState8[1];
-  var _useState9 = useState(undefined),
-    _useState10 = _slicedToArray(_useState9, 2),
-    next = _useState10[0],
-    setNext = _useState10[1];
-
-  // 所有的 sidebar 路由
-  var sidebarRoutes = [];
-  for (var _i2 = 0, _Object$keys = Object.keys(linkoTitle); _i2 < _Object$keys.length; _i2++) {
-    var _route = _Object$keys[_i2];
-    sidebarRoutes.push(_route);
-  }
-  var uri = new URI(location.href);
-  uri.path = getNavigateUrl("/".concat(uri.path), indexRoute, sidebarRoutes);
-  if ("".concat(uri.path) !== window.location.pathname) {
-    uri.path = uri.path.slice(1);
-    navigate(uri.toURI().replace(location.origin, ''));
-  }
-
-  // 改变菜单栏选中和 openKeys 状态
-  useEffect(function () {
-    if (window.location.pathname == indexRoute) {
-      setDefaultOpenKeys(getOpenKeys());
-    }
-    setDefaultSelectedKey(window.location.pathname);
-  }, [window.location.pathname]);
-  useEffect(function () {
-    // 监听选中的menu-item 拿到 prev and next
-    getPreAndNext();
-  }, [defaultSelectedKey]);
-  usePreview({}, defaultSelectedKey);
-  function getPreAndNext() {
-    var menuNodes = document.querySelectorAll('aside .ant-menu-item');
-    var currentMenuNode = document.querySelector('aside .ant-menu-item-selected');
-    // @ts-ignore
-    var currentIndex = Array.from(menuNodes).findIndex(function (node) {
-      return node === currentMenuNode;
-    });
-    var prevNode = currentIndex - 1 >= 0 ? menuNodes[currentIndex - 1] : undefined;
-    var nextNode = currentIndex + 1 < menuNodes.length ? menuNodes[currentIndex + 1] : undefined;
-    setPrev(prevNode ? {
-      slug: prevNode.getAttribute('link') || undefined,
-      title: prevNode.textContent || undefined
-    } : undefined);
-    setNext(nextNode ? {
-      slug: nextNode.getAttribute('link') || undefined,
-      title: nextNode.textContent || undefined
-    } : undefined);
-  }
-  var getGithubSourceUrl = function getGithubSourceUrl(_ref2) {
-    var githubUrl = _ref2.githubUrl,
-      relativePath = _ref2.relativePath,
-      prefix = _ref2.prefix;
-    // https://github.com/antvis/x6/tree/master/packages/x6-sites
-    if (githubUrl.includes('/tree/master/')) {
-      return "".concat(githubUrl.replace('/tree/master/', '/edit/master/'), "/").concat(prefix, "/").concat(relativePath);
-    }
-    return "".concat(githubUrl, "/edit/master/").concat(prefix, "/").concat(relativePath);
-  };
-  var menu = /*#__PURE__*/React.createElement(Menu, {
-    onClick: onClick,
-    onOpenChange: function onOpenChange(openKeys) {
-      setDefaultOpenKeys(openKeys);
-    },
-    selectedKeys: [defaultSelectedKey],
-    openKeys: defaultOpenKeys,
-    mode: "inline",
-    items: renderSidebar,
-    inlineIndent: 16,
-    style: {
-      height: '100%'
-    },
-    forceSubMenuRender: true,
-    triggerSubMenuAction: "click"
-  });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SEO, {
-    title: linkoTitle[window.location.pathname],
-    lang: locale.id
-  }), /*#__PURE__*/React.createElement(Layout, {
-    style: {
-      background: '#fff'
-    },
+  return /*#__PURE__*/React.createElement(Layout, {
     hasSider: true,
     className: styles.layout
-  }, /*#__PURE__*/React.createElement(Affix, {
-    offsetTop: 0,
-    className: styles.affix,
-    style: {
-      height: is767Wide ? '100vh' : 'inherit'
-    }
-  }, is767Wide ? /*#__PURE__*/React.createElement(Layout.Sider, {
-    width: "auto",
-    theme: "light",
-    className: styles.sider
-  }, menu) : /*#__PURE__*/React.createElement(Drawer, {
-    handler: drawOpen ? /*#__PURE__*/React.createElement(MenuFoldOutlined, {
-      className: styles.menuSwitch
-    }) : /*#__PURE__*/React.createElement(MenuUnfoldOutlined, {
-      className: styles.menuSwitch
-    }),
-    wrapperClassName: styles.menuDrawer,
-    onChange: function onChange(open) {
-      return setDrawOpen(!!open);
-    },
-    width: 280
-  }, menu)), /*#__PURE__*/React.createElement(Layout.Content, {
-    className: styles.content
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.main
-  }, /*#__PURE__*/React.createElement("h1", {
-    className: styles.contentTitle
-  }, linkoTitle[window.location.pathname]), /*#__PURE__*/React.createElement("div", {
-    className: styles.readtimeContainer
-  }, /*#__PURE__*/React.createElement(ReadingTime, {
-    readingTime: time,
-    className: styles.readtime
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles.markdown
-  }, children), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: styles.preandnext
-  }, /*#__PURE__*/React.createElement(NavigatorBanner, {
-    type: "prev",
-    post: prev
-  }), /*#__PURE__*/React.createElement(NavigatorBanner, {
-    type: "next",
-    post: next
-  }), /*#__PURE__*/React.createElement(BackTop, {
-    style: {
-      right: 32
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.backTop
-  }, /*#__PURE__*/React.createElement(VerticalAlignTopOutlined, null))))))), is991Wide ? /*#__PURE__*/React.createElement(Layout.Sider, {
-    theme: "light",
-    width: 260
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.toc
-  }, /*#__PURE__*/React.createElement(ContentTable, null))) : /*#__PURE__*/React.createElement("div", null)));
+  }, /*#__PURE__*/React.createElement(Sidebar, null), /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(Main, null, children)));
 };

package/dist/slots/ManualContent/index.module.less

@@ -4,6 +4,15 @@
 // 参考 yuque 右侧 tabOfContent 宽度
 @toc-width: 260px;
 
+.mainContainer {
+  display: flex;
+}
+
+.layout {
+  margin: 24px 0 32px;
+  min-height: 100vh;
+}
+
 .markdown {
   font-size: 14px;
   line-height: 2;
@@ -76,7 +85,7 @@
     margin: 0.6em 0;
   }
 
-  pre>code[class*='language-'] {
+  pre > code[class*='language-'] {
     line-height: 1.8;
   }
 
@@ -125,7 +134,7 @@
     padding: 0;
   }
 
-  ul:not(:global(.ant-skeleton-paragraph))>li {
+  ul:not(:global(.ant-skeleton-paragraph)) > li {
     margin-left: 20px;
     padding-left: 4px;
     list-style-type: circle;
@@ -135,14 +144,14 @@
     }
   }
 
-  ol>li {
+  ol > li {
     margin-left: 20px;
     padding-left: 4px;
     list-style-type: decimal;
   }
 
-  ul>li>p,
-  ol>li>p {
+  ul > li > p,
+  ol > li > p {
     margin: 0.2em 0;
   }
 
@@ -201,8 +210,8 @@
     margin: 0;
   }
 
-  >br,
-  >p>br {
+  > br,
+  > p > br {
     clear: both;
   }
 
@@ -211,10 +220,6 @@
   }
 }
 
-.layout {
-  margin: 24px 0 32px;
-}
-
 .main {
   width: 100%;
   padding-left: 48px;
@@ -228,23 +233,21 @@
   .contentReset() {
     min-height: 400px;
 
-    >img,
-    >p>img {
+    > img,
+    > p > img {
       max-width: 100%;
       margin: 0.5em 0;
     }
 
-    >br,
-    >p>br {
+    > br,
+    > p > br {
       clear: both;
     }
   }
-
-
 }
 
 .tocSider {
-  width: @toc-width ! important;
+  width: @toc-width !important;
 }
 
 // reference yuque UI
@@ -259,7 +262,7 @@
   position: sticky;
   top: 0;
 
-  ul>li {
+  ul > li {
     list-style: none !important;
     padding: 0 !important;
     margin-left: -1px !important;
@@ -280,7 +283,21 @@
   margin-bottom: 20px;
   font-weight: 500;
   font-size: 30px;
-  font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  font-family:
+    Avenir,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    PingFang SC,
+    Hiragino Sans GB,
+    Microsoft YaHei,
+    Helvetica Neue,
+    Helvetica,
+    Arial,
+    sans-serif,
+    Apple Color Emoji,
+    Segoe UI Emoji,
+    Segoe UI Symbol;
   line-height: 38px;
 }
 
@@ -301,7 +318,7 @@
 }
 
 .affix {
-  &>div {
+  & > div {
     height: 100%;
   }
 
@@ -404,7 +421,7 @@
       transition: all 0.3s;
       margin: 12px;
 
-      >div {
+      > div {
         border: 1px solid @border-color-split;
         border-radius: 6px;
         overflow: hidden;
@@ -423,7 +440,7 @@
         }
       }
 
-      &:hover>div {
+      &:hover > div {
         transform: translateY(-4px);
         border-color: transparent;
         box-shadow: 0 6px 16px rgba(107, 147, 224, 0.14);
@@ -624,8 +641,10 @@
   transition: color 0.3s;
   color: #868484;
   background-color: #fff;
-  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
-    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  box-shadow:
+    0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
   transition: color 0.3s;
   width: 44px;
   height: 44px;
@@ -648,6 +667,7 @@
   width: 100% !important;
   min-width: 400px;
   justify-content: center;
+  background-color: #fff;
 }
 
 .menuSwitch {
@@ -677,8 +697,8 @@
   color: #0d1a26;
   line-height: 1.5715;
   list-style: none;
-  -webkit-font-feature-settings: "tnum";
-  font-feature-settings: "tnum";
+  -webkit-font-feature-settings: 'tnum';
+  font-feature-settings: 'tnum';
   display: inline-block;
   height: auto;
   margin: 0 8px 0 0;
@@ -690,7 +710,21 @@
   border: 1px solid #d9d9d9;
   border-radius: 2px;
   opacity: 1;
-  transition: all .3s;
+  transition: all 0.3s;
   background-color: #fff;
-  font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  font-family:
+    Avenir,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    PingFang SC,
+    Hiragino Sans GB,
+    Microsoft YaHei,
+    Helvetica Neue,
+    Helvetica,
+    Arial,
+    sans-serif,
+    Apple Color Emoji,
+    Segoe UI Emoji,
+    Segoe UI Symbol;
 }

package/dist/slots/ManualContent/utils.js

@@ -1,33 +1,37 @@
+import { isEmpty } from "lodash-es";
 export function getOpenKeys() {
-  var pathname = window.location.pathname.replace('/docs/', '/').replace('/zh/', '/');
-  var pathArr = pathname.split('/');
+  var pathname = window.location.pathname.replace("/docs/", "/").replace("/zh/", "/");
+  var pathArr = pathname.split("/");
   var openKeys = [];
   for (var i = pathArr.length; i > 0; i--) {
     var tem = pathArr.slice(0, i);
-    openKeys.push(tem.join('/'));
+    openKeys.push(tem.join("/"));
   }
   return openKeys;
 }
+
+/**
+ *  /api/xxx -->  /api
+ *  /en/api  -->  /en/api
+ */
 export function getBaseRoute() {
   var matchRoute = window.location.pathname;
   // 兼容 zh
-  matchRoute = matchRoute.replace('/zh/', '/');
+  matchRoute = matchRoute.replace("/zh/", "/");
   // 兼容带有docs的route
-  matchRoute = matchRoute.replace('/docs', '');
+  matchRoute = matchRoute.replace("/docs", "");
   // 查找 baseRoute
-  var reg = window.location.pathname.startsWith('/en') ? /(\/[A-z]*\/?\/[A-z]*)\/?/ : /(\/[A-z]*)\/?/;
+  var reg = window.location.pathname.startsWith("/en") ? /(\/[A-z]*\/?\/[A-z]*)\/?/ : /(\/[A-z]*)\/?/;
   var mainRoute = matchRoute.match(reg);
   return mainRoute[1];
 }
-export function getIndexRoute(MenuData) {
-  var defaultOpenKeys = [];
-  var topRoute = MenuData[0];
-  defaultOpenKeys.push(topRoute.key);
-  while (topRoute.children) {
+export function getIndexRoute(menuData) {
+  if (isEmpty(menuData)) return undefined;
+  var topRoute = menuData[0];
+  while (!isEmpty(topRoute.children)) {
     topRoute = topRoute.children[0];
-    defaultOpenKeys.push(topRoute.key);
   }
-  return defaultOpenKeys[defaultOpenKeys.length - 1];
+  return topRoute.key;
 }
 
 /**
@@ -46,8 +50,8 @@ export function getIndexRoute(MenuData) {
  */
 export function getNavigateUrl(pathname, first, siderbarMenu) {
   // 兜底 如果 nav 指定有误则自动重定向到 indexDocRoute
-  if (pathname.includes('/docs/') || pathname.includes('/zh/')) {
-    return pathname.replace('/docs/', '/').replace('/zh/', '/');
+  if (pathname.includes("/docs/") || pathname.includes("/zh/")) {
+    return pathname.replace("/docs/", "/").replace("/zh/", "/");
   }
   if (siderbarMenu.every(function (item) {
     var itemLowerCase = "".concat(item).toLowerCase();