@antv/dumi-theme-antv 0.2.1 → 0.3.0-beta.1

package/{src/antv/Features/Features.module.less → dist/slots/Features/index.module.less}

@@ -1,4 +1,4 @@
-@import '../mixins';
+@import '../_.less';
 
 .wrapper {
   display: flex;
@@ -9,6 +9,7 @@
   background: rgb(240, 245, 250);
   height: auto;
   overflow-x: hidden;
+
   .content {
     width: 95.8%;
     height: 100%;
@@ -17,6 +18,7 @@
     position: relative;
     .container1440;
   }
+
   .title {
     font-size: 2.8em;
     padding-left: 4.06%;
@@ -26,24 +28,32 @@
     height: min-content;
     color: #fff;
   }
+
   .slicerbarv {
     display: none;
   }
+
   .slicerbarv2 {
     display: none;
   }
+
   .lefttop {
-    background: linear-gradient(130deg, fade(@primary-color, 70%), shade(@primary-color, 20%));
+    background: linear-gradient(130deg,
+        fade(@primary-color, 70%),
+        shade(@primary-color, 20%));
     width: 100%;
     top: 0;
     position: absolute;
   }
+
   .lefttopWithTitle {
     height: 60%;
   }
+
   .lefttopWithoutTitle {
     height: 75%;
   }
+
   .rightbottom {
     position: absolute;
     width: 95.83%;
@@ -53,15 +63,18 @@
     height: 65%;
     box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.1);
   }
+
   .rightbottomWithoutTitle {
     top: 48px;
     height: 75%;
   }
+
   .cardsContainer {
     width: 100%;
     height: 65%;
     margin-top: 48px;
     position: relative;
+
     .cards {
       display: flex;
       text-align: center;
@@ -69,9 +82,11 @@
       width: -webkit-fill-available;
       flex-wrap: wrap;
       margin-left: 4.06%;
+
       .cardWrapper {
         margin: 68px 0 93px 0;
         border-right: 1px solid rgba(0, 0, 0, 0.1);
+
         &:last-child {
           border-right: 0px;
         }
@@ -79,6 +94,7 @@
     }
   }
 }
