@antv/dumi-theme-antv 0.6.3 → 0.6.4-alpha.1

package/dist/builtins/Playground/index.js

@@ -9,7 +9,7 @@ import { get } from 'lodash-es';
 import React, { useContext } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { ThemeAntVContext } from "../../context";
-import { CodeRunner } from "dumi/theme/slots/CodeRunner";
+import CodeRunner from "dumi/theme/slots/CodeRunner";
 import styles from "./index.module.less";
 /**
  * Markdown 标签插件 Playground

package/dist/common/ClientOnly.js

@@ -0,0 +1,21 @@
+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 { useLayoutEffect, useState } from 'react';
+var ClientOnly = function ClientOnly(_ref) {
+  var children = _ref.children,
+    _ref$fallback = _ref.fallback,
+    fallback = _ref$fallback === void 0 ? null : _ref$fallback;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    clientReady = _useState2[0],
+    setClientReady = _useState2[1];
+  useLayoutEffect(function () {
+    setClientReady(true);
+  }, []);
+  return clientReady ? children : fallback;
+};
+export default ClientOnly;

package/dist/common/{SEO.js → CommonHelmet.js}

@@ -5,8 +5,8 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 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; }
 import { Helmet, useLocale, useRouteMeta, useSiteData } from 'dumi';
-import React from 'react';
-var SEO = function SEO(_ref) {
+import React, { useLayoutEffect } from 'react';
+var CommonHelmet = function CommonHelmet(_ref) {
   var titleSuffix = _ref.titleSuffix,
     propTitle = _ref.title,
     propDescription = _ref.description,
@@ -21,10 +21,13 @@ var SEO = function SEO(_ref) {
     defaultDescription = themeConfig.defaultDescription;
   var title = propTitle || meta.frontmatter.title;
   var description = propDescription || meta.frontmatter.description || defaultDescription;
+  var fullTitle = "".concat(title, " | ").concat(titleSuffix || defaultTitle);
   var defaultMeta = [{
     name: "description",
     content: description
-  }, {
+  },
+  // "og" 全称为 Open Graph，用于指定页面在社交媒体上的展示效果
+  {
     property: "og:title",
     content: title
   }, {
@@ -49,13 +52,16 @@ var SEO = function SEO(_ref) {
     property: "twitter:image",
     content: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png'
   }];
+  useLayoutEffect(function () {
+    // 直接设置 document.title 作为备份机制
+    document.title = fullTitle;
+  }, [fullTitle]);
   return /*#__PURE__*/React.createElement(Helmet, {
     htmlAttributes: {
       lang: lang
     },
-    titleTemplate: "%s | ".concat(titleSuffix || defaultTitle),
-    title: title,
+    title: fullTitle,
     meta: [].concat(defaultMeta, _toConsumableArray(propMeta))
   });
 };
-export default SEO;
+export default CommonHelmet;

package/dist/common/InViewSuspense.js

@@ -0,0 +1,29 @@
+/**
+ * 只在组件进入视口（可见区域）时才会加载和渲染被包裹的懒加载组件
+ */
+import { Skeleton } from 'antd';
+import React, { Suspense } from 'react';
+import { InView } from 'react-intersection-observer';
+var InViewSuspense = function InViewSuspense(_ref) {
+  var children = _ref.children,
+    _ref$fallback = _ref.fallback,
+    fallback = _ref$fallback === void 0 ? /*#__PURE__*/React.createElement(Skeleton.Input, {
+      active: true,
+      size: "small"
+    }) : _ref$fallback,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 200 : _ref$delay;
+  return /*#__PURE__*/React.createElement(InView, {
+    triggerOnce: true,
+    delay: delay
+  }, function (_ref2) {
+    var inView = _ref2.inView,
+      ref = _ref2.ref;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, /*#__PURE__*/React.createElement(Suspense, {
+      fallback: fallback
+    }, inView ? children : /*#__PURE__*/React.createElement("span", null)));
+  });
+};
+export default InViewSuspense;

package/dist/hooks/useLocale.js

@@ -0,0 +1,11 @@
+import { useLocale as useDumiLocale } from 'dumi';
+/**
+ * 获取国际化
+ */
+var useLocale = function useLocale(localeMap) {
+  var _useDumiLocale = useDumiLocale(),
+    id = _useDumiLocale.id;
+  var localeType = id === 'zh' ? 'zh' : 'en';
+  return [localeMap === null || localeMap === void 0 ? void 0 : localeMap[localeType], localeType];
+};
+export default useLocale;

