@antv/dumi-theme-antv 0.3.0-beta.2 → 0.3.0-beta.21

package/dist/builtins/Playground/index.d.ts

@@ -9,7 +9,7 @@ export declare type PlaygroundProps = {
      */
     rid?: string;
     /**
-     * 预览区、代码区的宽度占比，默认为 0.62
+     * 预览区、代码区的宽度占比，默认为 0.38
      */
     ratio?: number;
     /**
@@ -17,8 +17,5 @@ export declare type PlaygroundProps = {
      */
     height?: number;
 };
-/**
- * Markdown 标签插件 Playground
- */
-declare const Playground: React.FC<PlaygroundProps>;
-export default Playground;
+declare const _default: React.FC<PlaygroundProps>;
+export default _default;

package/dist/builtins/Playground/index.js

@@ -10,9 +10,12 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+import { useSiteData } from 'dumi';
+import { get } from 'lodash-es';
 import React, { useContext } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import { ThemeAntVContext } from "../../context";
-import { CodeRunner } from "../../slots/CodeRunner";
+import { CodeRunner } from "dumi/theme/slots/CodeRunner";
 import styles from "./index.module.less";
 
 /**
@@ -21,8 +24,7 @@ import styles from "./index.module.less";
 var Playground = function Playground(_ref) {
   var rid = _ref.rid,
       path = _ref.path,
-      _ref$ratio = _ref.ratio,
-      ratio = _ref$ratio === void 0 ? 0.62 : _ref$ratio,
+      ratio = _ref.ratio,
       _ref$height = _ref.height,
       height = _ref$height === void 0 ? 400 : _ref$height;
 
@@ -30,26 +32,44 @@ var Playground = function Playground(_ref) {
   var _useContext = useContext(ThemeAntVContext),
       meta = _useContext.meta;
 
-  var exampleTopics = meta.exampleTopics; // '/case/area/demo/area5.ts'
+  var exampleTopics = meta.exampleTopics; // 'case/area/demo/area5.ts'
 
-  var _ref2 = path.match(/\/([\w-]+)\/([\w-]+)\/demo\/([\w-]+)/i),
+  var _ref2 = path.match(/([\w-]+)\/([\w-]+)\/demo\/([\w-]+)/i),
       _ref3 = _slicedToArray(_ref2, 4),
       _ = _ref3[0],
       topic = _ref3[1],
       example = _ref3[2],
       demo = _ref3[3];
 
+  var themeConfig = useSiteData();
+  var defaultSize = get(themeConfig, 'editor.playgroundSize', 0.38);
+  var size = isNaN(Number(ratio)) ? defaultSize : Number(ratio);
   return /*#__PURE__*/React.createElement("div", {
     className: styles.container,
     style: {
       height: height
     }
   }, /*#__PURE__*/React.createElement(CodeRunner, {
+    isPlayground: true,
     exampleTopics: exampleTopics,
     topic: topic,
     example: example,
-    demo: demo
+    demo: demo,
+    size: size,
+    replaceId: rid
   }));
 };
 
-export default Playground;
+function ErrorFallback(_ref4) {
+  var error = _ref4.error;
+  console.log(error);
+  return /*#__PURE__*/React.createElement("div", {
+    role: "alert"
+  }, /*#__PURE__*/React.createElement("p", null, "Something went wrong:"), /*#__PURE__*/React.createElement("pre", null, error.message));
+}
+
+export default (function (props) {
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    FallbackComponent: ErrorFallback
+  }, /*#__PURE__*/React.createElement(Playground, props));
+});

package/dist/context.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
+import { ExampleTopic } from './types';
 export declare type IThemeAntVContext = {
-    exampleTopics?: ExamplesPage.ExampleTopic[];
+    exampleTopics?: ExampleTopic[];
 };
 export declare const ThemeAntVContext: import("react").Context<IThemeAntVContext>;

package/dist/layouts/DocLayout.js

@@ -1,7 +1,6 @@
-import React from 'react';
-import { useOutlet, useLocation } from 'dumi';
+import React, { useEffect } from 'react';
+import { useOutlet, useLocation, useSiteData } from 'dumi';
 import { Index } from "./entry/Index";
-import { API } from "./entry/API";
 import { Manual } from "./entry/Manual"; // 用户手动添加自己的
 
 import "../slots/global";