+
 .dot {
   position: absolute;
   width: 3px;
@@ -91,14 +107,17 @@
 @media (max-width: 768px) {
   .wrapper {
     width: 100%;
+
     .lefttop {
       left: 0px;
       height: 100%;
       width: 100%;
     }
+
     .rightbottom {
       height: 79.5%;
       margin-top: 48px;
+
       .slicerbarv {
         position: absolute;
         background-color: #f2f4f5;
@@ -108,9 +127,11 @@
         display: block;
         z-index: 1;
       }
+
       .slicerbarv2 {
         margin-left: 92.2%; // 1 - (0.96 * 0.04 + 0.04)
       }
+
       .slicerbarh {
         position: absolute;
         background-color: #f2f4f5;
@@ -119,12 +140,15 @@
         display: block;
         margin-top: 45px;
       }
+
       .slicerbarh2 {
         margin-top: 395px;
       }
+
       .slicerbarh3 {
         margin-top: 745px;
       }
+
       .slicerbarh4 {
         margin-top: 1095px;
       }
@@ -134,24 +158,30 @@
       top: 48px;
       height: 86.5%;
     }
+
     .lefttopWithTitle {
       height: 95.73%;
     }
+
     .lefttopWithoutTitle {
       height: 95.73%;
     }
+
     .content {
       .title {
         font-size: 2.143rem;
         margin: 80px 0 60px 0;
       }
+
       .cardsContainer {
         margin-bottom: 70px;
+
         .cards {
           margin-top: 60px;
           margin-left: 3.34%;
           padding-top: 45px;
           padding-bottom: 45px;
+
           .cardWrapper {
             margin: 68px 0 68px 0;
             width: 100%;
@@ -162,8 +192,9 @@
       }
     }
   }
+
   .dot {
     display: block;
     z-index: 2;
   }
-}
+}

package/dist/slots/Footer/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { FooterProps as RcFooterProps } from 'rc-footer';
+import 'rc-footer/assets/index.less';
+interface FooterProps extends RcFooterProps {
+    rootDomain?: string;
+    language?: string;
+    githubUrl?: string;
+    /**
+     * 是否为动态 footer
+     */
+    isDynamicFooter?: boolean;
+}
+/**
+ * 底部菜单
+ * @returns
+ */
+export declare const Footer: React.FC<FooterProps>;
+export {};

package/dist/slots/Footer/index.js

@@ -0,0 +1,187 @@
+var _excluded = ["columns", "bottom", "theme", "language", "isDynamicFooter", "rootDomain"];
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
+import { default as RCFooter } from 'rc-footer';
+import { GithubOutlined, WeiboOutlined, ZhihuOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import { omit } from 'lodash-es';
+import classnames from 'classnames';
+import { useLocale } from 'dumi';
+import { useT } from "../hooks";
+import 'rc-footer/assets/index.less';
+import styles from "./index.module.less";
+
+/**
+ * 底部菜单
+ * @returns
+ */
+export var Footer = function Footer(props) {
+  var columns = props.columns,
+      bottom = props.bottom,
+      _props$theme = props.theme,
+      theme = _props$theme === void 0 ? 'dark' : _props$theme,
+      language = props.language,
+      isDynamicFooter = props.isDynamicFooter,
+      _props$rootDomain = props.rootDomain,
+      rootDomain = _props$rootDomain === void 0 ? '' : _props$rootDomain,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var locale = useLocale();
+  var lang = locale.id;
+
+  var getColumns = function getColumns() {
+    // 如果外部没有传入 columns，则默认展示 antv footer
+    var col1 = {
+      title: 'Resources',
+      items: [{
+        title: 'Ant Design',
+        url: 'https://ant.design',
+        openExternal: true
+      }, {
+        title: 'Ant Design Mobile',
+        url: 'https://mobile.ant.design',
+        openExternal: true
+      }, {
+        title: 'Umi',
+        description: useT('React 应用开发框架'),
+        url: 'https://umijs.org',
+        openExternal: true
+      }, {
+        title: 'Dumi',
+        description: useT('组件/文档研发工具'),
+        url: 'https://d.umijs.org',
+        openExternal: true
+      }, {
+        title: 'ahooks',
+        description: useT('React Hooks 库'),
+        url: 'https://github.com/alibaba/hooks',
+        openExternal: true
+      }, {
+        title: useT('国内镜像'),
+        url: 'https://antv.antgroup.com/'
+      }]
+    };
+    var col2 = {
+      title: useT('社区'),
+      items: [{
+        icon: /*#__PURE__*/React.createElement(ZhihuOutlined, {
+          style: {
+            color: '#0084ff'
+          }
+        }),
+        title: useT('体验科技专栏'),
+        url: 'http://zhuanlan.zhihu.com/xtech',
+        openExternal: true
+      }, {
+        icon: /*#__PURE__*/React.createElement("img", {
+          src: "https://gw.alipayobjects.com/zos/rmsportal/mZBWtboYbnMkTBaRIuWQ.png",
+          alt: "seeconf"
+        }),
+        title: 'SEE Conf',
+        description: useT('蚂蚁体验科技大会'),
+        url: 'https://seeconf.antfin.com/',
+        openExternal: true
+      }]
+    };
+    var col3 = {
+      title: useT('帮助'),
+      items: [{
+        icon: /*#__PURE__*/React.createElement(GithubOutlined, null),
+        title: 'GitHub',
+        url: 'https://github.com/antvis',
+        openExternal: true
+      }, {
+        icon: /*#__PURE__*/React.createElement(QuestionCircleOutlined, null),
+        title: useT('StackOverflow'),
+        url: 'http://stackoverflow.com/questions/tagged/antv',
+        openExternal: true
+      }]
+    };
+    var more = {
+      icon: /*#__PURE__*/React.createElement("img", {
+        src: "https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg",
+        alt: "more products"
+      }),
+      title: '更多产品',
+      items: [{
+        icon: /*#__PURE__*/React.createElement("img", {
+          src: "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg",
+          alt: "Ant Design"
+        }),
+        title: 'Ant Design',
+        url: 'https://ant.design',
+        description: '企业级 UI 设计语言',
+        openExternal: true
+      }, {
+        icon: /*#__PURE__*/React.createElement("img", {
+          src: "https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg",
+          alt: "yuque"
+        }),
+        title: '语雀',
+        url: 'https://yuque.com',
+        description: '知识创作与分享工具',
+        openExternal: true
+      }, {
+        icon: /*#__PURE__*/React.createElement("img", {
+          src: "https://gw.alipayobjects.com/zos/antfincdn/v2%24rh7lqpu/82f338dd-b0a6-41bc-9a86-58aaa9df217b.png",
+          alt: "Egg"
+        }),
+        title: 'Egg',
+        url: 'https://eggjs.org',
+        description: '企业级 Node 开发框架',
+        openExternal: true
+      }, {
+        icon: /*#__PURE__*/React.createElement("img", {
+          src: "https://gw.alipayobjects.com/zos/rmsportal/DMDOlAUhmktLyEODCMBR.ico",
+          alt: "kitchen"
+        }),
+        title: 'Kitchen',
+        description: 'Sketch 工具集',
+        url: 'https://kitchen.alipay.com',
+        openExternal: true
+      }, {
+        icon: /*#__PURE__*/React.createElement("img", {
+          src: "https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg",
+          alt: "xtech"
+        }),
+        title: '蚂蚁体验科技',
+        url: 'https://xtech.antfin.com/',
+        openExternal: true
+      }]
+    };
+    return [col1, col2, col3, more];
+  };
+
+  return /*#__PURE__*/React.createElement(RCFooter, _extends({
+    maxColumnsPerRow: 5,
+    theme: theme,
+    columns: columns || getColumns(),
+    className: classnames(styles.footer, _defineProperty({}, styles.withMenu, isDynamicFooter)),
+    bottom: bottom || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: styles.bottom
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
+      href: "https://weibo.com/antv2017",
+      target: "_blank",
+      rel: "noopener noreferrer"
+    }, /*#__PURE__*/React.createElement(WeiboOutlined, null)), /*#__PURE__*/React.createElement("a", {
+      href: "https://zhuanlan.zhihu.com/aiux-antv",
+      target: "_blank",
+      rel: "noopener noreferrer"
+    }, /*#__PURE__*/React.createElement(ZhihuOutlined, null)), /*#__PURE__*/React.createElement("a", {
+      href: "https://github.com/antvis",
+      target: "_blank",
+      rel: "noopener noreferrer"
+    }, /*#__PURE__*/React.createElement(GithubOutlined, null)), /*#__PURE__*/React.createElement("a", {
+      href: "".concat(rootDomain, "/").concat(lang, "/about")
+    }, useT('关于我们'))), /*#__PURE__*/React.createElement("div", null, "\xA9 ", new Date().getFullYear(), " Made with \u2764 by", ' ', /*#__PURE__*/React.createElement("a", {
+      href: "https://xtech.antfin.com/"
+    }, "AntV"))))
+  }, omit(restProps, ['githubUrl'])));
+};

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