package/dist/hooks/useMenu.js

@@ -1,4 +1,8 @@
 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 _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 _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; }
 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 _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; }
@@ -9,13 +13,12 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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); }
 import { useFullSidebarData, useLocale, useLocation, useNavigate, useSiteData } from 'dumi';
 import { get } from 'lodash-es';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import Link from "../common/Link";
 import styles from "../slots/ManualContent/index.module.less";
 import { getBaseRoute } from "../slots/ManualContent/utils";
 import { flattenMenu } from "../utils/menu";
 export var useMenu = function useMenu() {
-  var _navOf;
   var fullData = useFullSidebarData();
   var _useLocation = useLocation(),
     pathname = _useLocation.pathname;
@@ -23,7 +26,7 @@ export var useMenu = function useMenu() {
     _useSiteData$themeCon = _useSiteData.themeConfig,
     docs = _useSiteData$themeCon.docs,
     navs = _useSiteData$themeCon.navs;
-  var baseRoute = getBaseRoute();
+  var baseRoute = getBaseRoute(pathname);
   var navigate = useNavigate();
   var locale = useLocale();
   var currentLocale = locale.id;
@@ -109,28 +112,37 @@ export var useMenu = function useMenu() {
   var flattedMenuData = useMemo(function () {
     return flattenMenu(menuData);
   }, [menuData]);
-  var selectedKey = pathname;
 
-  // Nav 跳转但不在菜单中，则选中第一个菜单项
-  var navOf = function navOf(navs) {
-    return navs.some(function (nav) {
-      var _nav$slug;
-      return (nav === null || nav === void 0 || (_nav$slug = nav.slug) === null || _nav$slug === void 0 ? void 0 : _nav$slug.replace('docs/', '/')) === pathname;
-    });
-  };
-  var isNavLink = !!navOf(navs);
-  var isExactLink = (_navOf = navOf(navs)) === null || _navOf === void 0 ? void 0 : _navOf.exact;
-  var isLinkInMenu = flattedMenuData.some(function (item) {
-    return item.link === pathname;
-  });
-  if (isNavLink && !isExactLink && !isLinkInMenu) {
-    var firstValidMenuItem = flattedMenuData.find(function (item) {
-      return item.link;
+  // 添加本地状态来存储选中的key
+  var _useState = useState(pathname),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedKey = _useState2[0],
+    setSelectedKey = _useState2[1];
+  useEffect(function () {
+    var _navOf;
+    // Nav 跳转但不在菜单中，则选中第一个菜单项
+    var navOf = function navOf(navs) {
+      return navs.some(function (nav) {
+        var _nav$slug;
+        return (nav === null || nav === void 0 || (_nav$slug = nav.slug) === null || _nav$slug === void 0 ? void 0 : _nav$slug.replace('docs/', '/')) === pathname;
+      });
+    };
+    var isNavLink = !!navOf(navs);
+    var isExactLink = (_navOf = navOf(navs)) === null || _navOf === void 0 ? void 0 : _navOf.exact;
+    var isLinkInMenu = flattedMenuData === null || flattedMenuData === void 0 ? void 0 : flattedMenuData.some(function (item) {
+      return item.link === pathname;
     });
-    if (firstValidMenuItem) {
-      navigate(firstValidMenuItem.link);
-      selectedKey = firstValidMenuItem.link;
+    if (isNavLink && !isExactLink && !isLinkInMenu) {
+      var firstValidMenuItem = flattedMenuData === null || flattedMenuData === void 0 ? void 0 : flattedMenuData.find(function (item) {
+        return item.link;
+      });
+      if (firstValidMenuItem) {
+        navigate(firstValidMenuItem.link);
+        setSelectedKey(firstValidMenuItem.link);
+      }
+    } else {
+      setSelectedKey(pathname);
     }
-  }
+  }, [pathname, flattedMenuData, navs, navigate]);
   return [menuData, selectedKey, flattedMenuData];
 };

package/dist/layouts/DocLayout.js

@@ -1,15 +1,15 @@
 import { useLocation, useOutlet, useSiteData } from 'dumi';
 import React, { useEffect } from 'react';
-import { getCurrentPathname } from "../slots/utils";
-import { Index } from "./entry/Index";
-import { Manual } from "./entry/Manual";
+import { getPurePathname } from "../utils/location";
+import IndexLayout from "./IndexLayout";
+import ManualLayout from "./ManualLayout";
 
 // 用户手动添加自己的
 import "../slots/_.less";
 import "../slots/global";
 
 /**
- * DocuLayout 是 dumi2 的内置 layout 入口，在这里使用页面路径进行区分成自己不同的 Layout。
+ * DocLayout 是 dumi2 的内置 layout 入口，在这里使用页面路径进行区分成自己不同的 Layout。
  */
 export default (function () {
   var _useSiteData = useSiteData(),
@@ -22,8 +22,10 @@ export default (function () {
     console.log('%cAntV 让数据栩栩如生', 'color:#5B7102; font-size: 20px;'), console.log('%c新一代数据可视化解决方案', 'color:#5B7102;'), console.log('--------------------------'), console.log('%c关注我们的微信公众号 %c“数据可视化 AntV”%c，获取我们团队最新的进展、动态、分享，也欢迎加入我们！', 'color: red', 'color: pink', 'color: red');
   }, []);
   var outlet = useOutlet();
-  var _useLocation = useLocation(),
-    hash = _useLocation.hash;
+  var location = useLocation();
+  var pathname = location.pathname,
+    hash = location.hash;
+  var purePathname = getPurePathname(pathname);
 
   // 监听 hash 变更，跳转到锚点位置
   // 同时监听页面 loading 状态，因为路由按需加载时需要等待页面渲染完毕才能找到锚点位置
@@ -34,9 +36,11 @@ export default (function () {
       if (elm) document.documentElement.scrollTo(0, elm.offsetTop - 80);
     }
   }, [loading, hash]);
-  var p = getCurrentPathname();
+
   // 首页
-  if (p === '/' || p === '/zh' || p === '/en' || p === '/en/') return /*#__PURE__*/React.createElement(Index, null);
+  if (['/', ''].includes(purePathname)) {
+    return /*#__PURE__*/React.createElement(IndexLayout, null, outlet);
+  }
 
   // 匹配 navs 中的 docs 路由
   var docsRoutes = navs.filter(function (nav) {
@@ -46,10 +50,10 @@ export default (function () {
       return item !== 'docs';
     });
   });
-  if (docsRoutes.some(function (route) {
-    return p.startsWith("/".concat(route)) || p.startsWith("/docs/".concat(route));
+  if (docsRoutes.some(function (slug) {
+    return purePathname.startsWith("/".concat(slug)) || purePathname.startsWith("/docs/".concat(slug));
   })) {
-    return /*#__PURE__*/React.createElement(Manual, null, outlet);
+    return /*#__PURE__*/React.createElement(ManualLayout, null, outlet);
   }
   return outlet;
 });

package/dist/layouts/IndexLayout/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Footer from "dumi/theme/slots/Footer";
+import Header from "dumi/theme/slots/Header";
+
+/**
+ * 首页布局
+ */
+var IndexLayout = function IndexLayout(props) {
+  var children = props.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement("div", {
+    style: {
+      minHeight: '100vh'
+    }
+  }, children), /*#__PURE__*/React.createElement(Footer, null));
+};
+export default IndexLayout;

package/dist/layouts/{entry/Manual.js → ManualLayout/index.js}

@@ -1,17 +1,17 @@
 import React from 'react';
-import SEO from "../../common/SEO";
-import { Footer } from "dumi/theme/slots/Footer";
-import { Header } from "dumi/theme/slots/Header";
+import Footer from "dumi/theme/slots/Footer";
+import Header from "dumi/theme/slots/Header";
 import { ManualContent } from "dumi/theme/slots/ManualContent";
 
 /**
  * Manual 路由下的入口
  */
-export var Manual = function Manual(_ref) {
+var ManualLayout = function ManualLayout(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SEO, null), /*#__PURE__*/React.createElement(Header, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
     isHomePage: false
   }), /*#__PURE__*/React.createElement(ManualContent, null, children), /*#__PURE__*/React.createElement(Footer, {
     isDynamicFooter: true
   }));
-};
+};
+export default ManualLayout;

package/dist/pages/404.js

@@ -1,13 +1,14 @@
 import React from 'react';
-import SEO from "../common/SEO";
+import CommonHelmet from "../common/CommonHelmet";
 import { NotFound as NotFoundPage } from "dumi/theme/slots/404";
-import { Footer } from "dumi/theme/slots/Footer";
-import { Header } from "dumi/theme/slots/Header";
+import Footer from "dumi/theme/slots/Footer";
+import Header from "dumi/theme/slots/Header";
+
 /**
  * 404 页面
  */
 var NotFound = function NotFound() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SEO, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonHelmet, {
     title: "404: Not found"
   }), /*#__PURE__*/React.createElement(Header, {
     isHomePage: false

package/dist/pages/Example/index.js

@@ -1,77 +1,96 @@
-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 { Layout } from 'antd';
 import { useLocale, useSiteData } from 'dumi';
 import { every, find, get } from 'lodash-es';
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useContext } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useSnapshot } from 'valtio';
-import SEO from "../../common/SEO";
+import InViewSuspense from "../../common/InViewSuspense";
+import CommonHelmet from "../../common/CommonHelmet";
 import { ThemeAntVContext } from "../../context";
 import { store } from "../../model";
 import { API } from "dumi/theme/slots/API";
-import { CodeRunner } from "dumi/theme/slots/CodeRunner";
+import CodeRunner from "dumi/theme/slots/CodeRunner";
 import { getDemoInfo } from "../../slots/CodeRunner/utils";
-import { ExampleSider } from "dumi/theme/slots/ExampleSider";
-import { Header } from "dumi/theme/slots/Header";
 import { CollapsedIcon } from "./components/CollapsedIcon";
 import styles from "./index.module.less";
-import { getCurrentTitle } from "./utils";
 var Sider = Layout.Sider,
   Content = Layout.Content;
+var Header = /*#__PURE__*/React.lazy(function () {
+  return import("dumi/theme/slots/Header");
+});
+var ExampleSider = /*#__PURE__*/React.lazy(function () {
+  return import("dumi/theme/slots/ExampleSider");
+});
 /**
- * 具体单个案例的页面
+ * 解析 Example 页面的元数据
  */
-var Example = function Example() {
-  var _useLocation = useLocation(),
-    hash = _useLocation.hash;
-  var nav = useNavigate();
+var useExampleMeta = function useExampleMeta() {
+  /** 示例页面的元数据信息 */
+  var metaData = useContext(ThemeAntVContext);
+  var exampleTopics = metaData.meta.exampleTopics;
   var _useParams = useParams(),
     topic = _useParams.topic,
     example = _useParams.example;
-  /** 示例页面的元数据信息 */
-  var metaData = useContext(ThemeAntVContext);
+  var _useLocation = useLocation(),
+    hash = _useLocation.hash;
+  var examples = get(exampleTopics, ['0', 'examples']);
+  var exampleDemo = find(examples, function (_ref) {
+    var id = _ref.id;
+    return id === example;
+  });
+  // examples/case/id hash 为空，可以默认第一个 example 对应的 demo
+  var demo = hash.slice(1) || get(exampleDemo, ['demos', '0', 'id']);
+  var locale = useLocale();
+  var exampleTitle = get(exampleDemo, ['title', locale.id]);
+  var currentDemo = getDemoInfo(exampleTopics, topic, example, demo);
+  var demoTitle = get(currentDemo, ['title', locale.id]);
+  return {
+    // all example topics
+    exampleTopics: exampleTopics,
+    // topic id
+    topic: topic,
+    // example id
+    example: example,
+    // example title
+    exampleTitle: exampleTitle,
+    // demo id
+    demo: demo,
+    // current demo info
+    currentDemo: currentDemo,
+    // demo title
+    demoTitle: demoTitle
+  };
+};
+
+/**
+ * 具体单个案例的页面
+ */
+var Example = function Example() {
+  var state = useSnapshot(store);
+  var navigate = useNavigate();
   var locale = useLocale();
+  var _useExampleMeta = useExampleMeta(),
+    exampleTopics = _useExampleMeta.exampleTopics,
+    exampleTitle = _useExampleMeta.exampleTitle,
+    currentDemo = _useExampleMeta.currentDemo,
+    topic = _useExampleMeta.topic,
+    example = _useExampleMeta.example,
+    demo = _useExampleMeta.demo,
+    demoTitle = _useExampleMeta.demoTitle;
   var _useSiteData = useSiteData(),
     themeConfig = _useSiteData.themeConfig;
-  var exampleTopics = metaData.meta.exampleTopics;
-  var demo = useMemo(function () {
-    var examples = get(exampleTopics, ['0', 'examples']);
-    var exampleDemo = find(examples, function (_ref) {
-      var id = _ref.id;
-      return id === example;
-    });
-    // examples/case/id hash 为空，可以默认第一个 example 对应的 demo
-    return hash.slice(1) || get(exampleDemo, ['demos', '0', 'id']);
-  }, [hash, exampleTopics, example]);
-  var _useState = useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    currentDemo = _useState2[0],
-    setCurrentDemo = _useState2[1];
-  var state = useSnapshot(store);
-  var _useState3 = useState({}),
-    _useState4 = _slicedToArray(_useState3, 2),
-    title = _useState4[0],
-    setTitle = _useState4[1];
-  useEffect(function () {
-    if (topic && example && demo) {
-      var targetDemoInfo = getDemoInfo(exampleTopics, topic, example, demo);
-      setCurrentDemo(targetDemoInfo);
-      setTitle(getCurrentTitle(exampleTopics, topic, example));
-    }
-  }, [topic, example, hash]);
   var showAPI = every([get(themeConfig, 'showAPIDoc'), topic, example], Boolean);
+  if (!currentDemo) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement("div", {
     className: styles.example
-  }, /*#__PURE__*/React.createElement(SEO, {
-    title: title[locale.id]
-  }), /*#__PURE__*/React.createElement(Header, {
+  }, /*#__PURE__*/React.createElement(CommonHelmet, {
+    title: exampleTitle,
+    description: demoTitle
+  }), /*#__PURE__*/React.createElement(InViewSuspense, null, /*#__PURE__*/React.createElement(Header, {
     isHomePage: false
-  }), /*#__PURE__*/React.createElement(Layout, {
+  })), /*#__PURE__*/React.createElement(Layout, {
     className: styles.container
   }, /*#__PURE__*/React.createElement(Sider, {
     collapsedWidth: 0,
@@ -81,7 +100,7 @@ var Example = function Example() {
     collapsed: state.hideMenu,
     className: styles.menuSider,
     theme: "light"
-  }, currentDemo && /*#__PURE__*/React.createElement(ExampleSider, {
+  }, /*#__PURE__*/React.createElement(InViewSuspense, null, /*#__PURE__*/React.createElement(ExampleSider, {
     showExampleDemoTitle: true,
     currentDemo: currentDemo,
     onDemoClicked: function onDemoClicked(example) {
@@ -90,10 +109,10 @@ var Example = function Example() {
         targetTopic = example.targetTopic;
       // eg: /zh/examples/case/area/#area1
       var newURL = "/".concat(locale.id, "/examples/").concat(targetTopic === null || targetTopic === void 0 ? void 0 : targetTopic.id, "/").concat(targetExample === null || targetExample === void 0 ? void 0 : targetExample.id, "/#").concat(demoId);
-      nav(newURL);
+      navigate(newURL);
     },
     exampleTopics: exampleTopics
-  }), /*#__PURE__*/React.createElement(CollapsedIcon, {
+  })), /*#__PURE__*/React.createElement(CollapsedIcon, {
     isCollapsed: state.hideMenu,
     onClick: function onClick(show) {
       store.hideMenu = show;
@@ -104,7 +123,7 @@ var Example = function Example() {
     }
   })), /*#__PURE__*/React.createElement(Content, {
     className: styles.content
-  }, topic && example && /*#__PURE__*/React.createElement(CodeRunner, {
+  }, /*#__PURE__*/React.createElement(CodeRunner, {
     exampleTopics: exampleTopics,
     topic: topic,
     example: example,

package/dist/pages/Examples/components/ExampleTopicMenu/index.js

@@ -18,7 +18,7 @@ import { LeftMenu } from "./components/LeftMenu";
  * @param {LeftMenuProps} props 相关参数，详见类型定义
  * @returns {React.FC} React.FC
  */
-export var ExampleTopicMenu = function ExampleTopicMenu(props) {
+var ExampleTopicMenu = function ExampleTopicMenu(props) {
   var exampleTopics = props.exampleTopics;
   var isWide = useMedia('(min-width: 767.99px)', true);
   var _useState = useState(false),
@@ -51,4 +51,5 @@ export var ExampleTopicMenu = function ExampleTopicMenu(props) {
   }, /*#__PURE__*/React.createElement(LeftMenu, {
     exampleTopics: exampleTopics
   })));
-};
+};
+export default ExampleTopicMenu;

package/dist/pages/Examples/index.js

@@ -6,39 +6,41 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { VerticalAlignTopOutlined } from '@ant-design/icons';
 import { Layout as AntLayout, BackTop } from 'antd';
-import { useLocale } from 'dumi';
-import React, { useContext, useEffect } from 'react';
+import React, { lazy, useContext, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import SEO from "../../common/SEO";
+import InViewSuspense from "../../common/InViewSuspense";
+import CommonHelmet from "../../common/CommonHelmet";
 import { ThemeAntVContext } from "../../context";
-import { Footer } from "dumi/theme/slots/Footer";
-import { Header } from "dumi/theme/slots/Header";
-import NavigatorBanner from "../../slots/Header/Products/NavigatorBanner";
-import { usePrevAndNext } from "../../slots/hooks";
+import useLocale from "../../hooks/useLocale";
+import Footer from "dumi/theme/slots/Footer";
+import Header from "dumi/theme/slots/Header";
 import { Article } from "./components/Article";
-import { ExampleTopicMenu } from "./components/ExampleTopicMenu";
 import { GalleryPageContent } from "./components/GalleryPageContent";
 import styles from "./index.module.less";
+var ExampleTopicMenu = /*#__PURE__*/lazy(function () {
+  return import("./components/ExampleTopicMenu");
+});
+var locales = {
+  zh: {
+    title: '所有图表'
+  },
+  en: {
+    title: 'Gallery'
+  }
+};
 
 /**
  * Examples 页面
- *
- * @author YuZhanglong <loveyzl1123@gmail.com>
  */
-var Example = function Example() {
+var Examples = function Examples() {
   var nav = useNavigate();
-  var locale = useLocale();
+  var _useLocale = useLocale(locales),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    locale = _useLocale2[0];
+
   /** 示例页面的元数据信息 */
   var metaData = useContext(ThemeAntVContext);
   var exampleTopics = metaData.meta.exampleTopics;
-  var _usePrevAndNext = usePrevAndNext(),
-    _usePrevAndNext2 = _slicedToArray(_usePrevAndNext, 2),
-    prev = _usePrevAndNext2[0],
-    next = _usePrevAndNext2[1];
-  var title = {
-    zh: '所有图表',
-    en: 'Gallery'
-  }[locale.id];
 
   // 为 zh 做兜底
   useEffect(function () {
@@ -47,16 +49,16 @@ var Example = function Example() {
       nav(p.replace('/zh/', '/'));
     }
   }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SEO, {
-    title: title
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonHelmet, {
+    title: locale.title
   }), /*#__PURE__*/React.createElement(Header, {
     isHomePage: false
   }), /*#__PURE__*/React.createElement(AntLayout, {
     hasSider: true,
     className: styles.layout
-  }, /*#__PURE__*/React.createElement(ExampleTopicMenu, {
+  }, /*#__PURE__*/React.createElement(InViewSuspense, null, /*#__PURE__*/React.createElement(ExampleTopicMenu, {
     exampleTopics: exampleTopics
-  }), /*#__PURE__*/React.createElement(Article, {
+  })), /*#__PURE__*/React.createElement(Article, {
     className: styles.markdown
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.main,
@@ -65,13 +67,7 @@ var Example = function Example() {
     }
   }, /*#__PURE__*/React.createElement(GalleryPageContent, {
     exampleTopics: exampleTopics
-  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NavigatorBanner, {
-    type: "prev",
-    post: prev
-  }), /*#__PURE__*/React.createElement(NavigatorBanner, {
-    type: "next",
-    post: next
-  })), /*#__PURE__*/React.createElement(BackTop, {
+  }), /*#__PURE__*/React.createElement(BackTop, {
     style: {
       right: 24
     }
@@ -81,4 +77,4 @@ var Example = function Example() {
     isDynamicFooter: true
   }));
 };
-export default Example;
+export default Examples;

package/dist/{slots → pages/Index/components}/Cases/index.js

@@ -4,7 +4,7 @@ import cx from 'classnames';
 import { FormattedMessage, Link, useLocale } from 'dumi';
 import React from 'react';
 import Slider from 'react-slick';
-import { ic, icWithLocale } from "../hooks";
+import { ic, icWithLocale } from "../../../../slots/hooks";
 import 'slick-carousel/slick/slick-theme.css';
 import 'slick-carousel/slick/slick.css';
 import styles from "./index.module.less";