@@ -11,28 +10,38 @@ import "../slots/_.less";
  */
 
 export default (function () {
+  var _useSiteData = useSiteData(),
+      themeConfig = _useSiteData.themeConfig;
+
+  var navs = themeConfig.navs; // 打印控制台文案
+
+  useEffect(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(),
       pathname = _useLocation.pathname;
 
-  var p = pathname.toLowerCase(); // @todo 南洋
-  // 做一些跳转，比如：/zh/examples/xxx -> /examples/xxx
-  // 首页
-
-  if (p === '/' || p === '/en' || p === '/en/') return /*#__PURE__*/React.createElement(Index, null); // API 页面
+  var path = pathname; // 统一去掉中英文前缀
 
-  if (p.startsWith('/api') || p.startsWith('/en/api') || // 这两个是兼容之前的
-  p.startsWith('/zh/docs/api') || p.startsWith('/en/docs/api')) {
-    return /*#__PURE__*/React.createElement(API, null, " ", outlet, " ");
-  } // 教程页面
+  var p = path.replace('/zh/', '/').replace('/en/', '/'); // 首页
 
+  if (p === '/' || p === '/zh' || p === '/en' || p === '/en/') return /*#__PURE__*/React.createElement(Index, null); // 匹配 navs 中的 docs 路由
 
-  if (p.startsWith('/manual') || p.startsWith('/en/manual') || // 这两个是兼容之前的
-  p.startsWith('/zh/docs/manual/') || p.startsWith('/en/docs/manual/')) {
-    return /*#__PURE__*/React.createElement(Manual, null, " ", outlet, " ");
-  } // More router, add here...
+  var docsRoutes = navs.filter(function (nav) {
+    return nav.slug && nav.slug.startsWith('docs/');
+  }).map(function (nav) {
+    return nav.slug && nav.slug.split('/').find(function (item) {
+      return item !== 'docs';
+    });
+  });
 
+  if (docsRoutes.some(function (route) {
+    return p.startsWith("/".concat(route)) || p.startsWith("/docs/".concat(route));
+  })) {
+    return /*#__PURE__*/React.createElement(Manual, null, outlet);
+  }
 
   return outlet;
 });

package/dist/layouts/entry/Index.js

@@ -5,14 +5,15 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import React from 'react';
-import { useSiteData } from 'dumi';
-import { Header } from "../../slots/Header";
-import { Detail } from "../../slots/Detail";
-import { Features } from "../../slots/Features";
-import { Cases } from "../../slots/Cases";
-import { Companies } from "../../slots/Companies";
-import { Footer } from "../../slots/Footer";
-import { useT } from "../../slots/hooks";
+import { useLocale, useSiteData, FormattedMessage } from 'dumi';
+import { SEO } from "dumi/theme/slots/SEO";
+import { Header } from "dumi/theme/slots/Header";
+import { Detail } from 'dumi/theme/slots/Detail';
+import { Features } from "dumi/theme/slots/Features";
+import { Cases } from "dumi/theme/slots/Cases";
+import { Companies } from "dumi/theme/slots/Companies";
+import { Footer } from "dumi/theme/slots/Footer";
+import { size } from 'lodash-es';
 /**
  * Index 路由下的入口
  * - 获取数据
@@ -20,6 +21,8 @@ import { useT } from "../../slots/hooks";
  */
 
 export var Index = function Index() {
+  var locale = useLocale();
+
   var _useSiteData = useSiteData(),
       themeConfig = _useSiteData.themeConfig;
 
@@ -53,7 +56,6 @@ export var Index = function Index() {
   }, detail);
 
   var featuresProps = {
-    title: title,
     features: features,
     className: className,
     style: style,
@@ -64,8 +66,15 @@ export var Index = function Index() {
     style: style,
     className: className
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(Detail, detailProps), /*#__PURE__*/React.createElement(Features, featuresProps), /*#__PURE__*/React.createElement(Cases, casesProps), /*#__PURE__*/React.createElement(Companies, {
-    title: useT("感谢信赖"),
+  var metaTitle = detailProps.title;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SEO, {
+    title: "".concat(metaTitle[locale.id]),
+    titleSuffix: "AntV",
+    lang: locale.id
+  }), /*#__PURE__*/React.createElement(Header, null), size(detail) ? /*#__PURE__*/React.createElement(Detail, detailProps) : null, size(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, {
+      id: isAntVSite ? "2000+ 公司正在使用" : "感谢信赖"
+    }),
     companies: companies
-  }), /*#__PURE__*/React.createElement(Footer, null));
+  }) : null, /*#__PURE__*/React.createElement(Footer, null));
 };

