@antv/dumi-theme-antv 0.2.2 → 0.3.0-beta.10

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,188 @@
+var _excluded = ["columns", "bottom", "theme", "language", "isDynamicFooter", "rootDomain", "className"];
+
+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,
+      className = props.className,
+      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, className, _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,86 @@
+@import '~antd/es/style/themes/default.less';
+@import '../_.less';
+
+.footer {
+  width: 100%;
+  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,26 @@
+import React from 'react';
+declare type dropdownItem = {
+    label: {
+        [key: string]: string;
+    };
+    key: string;
+};
+export declare type INav = {
+    slug?: string;
+    order: number;
+    title: {
+        [key: string]: string;
+    };
+    target?: '_blank';
+    notPage?: boolean;
+    dropdownItems?: dropdownItem[];
+};
+export declare type NavProps = {
+    navs: INav[];
+    path: string;
+};
+/**
+ * Header 中的导航菜单
+ */
+export declare const Navs: React.FC<NavProps>;
+export {};

package/dist/slots/Header/Navs.js

@@ -0,0 +1,63 @@
+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 { Link, useLocale } from 'dumi';
+import { Dropdown, Menu } from 'antd';
+import { DownOutlined, LinkOutlined } from '@ant-design/icons';
+import styles from "./index.module.less";
+
+/**
+ * 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 title = nav.title[locale.id];
+    var href = '';
+    var className = '';
+
+    if (nav.slug) {
+      href = nav.slug.startsWith('http') ? nav.slug : "/".concat(nav.slug);
+
+      if (locale.id == 'en' && !href.startsWith('http')) {
+        href = "/en".concat(href);
+      } // 去除 docs  防止二次点击相同nav跳转出现04
+
+
+      href = href.replace('/docs/', '/');
+      className = cx('header-menu-item-active', _defineProperty({}, styles.activeItem, path.startsWith(href) || isEqual(path.split('/').slice(0, 4), href.split('/').slice(0, 4))));
+    }
+
+    return nav.notPage ? /*#__PURE__*/React.createElement("li", {
+      key: title,
+      className: className
+    }, /*#__PURE__*/React.createElement(Dropdown, {
+      className: styles.ecoSystems,
+      placement: "bottom",
+      overlay: /*#__PURE__*/React.createElement(Menu, null, nav.dropdownItems.map(function (_ref2) {
+        var label = _ref2.label,
+            key = _ref2.key;
+        return /*#__PURE__*/React.createElement(Menu.Item, {
+          key: key
+        }, /*#__PURE__*/React.createElement("a", {
+          target: "_blank",
+          rel: "noreferrer",
+          href: key
+        }, label[locale.id], " ", /*#__PURE__*/React.createElement(LinkOutlined, null)));
+      }))
+    }, /*#__PURE__*/React.createElement("span", null, title, /*#__PURE__*/React.createElement(DownOutlined, null)))) : /*#__PURE__*/React.createElement("li", {
+      key: title,
+      className: className
+    }, nav.target === '_blank' || href.startsWith('http') ? /*#__PURE__*/React.createElement("a", {
+      href: href,
+      target: "_blank",
+      rel: "noreferrer"
+    }, 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;
+  }
+}

package/{es/antv → dist/slots/Header}/Products/Product.d.ts

@@ -1,12 +1,12 @@
-import React from "react";
-import { ProductType } from "./getProducts";
+import React from 'react';
+import { ProductType } from './getProducts';
 interface ProductProps {
     name?: string;
     icon?: string;
     slogan?: string;
     description?: string;
     url?: string;
-    links: ProductType["links"];
+    links: ProductType['links'];
     style?: React.CSSProperties;
     language?: string;
 }

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

@@ -1,29 +1,24 @@
-import React from "react";
-import { useTranslation } from "react-i18next"; //@ts-ignore
-
+import React from 'react';
+import { useT } from "../../hooks";
 import styles from "./Product.module.less";
 
 var getTarget = function getTarget(url) {
-  return url.startsWith("http") && !url.includes("gitee.io") && !url.includes("antv.vision") ? "_blank" : "_self";
+  return url.startsWith('http') && !url.includes('gitee.io') && !url.includes('antv.vision') ? '_blank' : '_self';
 };
 
 var Product = function Product(_ref) {
+  var _links$home$title, _links$example$title;
+
   var name = _ref.name,
       icon = _ref.icon,
       _ref$url = _ref.url,
-      url = _ref$url === void 0 ? "" : _ref$url,
+      url = _ref$url === void 0 ? '' : _ref$url,
       slogan = _ref.slogan,
       description = _ref.description,
       _ref$links = _ref.links,
       links = _ref$links === void 0 ? {} : _ref$links,
       style = _ref.style,
       language = _ref.language;
-
-  var _a, _b;
-
-  var _useTranslation = useTranslation(),
-      t = _useTranslation.t;
-
   return /*#__PURE__*/React.createElement("li", {
     className: styles.product,
     style: style
@@ -41,7 +36,7 @@ var Product = function Product(_ref) {
   }, /*#__PURE__*/React.createElement("h4", null, name, /*#__PURE__*/React.createElement("span", {
     className: styles.productSlogan,
     style: {
-      opacity: language === "en" ? 0.7 : ""
+      opacity: language === 'en' ? 0.7 : ''
     }
   }, slogan))), /*#__PURE__*/React.createElement("div", {
     className: styles.productDescription
@@ -49,13 +44,13 @@ var Product = function Product(_ref) {
     className: styles.productLinks
   }, links.home && /*#__PURE__*/React.createElement("a", {
     href: links.home.url,
-    target: getTarget(links.home.url || ""),
+    target: getTarget(links.home.url || ''),
     key: links.home.url
-  }, (_a = links.home.title) !== null && _a !== void 0 ? _a : t("产品首页")), links.example && /*#__PURE__*/React.createElement("a", {
+  }, (_links$home$title = links.home.title) !== null && _links$home$title !== void 0 ? _links$home$title : useT('产品首页')), links.example && /*#__PURE__*/React.createElement("a", {
     href: links.example.url,
-    target: getTarget(links.example.url || ""),
+    target: getTarget(links.example.url || ''),
     key: links.example.url
-  }, (_b = links.example.title) !== null && _b !== void 0 ? _b : t("图表示例")))));
+  }, (_links$example$title = links.example.title) !== null && _links$example$title !== void 0 ? _links$example$title : useT('图表示例')))));
 };
 
 export default Product;