@@ -0,0 +1,85 @@
+@import '~antd/es/style/themes/default.less';
+@import '../_.less';
+
+.footer {
+  font-family: Avenir, @font-family;
+
+  :global(.rc-footer-container),
+  :global(.rc-footer-bottom-container) {
+    .container1440;
+  }
+
+  .description {
+    opacity: 0.6;
+    font-weight: normal;
+    margin-left: 0.5em;
+  }
+
+  .more {
+    display: flex;
+    justify-content: center;
+    font-size: 14px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
+    margin-bottom: 16px;
+    box-sizing: border-box;
+    padding-bottom: 16px;
+    overflow: hidden;
+    flex-wrap: wrap;
+
+    .title {
+      font-size: 15px;
+      color: #fff;
+      margin-right: 8px;
+    }
+
+    :global(.anticon),
+    a {
+      margin-right: 5px;
+      color: #fff;
+    }
+
+    img {
+      width: 14px;
+      height: 14px;
+      margin-right: 4px;
+      position: relative;
+      top: -2px;
+    }
+  }
+
+  .bottom {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+
+    :global(.anticon),
+    a {
+      margin-right: 8px;
+      color: rgba(255, 255, 255, 0.6);
+    }
+  }
+}
+
+@media only screen and (max-width: 767.99px) {
+  .footer {
+    .bottom {
+      display: block;
+    }
+  }
+}
+
+.withMenu {
+  margin-left: 0;
+}
+
+@media only screen and (min-width: 767.99px) {
+  .withMenu {
+    margin-left: 240px;
+  }
+}
+
+@media only screen and (min-width: 991.99px) {
+  .withMenu {
+    margin-left: 280px;
+  }
+}