package/dist/layouts/entry/Manual.js

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

package/dist/pages/404.js

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

package/dist/pages/Example/index.js

@@ -1,9 +1,3 @@
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 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."); }
@@ -18,14 +12,17 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { useContext, useEffect, useState } from 'react';
 import { useParams, useLocation, useNavigate } from 'react-router-dom';
+import { get } from 'lodash-es';
 import { Layout } from 'antd';
-import { useLocale } from 'dumi';
-import { Header } from "../../slots/Header";
-import { ExampleSider } from "../../slots/ExampleSider";
-import { CodeRunner } from "../../slots/CodeRunner";
+import { useLocale, useSiteData } from 'dumi';
+import { SEO } from "dumi/theme/slots/SEO";
+import { Header } from "dumi/theme/slots/Header";
+import { ExampleSider } from "dumi/theme/slots/ExampleSider";
+import { CodeRunner } from "dumi/theme/slots/CodeRunner";
 import { getDemoInfo } from "../../slots/CodeRunner/utils";
 import { ThemeAntVContext } from "../../context";
 import styles from "./index.module.less";
+import { getCurrentTitle } from "./utils";
 var Sider = Layout.Sider,
     Content = Layout.Content;
 
@@ -39,8 +36,6 @@ var Example = function Example() {
   var nav = useNavigate();
 
   var _useParams = useParams(),
-      _useParams$language = _useParams.language,
-      language = _useParams$language === void 0 ? 'zh' : _useParams$language,
       topic = _useParams.topic,
       example = _useParams.example;
   /** 示例页面的元数据信息 */
@@ -48,6 +43,10 @@ var Example = function Example() {
 
   var metaData = useContext(ThemeAntVContext);
   var locale = useLocale();
+
+  var _useSiteData = useSiteData(),
+      themeConfig = _useSiteData.themeConfig;
+
   var exampleTopics = metaData.meta.exampleTopics;
   var demo = hash.slice(1);
 
@@ -56,54 +55,29 @@ var Example = function Example() {
       currentDemo = _useState2[0],
       setCurrentDemo = _useState2[1];
 
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isCollapsed = _useState4[0],
+      setIsCollapsed = _useState4[1];
+
+  var _useState5 = useState({}),
+      _useState6 = _slicedToArray(_useState5, 2),
+      title = _useState6[0],
+      setTitle = _useState6[1];
+
   useEffect(function () {
     if (topic && example && demo) {
       var targetDemoInfo = getDemoInfo(exampleTopics, topic, example, demo);
       setCurrentDemo(targetDemoInfo);
+      setTitle(getCurrentTitle(exampleTopics, topic, example));
     }
-  }, [topic, example, hash]); // 提取出来获取 唯一value值的 方法
-
-  var getPath = function getPath(item) {
-    var _item$relativePath;
-
-    if (!item) {// @todo 怀策
-      // debugger
-    }
-
-    var demoSlug = (_item$relativePath = item.relativePath) === null || _item$relativePath === void 0 ? void 0 : _item$relativePath.replace(/\/demo\/(.*)\..*/, function (_, filename) {
-      return "#".concat(filename);
-    });
-    return "/".concat(locale.id, "/examples/").concat(demoSlug);
-  }; // 一级菜单，二级菜单 数据 treeData + 二级菜单，示例 数据 result 写成一个 一级，二级，示例的三层树结构 数据
-
-
-  var transformNode = function transformNode(data, result) {
-    return data.map(function (item) {
-      var _result$find;
-
-      if (item.children && !item.node) {
-        return _objectSpread(_objectSpread({}, item), {}, {
-          children: transformNode(item.children, result)
-        });
-      }
-
-      var _item$node = item.node,
-          frontmatter = _item$node.frontmatter,
-          fields = _item$node.fields;
-      return _objectSpread(_objectSpread({}, frontmatter), {}, {
-        // 提前给二级菜单的key值加入 特殊值 好辨别
-        value: "secondaryKey-".concat(fields === null || fields === void 0 ? void 0 : fields.slug),
-        children: (_result$find = result.find(function (_ref) {
-          var k = _ref.title;
-          return k === frontmatter.title;
-        })) === null || _result$find === void 0 ? void 0 : _result$find.children
-      });
-    });
-  };
-
+  }, [topic, example, hash]);
   return /*#__PURE__*/React.createElement("div", {
     className: styles.example
-  }, /*#__PURE__*/React.createElement(Header, {
+  }, /*#__PURE__*/React.createElement(SEO, {
+    title: title[locale.id],
+    lang: locale.id
+  }), /*#__PURE__*/React.createElement(Header, {
     isHomePage: false
   }), /*#__PURE__*/React.createElement(Layout, {
     className: styles.container
@@ -112,7 +86,8 @@ var Example = function Example() {
     width: 250,
     trigger: null,
     collapsible: true,
-    className: styles.sider,
+    collapsed: isCollapsed,
+    className: styles.menuSider,
     theme: "light"
   }, currentDemo && /*#__PURE__*/React.createElement(ExampleSider, {
     showExampleDemoTitle: true,
@@ -132,7 +107,8 @@ var Example = function Example() {
     exampleTopics: exampleTopics,
     topic: topic,
     example: example,
-    demo: demo
+    demo: demo,
+    size: get(themeConfig, 'editor.size', 0.38)
   }))));
 };
 

package/dist/pages/Example/index.module.less

@@ -16,14 +16,6 @@
     flex: 1;
     background-color: #fff;
 
-    .sider {
-      height: 100%;
-
-      .exampleList {
-
-      }
-    }
-
     .content {
       position: relative;
       height: 100%;
@@ -38,3 +30,53 @@
     }
   }
 }
