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

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/InViewSuspense.js

@@ -0,0 +1,26 @@
+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/common/SEO.js

@@ -24,7 +24,9 @@ var SEO = function SEO(_ref) {
   var defaultMeta = [{
     name: "description",
     content: description
-  }, {
+  },
+  // "og" 全称为 Open Graph，用于指定页面在社交媒体上的展示效果
+  {
     property: "og:title",
     content: title
   }, {

package/dist/hooks/useLocale.js

@@ -0,0 +1,8 @@
+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

@@ -23,7 +23,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;

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,18 @@
 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, {
     isHomePage: false
   }), /*#__PURE__*/React.createElement(ManualContent, null, children), /*#__PURE__*/React.createElement(Footer, {
     isDynamicFooter: true
   }));
-};
+};
+export default ManualLayout;

package/dist/pages/404.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import SEO from "../common/SEO";
 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 页面
  */

package/dist/pages/Example/components/ExampleSider/index.js

@@ -0,0 +1,190 @@
+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 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 { createFromIconfontCN, SearchOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
+import { Input, Menu, Tooltip } from 'antd';
+import classNames from 'classnames';
+import { FormattedMessage, useIntl, useLocale } from 'dumi';
+import { cloneDeep } from 'lodash-es';
+import React, { useEffect, useRef, useState } from 'react';
+import styles from "./index.module.less";
+
+// menu icon
+var MenuIcon = createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_470089_1lnym745udm.js' // generated by iconfont.cn
+});
+/**
+ * DEMO 预览页面的菜单
+ */
+var ExampleSider = function ExampleSider(props) {
+  var currentDemo = props.currentDemo,
+    onDemoClicked = props.onDemoClicked,
+    exampleTopics = props.exampleTopics;
+  // 菜单栏展开keys
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    openKeys = _useState2[0],
+    setOpenKeys = _useState2[1];
+  var menuRef = useRef(null);
+
+  // 初始化点击进来的示例按钮a的dom
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    aRef = _useState4[0],
+    setARef = _useState4[1];
+
+  // input 搜索框的value
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    searchValue = _useState6[0],
+    setSearchValue = _useState6[1];
+  var locale = useLocale();
+  var intl = useIntl();
+  var getCurrentTopics = function getCurrentTopics() {
+    var res = filterTreeNode({
+      id: 'FAKE_ID',
+      childrenKey: 'exampleTopics',
+      title: {
+        zh: 'FAKE_TITLE',
+        en: 'FAKE_TITLE'
+      },
+      exampleTopics: cloneDeep(exampleTopics)
+    }, searchValue, locale.id);
+    return (res === null || res === void 0 ? void 0 : res.exampleTopics) || [];
+  };
+
+  // 初始化菜单栏展开keys
+  useEffect(function () {
+    var targetExample = currentDemo.targetExample,
+      targetTopic = currentDemo.targetTopic;
+    var keys = ["TOPIC-".concat(targetTopic === null || targetTopic === void 0 ? void 0 : targetTopic.id), "EXAMPLE-".concat(targetTopic.id, "-").concat(targetExample === null || targetExample === void 0 ? void 0 : targetExample.id)];
+    setOpenKeys(keys);
+  }, [currentDemo]);
+
+  // 初始化滚动到中间
+  useEffect(function () {
+    if (aRef) {
+      aRef.scrollIntoView({
+        block: 'center',
+        behavior: 'smooth'
+      });
+    }
+  }, [aRef]);
+
+  // 获取搜索后的文本结构 左文本 + 搜索文本 + 右文本
+  var getSearchValueTitle = function getSearchValueTitle(title) {
+    return searchValue && title.match(searchValue) ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, title.replace(new RegExp("".concat(searchValue, ".*")), '')), /*#__PURE__*/React.createElement("span", {
+      className: styles.searchValue
+    }, searchValue), /*#__PURE__*/React.createElement("span", null, title.replace(new RegExp(".*?".concat(searchValue)), ''))) : title;
+  };
+
+  // 图例按钮 + img + tooltip文本
+  var renderExampleDemoCard = function renderExampleDemoCard(demo) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      placement: "right",
+      title: getSearchValueTitle(demo.title[locale.id] || ''),
+      key: demo.id
+    }, /*#__PURE__*/React.createElement("a", {
+      ref: function ref(dom) {
+        // TODO: DEAL WITH ME
+        // if (dom && !aRef && item.value === getPath(currentExample)) {
+        //   setARef(dom);
+        // }
+      },
+      className: classNames(styles.card, _defineProperty({}, styles.current, currentDemo.id === demo.id))
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classNames(styles.screenshot),
+      style: {
+        backgroundImage: "url(".concat(demo.screenshot || 'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/screenshot-placeholder-b8e70.png', ")")
+      },
+      title: demo.title[locale.id]
+    })));
+  };
+  var renderSubMenu = function renderSubMenu() {
+    return getCurrentTopics().map(function (topic) {
+      return /*#__PURE__*/React.createElement(Menu.SubMenu, {
+        key: "TOPIC-".concat(topic.id),
+        title: /*#__PURE__*/React.createElement("div", null, topic.icon && /*#__PURE__*/React.createElement(MenuIcon, {
+          className: styles.menuIcon,
+          type: "icon-".concat(topic.icon)
+        }), /*#__PURE__*/React.createElement("span", {
+          className: classNames(styles.menuTitleContent, styles.subMenuTitleContent)
+        }, topic.title && getSearchValueTitle(topic.title[locale.id])))
+      }, topic.examples.map(function (example) {
+        return /*#__PURE__*/React.createElement(Menu.SubMenu, {
+          key: "EXAMPLE-".concat(topic.id, "-").concat(example.id),
+          title: example.title[locale.id]
+        }, example.demos.map(function (demo) {
+          return /*#__PURE__*/React.createElement(Menu.Item, {
+            key: "DEMO-".concat(topic.id, "-").concat(example.id, "-").concat(demo.id),
+            style: {
+              height: 70,
+              padding: 0,
+              cursor: 'pointer'
+            },
+            onClick: function onClick() {
+              onDemoClicked(_objectSpread(_objectSpread({}, demo), {}, {
+                targetExample: example,
+                targetTopic: topic
+              }));
+            }
+          }, /*#__PURE__*/React.createElement("span", {
+            className: styles.menuTitleContent
+          }, renderExampleDemoCard(demo)));
+        }));
+      }));
+    });
+  };
+
+  // 搜索栏
+  var renderSearchBar = function renderSearchBar() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.searchSider
+    }, /*#__PURE__*/React.createElement(Input, {
+      size: "small",
+      placeholder: intl.formatMessage({
+        id: '搜索…'
+      }),
+      prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
+      value: searchValue,
+      onChange: function onChange(e) {
+        return setSearchValue(e.target.value);
+      }
+    }), /*#__PURE__*/React.createElement(Tooltip, {
+      placement: "right",
+      title: /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "\u6536\u8D77\u6240\u6709"
+      })
+    }, /*#__PURE__*/React.createElement(VerticalAlignTopOutlined, {
+      className: styles.searchSiderIcon,
+      onClick: function onClick() {
+        return setOpenKeys([]);
+      }
+    })));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.shadowWrapper)
+  }, renderSearchBar(), /*#__PURE__*/React.createElement(Menu, {
+    ref: menuRef,
+    mode: "inline",
+    style: {
+      width: '100%'
+    },
+    className: styles.sideBarMenu,
+    openKeys: openKeys,
+    selectedKeys: ["DEMO-".concat(currentDemo.id)],
+    onOpenChange: function onOpenChange(keys) {
+      setOpenKeys(keys);
+    }
+  }, renderSubMenu()));
+};
+export default ExampleSider;

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 InViewSuspense from "../../common/InViewSuspense";
 import SEO from "../../common/SEO";
 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, {
+    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;