package/dist/slots/Header/Logo.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/**
+ * Header.LOGO
+ */
+export declare const Logo: ({ style }: {
+    style: any;
+}) => JSX.Element;

package/{es/antv → dist/slots}/Header/Logo.js

@@ -1,5 +1,9 @@
 import React from 'react';
-export default (function (_ref) {
+/**
+ * Header.LOGO
+ */
+
+export var Logo = function Logo(_ref) {
   var style = _ref.style;
   return /*#__PURE__*/React.createElement("svg", {
     width: "94",
@@ -127,4 +131,4 @@ export default (function (_ref) {
     fill: "url(#linearGradient-4)",
     d: "M19.8878401,7.40978464 C19.7383064,7.15620152 19.4618641,6.99998235 19.1626937,7.00000003 L12.8373895,7.00000003 C12.5382281,6.9999242 12.261761,7.15608029 12.1121725,7.40962229 C11.962584,7.66316428 11.9626109,7.97555472 12.112243,8.22907204 L15.2751831,13.5903738 C15.4247323,13.8438523 15.7011,14 16.0001856,14 C16.2992712,14 16.5756388,13.8438523 16.725188,13.5903738 L19.8878401,8.22935388 C20.0373866,7.97586547 20.0373866,7.66355488 19.8878401,7.41006648 L19.8878401,7.40978464 Z"
   })))));
-});
+};

package/dist/slots/Header/LogoWhite.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/**
+ * Header.LogoWhite
+ */
+export declare const LogoWhite: ({ style }: {
+    style: any;
+}) => JSX.Element;

package/dist/slots/Header/LogoWhite.js