+
+.menuSider {
+  background-color: #f8f9fc;
+  border-right: 1px solid #ececec;
+
+  :global {
+    .ant-layout-sider-children {
+      overflow-y: hidden;
+      overflow-x: hidden;
+
+      &:hover {
+        overflow-y: auto;
+      }
+    }
+  }
+}
+
+.trigger {
+  font-size: 12px;
+  position: relative;
+  margin: auto;
+  color: #6c7f90;
+  left: -1px;
+  z-index: 4;
+  width: 22px;
+  cursor: pointer;
+  transition: color 0.3s;
+  border: 1px solid #ececec;
+  border-left: none;
+  background-color: #fff;
+  height: 66px;
+  box-sizing: border-box;
+  border-bottom-right-radius: 4px;
+  border-top-right-radius: 4px;
+  text-align: center;
+
+  &[type='menu-unfold'] {
+    background-color: #f8f9fc;
+  }
+
+  svg {
+    position: absolute;
+    left: 3px;
+    top: 25px;
+  }
+}
+
+.trigger:hover {
+  color: @primary-color;
+}

package/dist/pages/Example/utils.d.ts

@@ -0,0 +1 @@
+export declare function getCurrentTitle(exampleTopics: any, topic: any, example: any): any;

package/dist/pages/Example/utils.js

@@ -0,0 +1,9 @@
+export function getCurrentTitle(exampleTopics, topic, example) {
+  var topicItem = exampleTopics.find(function (item) {
+    return item.id === topic;
+  });
+  var exmapleItem = topicItem.examples.find(function (item) {
+    return item.id === example;
+  });
+  return exmapleItem.title;
+}

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

@@ -19,6 +19,10 @@ var MenuIcon = createFromIconfontCN({
   scriptUrl: '//at.alicdn.com/t/font_470089_1lnym745udm.js' // generated by iconfont.cn
 
 });
+
+function getCategoryId(tid, eid) {
+  return [tid, eid].join('-').replace(/\s/g, '');
+}
 /**
  * LeftMenu
  *
@@ -27,6 +31,7 @@ var MenuIcon = createFromIconfontCN({
  * @author YuZhanglong <loveyzl1123@gmail.com>
  */
 
+
 export var LeftMenu = function LeftMenu(props) {
   var exampleTopics = props.exampleTopics;
 
@@ -66,7 +71,7 @@ export var LeftMenu = function LeftMenu(props) {
       return /*#__PURE__*/React.createElement(Menu.Item, {
         key: example.id
       }, /*#__PURE__*/React.createElement(Anchor.Link, {
-        href: "#category-".concat(example.id.replace(/\s/g, '')),
+        href: "#".concat(getCategoryId(topic.id, example.id)),
         title: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, example.title[locale.id]))
       }));
     }));

package/dist/pages/Examples/components/GalleryPageContent/DemoCard/index.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Link, useLocale } from 'dumi';
+import cx from 'classnames';
 import { Badge } from 'antd';