package/{src/antv → dist/slots/Header}/Products/Product.module.less

@@ -1,4 +1,5 @@
-@import '../mixins';
+@import '~antd/es/style/themes/default.less';
+@import '../../_.less';
 
 .products {
   width: 100%;
@@ -7,11 +8,12 @@
   left: 0;
   top: 64px;
   opacity: 0;
+  max-height: calc(100vh - 64px);
   transform: translateY(-12px);
   transition: all 0.3s ease-in;
   background: #fff;
-  padding: 0;
-  overflow: hidden;
+  padding: 8px 0 0;
+  overflow: auto;
   box-shadow: none;
   line-height: 1.5;
   font-weight: normal;
@@ -26,18 +28,18 @@
     opacity: 1;
     box-shadow: 0 2px 8px #f0f1f2 inset;
     pointer-events: auto;
-    max-height: unset !important;
     transform: translateY(0);
+    height: auto !important;
   }
 
-  &.show + .mask {
+  &.show+.mask {
     opacity: 1;
   }
 
   h3 {
     font-size: 14px;
     line-height: 22px;
-    margin: 32px 0 24px 0;
+    margin: 24px 0;
     color: #a3b1bf;
     font-weight: normal;
     padding-bottom: 8px;
@@ -97,7 +99,7 @@
       }
 
       .productLinks {
-        > a {
+        >a {
           margin-right: 12px;
           font-size: 12px;
           line-height: 20px;
@@ -143,4 +145,4 @@
       padding-right: 0;
     }
   }
-}
+}