@@ -0,0 +1,19 @@
+import React from 'react';
+/**
+ * Header.LogoWhite
+ */
+
+export var LogoWhite = function LogoWhite(_ref) {
+  var style = _ref.style;
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 94 28",
+    style: style,
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "94",
+    height: "28"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M651.186899 0c30.027294 0 57.825882 20.510118 62.674823 50.115765a60.295529 60.295529 0 0 1-55.055058 70.204235L654.439605 120.470588H181.050428c-9.035294 0-14.968471 8.975059-12.107294 17.016471l1.024 2.16847 389.451294 674.544942c4.487529 7.770353 15.058824 8.463059 20.630588 2.108235l1.505883-2.108235 232.538353-402.733177c15.751529-27.256471 49.754353-40.809412 78.516706-27.858823a60.235294 60.235294 0 0 1 29.665882 81.106823l-2.108235 4.035765-290.725647 503.567059a68.306824 68.306824 0 0 1-58.910118 34.032941c-22.588235 0-43.670588-11.294118-56.229647-29.756235l-2.740706-4.397177L9.078664 102.038588a68.216471 68.216471 0 0 1 0-68.005647A68.246588 68.246588 0 0 1 62.898899 0.210824L68.018899 0H651.186899z m1542.806588 369.302588c97.942588 0 158.900706 57.584941 162.002824 152.877177l0.12047 7.408941v277.202823c-5.421176 21.504-24.094118 36.502588-45.447529 36.502589-19.907765 0-37.496471-13.040941-44.152471-32.286118l-1.264941-4.216471v-260.999529c0-65.716706-36.080941-102.339765-102.580706-102.339765s-111.013647 42.616471-113.754353 107.218824l-0.12047 6.324706v249.795764c-5.481412 21.473882-24.094118 36.382118-45.417412 36.382118-19.877647 0-37.436235-13.010824-44.122353-32.165647l-1.264941-4.216471V374.091294h86.497882v72.944941h1.656471c27.648-50.989176 77.462588-77.703529 147.847529-77.703529zM1593.929487 196.065882c20.781176 0 39.574588 12.348235 48.730353 31.472942l1.807059 4.21647 218.202353 574.945882c-8.071529 21.202824-27.708235 35.087059-49.603765 35.087059a53.187765 53.187765 0 0 1-47.826823-30.930823l-1.746824-4.156236-55.416471-155.346823h-229.918117l-55.416471 155.346823-1.927529 4.306824c-9.035294 18.070588-27.015529 29.605647-46.832941 29.605647a52.585412 52.585412 0 0 1-46.832942-29.605647L1325.21984 806.671059l218.172235-574.945883 1.807059-4.21647a54.241882 54.241882 0 0 1 48.730353-31.472941z m968.432941 83.365647c17.468235 0 33.551059 9.306353 42.857412 24.425412l2.198588 3.915294h0.301177v97.28h87.250823c10.782118 7.800471 17.257412 20.510118 17.257412 34.123294 0 12.047059-5.12 23.491765-13.854118 31.201883l-3.403294 2.740706h-86.949647v241.995294c0 37.647059 17.347765 54.994824 55.416471 54.994823 8.252235 0 20.841412-0.873412 27.979294-1.596235l3.041882-0.391529c10.631529 7.920941 16.956235 20.600471 16.956236 34.123294a42.164706 42.164706 0 0 1-13.552942 31.171764l-3.403294 2.740706-10.149647 1.686589c-13.552941 1.957647-27.226353 2.861176-40.96 2.710588-88.335059 0-124.024471-31.232-125.952-109.869177l-0.090353-6.836706v-250.608941h-62.765176a41.562353 41.562353 0 0 1-17.016471-33.792c0-11.986824 5.029647-23.311059 13.613177-31.021176l3.403294-2.770824v-0.602353h62.765176v-97.28l2.198588-3.915294a50.447059 50.447059 0 0 1 42.857412-24.395294zM2830.289016 180.705882c20.871529 0 39.815529 12.318118 49.091765 31.503059l1.807059 4.216471h-0.301176l164.562823 474.563764h2.499765l165.285647-474.563764 1.776941-4.186353a53.428706 53.428706 0 0 1 48.097882-31.232c20.570353 0 39.152941 12.227765 48.097883 31.232l1.776941 4.21647-215.401412 574.945883c-5.752471 24.696471-26.985412 42.104471-51.410823 42.10447-22.889412 0-42.977882-15.299765-50.176-37.586823l-1.234824-4.517647-215.401412-574.945883 1.837177-4.246588A54.784 54.784 0 0 1 2830.289016 180.705882zM1594.170428 327.499294h-2.499764l-90.051765 252.084706 182.603294 0.120471-90.051765-252.205177zM689.737487 274.642824c24.576 0 40.357647 25.419294 30.539294 47.134117l-1.596235 3.072-108.93553 188.717177a33.490824 33.490824 0 0 1-55.777882 3.343058l-2.198588-3.312941-108.93553-188.747294a33.490824 33.490824 0 0 1 25.539765-50.025412l3.433412-0.180705h217.931294zM1072.954428 0c24.274824 0 46.802824 13.040941 58.940236 34.032941 11.143529 19.335529 11.986824 43.068235 2.529882 63.096471l-2.590118 4.909176-119.205647 206.516706a60.144941 60.144941 0 0 1-89.569882 17.106824c-22.618353-17.769412-27.708235-49.904941-15.450353-75.685647l2.499765-4.758589 60.928-105.562353a12.8 12.8 0 0 0-8.673883-18.974117L959.953016 120.470588h-105.953882c-29.997176 0-57.825882-20.510118-62.644706-50.115764a60.325647 60.325647 0 0 1 55.115294-70.174118L850.776546 0h222.147765z",
+    fill: "#ffffff"
+  }));
+};