+import { ic } from "../../../../../slots/hooks";
 import styles from "../../../index.module.less";
 /**
  * DEMO 的卡片预览
@@ -17,17 +19,20 @@ export var DemoCard = function DemoCard(props) {
   var locale = useLocale();
 
   var renderCardInternal = function renderCardInternal() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
-      src: demo.screenshot || 'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/screenshot-placeholder-b8e70.png',
-      alt: demo.title[locale.id]
-    })));
+    var img = demo.screenshot || 'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/screenshot-placeholder-b8e70.png';
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: cx('demo-card-screenshot', styles.screenshot),
+      style: {
+        backgroundImage: "url(\"".concat(img, "\")")
+      }
+    }));
   };
 
   return /*#__PURE__*/React.createElement(Link, {
     className: styles.galleryCardLink,
-    to: "/".concat(locale.id, "/examples/").concat(topicId, "/").concat(exampleId, "/#").concat(demo.id)
+    to: "".concat(locale.id == 'zh' ? '' : '/en', "/examples/").concat(topicId, "/").concat(exampleId, "/#").concat(demo.id)
   }, demo.isNew ? /*#__PURE__*/React.createElement(Badge.Ribbon, {
     text: "new",
     className: styles.customRibbon
-  }, renderCardInternal()) : renderCardInternal(), /*#__PURE__*/React.createElement("h4", null, demo.title[locale.id]));
+  }, renderCardInternal()) : renderCardInternal(), /*#__PURE__*/React.createElement("h4", null, ic(demo.title)));
 };

package/dist/pages/Examples/index.js

@@ -11,10 +11,13 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React from 'react';
-import { useContext } from 'react';
+import { useContext, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { BackTop, Layout as AntLayout } from 'antd';
-import { Header } from "../../slots/Header";
-import { Footer } from "../../slots/Footer";
+import { useLocale } from 'dumi';
+import { SEO } from "dumi/theme/slots/SEO";
+import { Header } from "dumi/theme/slots/Header";
+import { Footer } from "dumi/theme/slots/Footer";
 import NavigatorBanner from "../../slots/Header/Products/NavigatorBanner";
 import { VerticalAlignTopOutlined } from '@ant-design/icons';
 import { Article } from "./components/Article";
@@ -30,7 +33,10 @@ import styles from "./index.module.less";
  */
 
 var Example = function Example() {
+  var nav = useNavigate();
+  var locale = useLocale();
   /** 示例页面的元数据信息 */
+
   var metaData = useContext(ThemeAntVContext);
   var exampleTopics = metaData.meta.exampleTopics;
 
@@ -39,7 +45,21 @@ var Example = function Example() {
       prev = _usePrevAndNext2[0],
       next = _usePrevAndNext2[1];
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
+  var title = {
+    zh: '所有图表',
+    en: "Gallery"
+  }; // 为 zh 做兜底
+
+  useEffect(function () {
+    var p = window.location.pathname;
+
+    if (p.includes('/zh/')) {
+      nav(p.replace('/zh/', '/'));
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SEO, {
+    title: title[locale.id]
+  }), /*#__PURE__*/React.createElement(Header, {
     isHomePage: false
   }), /*#__PURE__*/React.createElement(AntLayout, {
     hasSider: true,

package/dist/pages/Examples/index.module.less

@@ -199,6 +199,11 @@
 
 .layout {
   margin: 24px 0 32px;
+  :global {
+    .ant-layout-content {
+      background-color: #ffffff;
+    }
+  }
 }
 
 .main {
@@ -206,6 +211,7 @@
   width: calc(100% - @toc-width);
   padding-left: 48px;
   padding-right: 24px;
+  padding-bottom: 24px;
   overflow: hidden;
 
   .meta {
@@ -268,6 +274,7 @@
 .sider {
   width: 280px !important;
   height: inherit;
+  background-color: #fff;
 
   // menu 滚动
   :global {
@@ -282,6 +289,7 @@
 }
 
 .affix {
+  background-color: #fff;
   & > div {
     height: 100%;
   }
@@ -367,6 +375,12 @@
       transition: all 0.3s;
       margin: 12px;
 
+      .screenshot {
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+      }
+
       > div {
         border: 1px solid @border-color-split;
         border-radius: 6px;
@@ -513,6 +527,7 @@
       margin-top: 30px;
       padding-left: 24px;
       padding-right: 24px;
+      margin-bottom: 30px;
     }
   }
 }