@antv/dumi-theme-antv 0.6.4-beta.3 → 0.7.0

package/dist/pages/Example/index.js

@@ -1,77 +1,100 @@
-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 CommonHelmet from "../../common/CommonHelmet";
+import InViewSuspense from "../../common/InViewSuspense";
 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 _exampleTopics$find;
+  /** 示例页面的元数据信息 */
+  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 = (_exampleTopics$find = exampleTopics.find(function (_ref) {
+    var id = _ref.id;
+    return id === topic;
+  })) === null || _exampleTopics$find === void 0 ? void 0 : _exampleTopics$find.examples;
+  var exampleDemo = find(examples, function (_ref2) {
+    var id = _ref2.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 +104,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 +113,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 +127,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";

package/dist/{slots → pages/Index/components}/Detail/News.js

@@ -1,6 +1,6 @@
 import { Link, useLocale } from 'dumi';
 import React from 'react';
-import { ic } from "../hooks";
+import { ic } from "../../../../slots/hooks";
 import styles from "./News.module.less";
 var numberImages = ['https://gw.alipayobjects.com/zos/antfincdn/IqREAm36K7/1.png', 'https://gw.alipayobjects.com/zos/antfincdn/3fG1Iqjfnz/2.png'];
 export var News = function News(_ref) {

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

@@ -19,8 +19,8 @@ import { useLocale } from 'dumi/dist/client/theme-api';
 import gh from 'parse-github-url';
 import React, { useEffect, useState } from 'react';
 import GitHubButton from 'react-github-button';
-import { ic } from "../hooks";
 import { News } from "./News";
+import { ic } from "../../../../slots/hooks";
 import styles from "./index.module.less";
 /**
  * Index.技术栈的描述区域！

package/dist/{slots → pages/Index/components}/Features/FeatureCard.js

@@ -1,6 +1,6 @@
 import cx from 'classnames';
 import React from 'react';
-import { ic } from "../hooks";
+import { ic } from "../../../../slots/hooks";
 import styles from "./FeatureCard.module.less";
 var FeatureCard = function FeatureCard(_ref) {
   var icon = _ref.icon,

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

@@ -1,7 +1,7 @@
 import { Col, Row } from 'antd';
 import cx from 'classnames';
 import React from 'react';
-import { ic } from "../hooks";
+import { ic } from "../../../../slots/hooks";
 import FeatureCard from "./FeatureCard";
 import styles from "./index.module.less";
 export var Features = function Features(_ref) {

package/dist/pages/Index/components/_.less

@@ -0,0 +1,119 @@
+@import '~antd/dist/antd.less';
+
+@primary-color: #873bf4;
+
+.ant-btn,
+.ant-input,
+.ant-notification-notice,
+.ant-select-selector {
+  border-radius: 8px !important;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  > a[aria-hidden]:first-child {
+    float: left;
+    width: 20px;
+    font-size: 0;
+    line-height: inherit;
+    text-align: right;
+    padding-inline-end: 6px;
+    margin-inline-start: -20px;
+
+    &:hover {
+      border: 0;
+    }
+
+    > .icon-link::before {
+      font-size: 20px;
+      content: '#';
+    }
+  }
+
+  &:not(:hover) > a[aria-hidden]:first-child > .icon-link {
+    visibility: hidden;
+  }
+}
+
+.container1440() {
+  width: 1440px;
+  max-width: calc(100% - 80px);
+  margin-right: auto;
+  margin-left: auto;
+
+  @media only screen and (max-width: 931.99px) {
+    & {
+      max-width: calc(100% - 80px);
+    }
+  }
+
+  @media only screen and (max-width: 767.99px) {
+    & {
+      max-width: calc(100% - 32px);
+    }
+  }
+}
+
+// 非常关键，用于 react-split-pane 的样式，如果没有，会没有办法鼠标拖拽
+// 参考：https://codesandbox.io/s/mow7x4zyqx
+:global {
+  .Pane1,
+  .Pane2 {
+    overflow: auto;
+  }
+
+  .Resizer {
+    z-index: 1;
+    box-sizing: border-box;
+    background: #000;
+    background-clip: padding-box;
+    opacity: 0.1;
+
+    &:hover {
+      transition: all 2s ease;
+    }
+
+    &.horizontal {
+      width: 100%;
+      height: 11px;
+      margin: -5px 0;
+      border-top: 5px solid rgba(255, 255, 255, 0);
+      border-bottom: 5px solid rgba(255, 255, 255, 0);
+      cursor: row-resize;
+
+      &:hover {
+        border-top: 5px solid rgba(0, 0, 0, 0.5);
+        border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+      }
+    }
+
+    &.vertical {
+      width: 11px;
+      margin: 0 -5px;
+      border-right: 5px solid rgba(255, 255, 255, 0);
+      border-left: 5px solid rgba(255, 255, 255, 0);
+      cursor: col-resize;
+
+      Pane2 {
+        border-left: 1px solid #e6e6e6;
+      }
+
+      &:hover {
+        border-right: 5px solid rgba(0, 0, 0, 0.5);
+        border-left: 5px solid rgba(0, 0, 0, 0.5);
+      }
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+
+      &:hover {
+        border-color: transparent;
+      }
+    }
+  }
+}

package/dist/{layouts/entry/Index.js → pages/Index/index.js}

@@ -4,26 +4,19 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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); }
-import { FormattedMessage, useSiteData } from 'dumi';
+import { useIntl, useSiteData } from 'dumi';
 import { get, isArray, size } from 'lodash-es';
 import React from 'react';
-import SEO from "../../common/SEO";
-import { Cases } from "dumi/theme/slots/Cases";
-import { Companies } from "dumi/theme/slots/Companies";
-import { Detail } from "dumi/theme/slots/Detail";
-import { Features } from "dumi/theme/slots/Features";
-import { Footer } from "dumi/theme/slots/Footer";
-import { Header } from "dumi/theme/slots/Header";
-
-/**
- * Index 路由下的入口
- * - 获取数据
- * - 组合 slots 下的木偶组件
- */
-export var Index = function Index() {
+import CommonHelmet from "../../common/CommonHelmet";
+import { ic } from "../../slots/hooks";
+import { Cases } from "./components/Cases";
+import { Companies } from "./components/Companies";
+import { Detail } from "./components/Detail";
+import { Features } from "./components/Features";
+var Index = function Index() {
   var _useSiteData = useSiteData(),
     themeConfig = _useSiteData.themeConfig;
-  var title = themeConfig.title,
+  var title = themeConfig.metas.title,
     githubUrl = themeConfig.githubUrl,
     isAntVSite = themeConfig.isAntVSite,
     showGithubStars = themeConfig.showGithubStars,
@@ -35,6 +28,8 @@ export var Index = function Index() {
     className = themeConfig.className,
     style = themeConfig.style,
     id = themeConfig.id;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
   var detailProps = _objectSpread({
     githubUrl: githubUrl,
     showGithubStars: showGithubStars,
@@ -52,13 +47,14 @@ export var Index = function Index() {
     style: style,
     className: className
   };
-  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: ic(title),
     titleSuffix: "AntV"
-  }), /*#__PURE__*/React.createElement(Header, null), size(detail) ? /*#__PURE__*/React.createElement(Detail, detailProps) : null, size(featuresProps.features) ? /*#__PURE__*/React.createElement(Features, featuresProps) : null, size(cases) ? /*#__PURE__*/React.createElement(Cases, casesProps) : null, size(companies) ? /*#__PURE__*/React.createElement(Companies, {
-    title: /*#__PURE__*/React.createElement(FormattedMessage, {
+  }), size(detail) ? /*#__PURE__*/React.createElement(Detail, detailProps) : null, size(featuresProps.features) ? /*#__PURE__*/React.createElement(Features, featuresProps) : null, size(cases) ? /*#__PURE__*/React.createElement(Cases, casesProps) : null, size(companies) ? /*#__PURE__*/React.createElement(Companies, {
+    title: formatMessage({
       id: isAntVSite ? '2000+ 公司正在使用' : '感谢信赖'
     }),
     companies: companies
-  }) : null, /*#__PURE__*/React.createElement(Footer, null));
-};
+  }) : null);
+};
+export default Index;

package/dist/plugin/index.js

@@ -44,6 +44,17 @@ var plugin_default = (api) => {
   api.describe({ key: `dumi-theme:${require("../../package.json").name}` });
   api.modifyDefaultConfig((memo) => {
     memo.resolve.codeBlockMode = "passive";
+    memo.chainWebpack = (memo2) => {
+      memo2.module.rule("less").test(/\.less$/).use("style-loader").loader("style-loader").before("css-loader").end().use("css-loader").loader("css-loader").options({
+        importLoaders: 1,
+        modules: { auto: true }
+        // 启用 CSS Modules（可选）
+      }).end().use("less-loader").loader("less-loader").options({
+        javascriptEnabled: true
+      });
+      return memo2;
+    };
+    memo.exportStatic = {};
     memo.exportStatic.extraRoutePaths = (0, import_examples.getExamplePaths)();
     memo.mfsu = false;
     memo.jsMinifier = "terser";
@@ -61,42 +72,6 @@ var plugin_default = (api) => {
     memo.extraRehypePlugins = [import_rehypeObservable.default];
     return memo;
   });
-  const pages = [
-    {
-      id: "dumi-theme-antv-homepage",
-      absPath: "/"
-    },
-    {
-      id: "dumi-theme-antv-en-homepage",
-      absPath: "/en/"
-    },
-    {
-      id: "dumi-theme-antv-zh-homepage",
-      absPath: "/zh/"
-    },
-    // Examples gallery page.
-    {
-      id: "dumi-theme-antv-example-list-zh",
-      absPath: "/examples",
-      file: `${PAGES_DIR}/Examples`
-    },
-    {
-      id: "dumi-theme-antv-example-list-lang",
-      absPath: "/:language/examples",
-      file: `${PAGES_DIR}/Examples`
-    },
-    // single example preview page.
-    {
-      id: "dumi-theme-antv-single-example-zh",
-      absPath: "/examples/:topic/:example",
-      file: `${PAGES_DIR}/Example`
-    },
-    {
-      id: "dumi-theme-antv-single-example-lang",
-      absPath: "/:language/examples/:topic/:example",
-      file: `${PAGES_DIR}/Example`
-    }
-  ];
   api.modifyConfig((memo) => {
     memo.extraRemarkPlugins = memo.themeConfig.feedback ? [import_remarkFeedback.default] : [];
     return memo;
@@ -136,18 +111,63 @@ export default function ThemeAntVContextWrapper() {
     file: `${api.paths.absTmpPath}/theme-antv/ContextWrapper.tsx`
   }));
   api.modifyRoutes((routes) => {
-    pages.forEach((page) => {
-      routes[page.id] = {
-        id: page.id,
-        path: page.absPath.slice(1),
-        absPath: page.absPath,
-        file: page.file,
+    const extraRoutesList = [
+      {
+        id: "dumi-theme-antv-homepage",
+        absPath: "/",
+        path: "",
+        file: `${PAGES_DIR}/Index`
+      },
+      {
+        id: "dumi-theme-antv-homepage-en",
+        absPath: "/en/",
+        path: "en",
+        file: `${PAGES_DIR}/Index`
+      },
+      {
+        id: "dumi-theme-antv-homepage-zh",
+        absPath: "/zh/",
+        path: "zh",
+        file: `${PAGES_DIR}/Index`
+      },
+      // Examples gallery page.
+      {
+        id: "dumi-theme-antv-example-list-zh",
+        absPath: "/examples",
+        path: "examples",
+        file: `${PAGES_DIR}/Examples`
+      },
+      {
+        id: "dumi-theme-antv-example-list-lang",
+        absPath: "/:language/examples",
+        path: ":language/examples",
+        file: `${PAGES_DIR}/Examples`
+      },
+      // single example preview page.
+      {
+        id: "dumi-theme-antv-single-example-zh",
+        absPath: "/examples/:topic/:example",
+        path: "examples/:topic/:example",
+        file: `${PAGES_DIR}/Example`
+      },
+      {
+        id: "dumi-theme-antv-single-example-lang",
+        absPath: "/:language/examples/:topic/:example",
+        path: ":language/examples/:topic/:example",
+        file: `${PAGES_DIR}/Example`
+      }
+    ];
+    extraRoutesList.forEach((itemRoute) => {
+      routes[itemRoute.id] = {
+        id: itemRoute.id,
+        path: itemRoute.path,
+        absPath: itemRoute.absPath,
+        file: itemRoute.file,
         parentId: "DocLayout",
         meta: MOCK_META
       };
     });
     routes["404"].file = `${PAGES_DIR}/404`;
-    routes["404"].meta = MOCK_META;
     return routes;
   });
   api.addTmpGenerateWatcherPaths(() => [path.resolve(process.cwd(), "examples")]);