package/dist/slots/Header/Navs.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare type INav = {
+    slug: string;
+    order: number;
+    title: {
+        [key: string]: string;
+    };
+    target?: '_blank';
+};
+export declare type NavProps = {
+    navs: INav[];
+    path: string;
+};
+/**
+ * Header 中的导航菜单
+ */
+export declare const Navs: React.FC<NavProps>;

package/dist/slots/Header/Navs.js

@@ -0,0 +1,46 @@
+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 cx from 'classnames';
+import { isEqual } from 'lodash-es';
+import { LinkOutlined } from '@ant-design/icons';
+import { Link, useLocale } from 'dumi';
+import styles from "./index.module.less";
+
+var getDocument = function getDocument(navs) {
+  var slug = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  return navs.find(function (doc) {
+    return doc.slug === slug;
+  }) || {
+    title: {}
+  };
+};
+/**
+ * Header 中的导航菜单
+ */
+
+
+export var Navs = function Navs(_ref) {
+  var navs = _ref.navs,
+      path = _ref.path;
+  var locale = useLocale();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, navs.map(function (nav) {
+    var href = nav.slug.startsWith('http') ? nav.slug : "/".concat(nav.slug);
+    var title = getDocument(navs, nav.slug).title[locale.id];
+
+    if (window.location.pathname.includes('en')) {
+      href = "/en".concat(href);
+    }
+
+    var className = cx('header-menu-item-active', _defineProperty({}, styles.activeItem, path.startsWith(href) || isEqual(path.split('/').slice(0, 4), href.split('/').slice(0, 4))));
+    return /*#__PURE__*/React.createElement("li", {
+      key: title,
+      className: className
+    }, nav.target === '_blank' || href.startsWith('http') ? /*#__PURE__*/React.createElement("a", {
+      href: href,
+      target: "_blank"
+    }, title, /*#__PURE__*/React.createElement(LinkOutlined, null)) : /*#__PURE__*/React.createElement(Link, {
+      to: href
+    }, title));
+  }));
+};

package/dist/slots/Header/Products/NavigatorBanner.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface NavigatorBannerProps {
+    post?: {
+        slug?: string;
+        title?: string;
+    };
+    type: 'prev' | 'next';
+}
+declare const NavigatorBanner: React.FC<NavigatorBannerProps>;
+export default NavigatorBanner;

package/dist/slots/Header/Products/NavigatorBanner.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Link } from 'dumi';
+import styles from "./NavigatorBanner.module.less";
+import { useT } from "../../hooks";
+
+var NavigatorBanner = function NavigatorBanner(_ref) {
+  var post = _ref.post,
+      type = _ref.type;
+
+  if (!post) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames(styles.button, styles.hidden)
+    });
+  }
+
+  var slug = post.slug,
+      title = post.title;
+
+  if (!slug || !title) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(Link, {
+    to: slug,
+    className: classNames(styles.button, styles[type])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.label
+  }, useT(type === 'prev' ? '上一篇' : '下一篇')), /*#__PURE__*/React.createElement("div", {
+    className: styles.title
+  }, title));
+};
+
+export default NavigatorBanner;

package/dist/slots/Header/Products/NavigatorBanner.module.less

@@ -0,0 +1,39 @@
+.button {
+  width: 50%;
+  display: inline-block;
+  margin-top: 32px;
+  padding: 32px 0 0;
+  cursor: pointer;
+  border-top: 1px solid #e8e8e8;
+  line-height: 1.5;
+  vertical-align: top;
+
+  &.hidden {
+    height: 86px;
+    cursor: auto;
+  }
+
+  .label {
+    margin-bottom: 8px;
+    font-size: 14px;
+    color: #bfbfbf;
+  }
+
+  .title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+    transition: all 0.3s;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &:hover .title {
+    color: #000;
+  }
+
+  &.next {
+    text-align: right;
+  }
+}