UNPKG

@hjkl6/dumi-theme-antv

Version:

[![NPM version](https://img.shields.io/npm/v/@antv/dumi-theme-antv.svg?style=flat)](https://npmjs.org/package/@antv/dumi-theme-antv) [![NPM downloads](http://img.shields.io/npm/dm/@antv/dumi-theme-antv.svg?style=flat)](https://npmjs.org/package/@antv/dumi

494 lines (491 loc) 23.1 kB
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); } function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); } function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } } function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } import { CaretDownFilled, CheckOutlined, DownOutlined, GithubOutlined, LinkOutlined, MenuOutlined, WechatOutlined } from '@ant-design/icons'; import { Alert, Button, Dropdown, Menu, Modal, Popover, Select } from 'antd'; import cx from 'classnames'; import { FormattedMessage, useLocale, useSiteData } from 'dumi'; import { get, map, size } from 'lodash-es'; import React, { useEffect, useMemo, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { useMedia } from 'react-use'; import { ic } from "../hooks"; import { Navs } from "./Navs"; import { Products } from "./Products"; import { Search } from "./Search"; import { findVersion, getLangUrl } from "./utils"; import { Assistant } from '@petercatai/assistant'; import '@petercatai/assistant/style'; import styles from "./index.module.less"; function redirectChinaMirror(chinaMirrorOrigin) { window.location.href = window.location.href.replace(window.location.origin, chinaMirrorOrigin); } var ANNOUNCEMENT_LOCALSTORAGE_ID = 'ANNOUNCEMENT_LOCALSTORAGE_ID'; /** * 头部菜单 */ var HeaderComponent = function HeaderComponent(_ref) { var _ref$subTitle = _ref.subTitle, subTitle = _ref$subTitle === void 0 ? '' : _ref$subTitle, _ref$navs = _ref.navs, navs = _ref$navs === void 0 ? [] : _ref$navs, _ref$showSearch = _ref.showSearch, showSearch = _ref$showSearch === void 0 ? true : _ref$showSearch, _ref$showGithubCorner = _ref.showGithubCorner, showGithubCorner = _ref$showGithubCorner === void 0 ? true : _ref$showGithubCorner, _ref$showAntVProducts = _ref.showAntVProductsCard, showAntVProductsCard = _ref$showAntVProducts === void 0 ? true : _ref$showAntVProducts, _ref$showLanguageSwit = _ref.showLanguageSwitcher, showLanguageSwitcher = _ref$showLanguageSwit === void 0 ? true : _ref$showLanguageSwit, logo = _ref.logo, onLanguageChange = _ref.onLanguageChange, _ref$showWxQrcode = _ref.showWxQrcode, showWxQrcode = _ref$showWxQrcode === void 0 ? true : _ref$showWxQrcode, siteUrl = _ref.siteUrl, _ref$githubUrl = _ref.githubUrl, githubUrl = _ref$githubUrl === void 0 ? '' : _ref$githubUrl, defaultLanguage = _ref.defaultLanguage, transparent = _ref.transparent, isHomePage = _ref.isHomePage, _ref$isAntVSite = _ref.isAntVSite, isAntVSite = _ref$isAntVSite === void 0 ? false : _ref$isAntVSite, _ref$rootDomain = _ref.rootDomain, rootDomain = _ref$rootDomain === void 0 ? '' : _ref$rootDomain, version = _ref.version, versions = _ref.versions, internalSite = _ref.internalSite, ecosystems = _ref.ecosystems, announcement = _ref.announcement; var isAntVHome = isAntVSite && isHomePage; // 是否为AntV官网首页 var _useState = useState(false), _useState2 = _slicedToArray(_useState, 2), bannerVisible = _useState2[0], setBannerVisible = _useState2[1]; var showChinaMirror = !!internalSite; var chinaMirrorUrl = get(internalSite, 'url'); var _useState3 = useState(false), _useState4 = _slicedToArray(_useState3, 2), chinaMirrorHintVisible = _useState4[0], updateChinaMirrorHintVisible = _useState4[1]; useEffect(function () { var timeout = setTimeout(function () { if (showChinaMirror && lang === 'zh' && !localStorage.getItem('china-mirror-no-more-hint') && window.location.host.includes('antv.vision')) { updateChinaMirrorHintVisible(true); } }, 5000); return function () { clearTimeout(timeout); }; }); var locale = useLocale(); var nav = useNavigate(); var _useState5 = useState(locale.id), _useState6 = _slicedToArray(_useState5, 2), lang = _useState6[0], setLang = _useState6[1]; var announcementTitle = useMemo(function () { return get(announcement, ['title', lang]); }, [announcement, lang]); var announcementLinkTitle = useMemo(function () { return get(announcement, ['link', 'text', lang]); }, [announcement, lang]); useEffect(function () { setBannerVisible(!!announcementTitle && localStorage.getItem(ANNOUNCEMENT_LOCALSTORAGE_ID) !== 'true'); }, [announcementTitle]); function onBannerClose() { localStorage.setItem(ANNOUNCEMENT_LOCALSTORAGE_ID, 'true'); setBannerVisible(false); } var _useState7 = useState(false), _useState8 = _slicedToArray(_useState7, 2), productMenuVisible = _useState8[0], setProductMenuVisible = _useState8[1]; var productMenuHovering = false; var onProductMouseEnter = function onProductMouseEnter(e) { productMenuHovering = true; e.persist(); setTimeout(function () { if (e.target instanceof Element && e.target.matches(':hover')) { setProductMenuVisible(true); } }, 200); }; var onProductMouseLeave = function onProductMouseLeave(e) { e.persist(); productMenuHovering = false; setTimeout(function () { if (productMenuHovering) { return; } setProductMenuVisible(false); }, 200); }; var onToggleProductMenuVisible = function onToggleProductMenuVisible() { setProductMenuVisible(!productMenuVisible); }; var _useState9 = useState(false), _useState10 = _slicedToArray(_useState9, 2), popupMenuVisible = _useState10[0], setPopupMenuVisible = _useState10[1]; var onTogglePopupMenuVisible = function onTogglePopupMenuVisible() { setPopupMenuVisible(!popupMenuVisible); }; var _img$link$logo = _objectSpread({ img: /*#__PURE__*/React.createElement("img", { src: "http://10.168.150.72:50087/web/ragis/logo.png", alt: "logo" }), link: '' }, logo), img = _img$link$logo.img, link = _img$link$logo.link; useEffect(function () { if (popupMenuVisible) { setPopupMenuVisible(false); } }, [window.location.pathname]); // 移动端下弹出菜单时,禁止页面滚动 useEffect(function () { if (popupMenuVisible) { document.documentElement.style.overflow = 'hidden'; } else { document.documentElement.style.overflow = ''; } return function () { document.documentElement.style.overflow = ''; }; }, [popupMenuVisible]); var isWide = useMedia('(min-width: 767.99px)', true); var menuIcon = !isWide ? /*#__PURE__*/React.createElement(MenuOutlined, { className: styles.menuIcon, onClick: onTogglePopupMenuVisible }) : null; var productItemProps = isWide ? { onMouseEnter: onProductMouseEnter, onMouseLeave: onProductMouseLeave, onClick: onToggleProductMenuVisible } : { onClick: onToggleProductMenuVisible }; var menu = /*#__PURE__*/React.createElement("ul", { className: cx(styles.menu, _defineProperty(_defineProperty({}, styles.popup, !isWide), styles.popupHidden, !popupMenuVisible)) }, /** 最左侧的菜单,一般是 教程、API、示例,或者其他自定义,有配置文件中的 `navs` 决定 */ size(navs) ? /*#__PURE__*/React.createElement(Navs, { navs: navs, path: window.location.pathname }) : null, /** 生态产品 */ size(ecosystems) ? /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Dropdown, { className: styles.ecoSystems, overlay: /*#__PURE__*/React.createElement(Menu, null, map(ecosystems, function (_ref2) { var url = _ref2.url, ecosystemName = _ref2.name; return /*#__PURE__*/React.createElement(Menu.Item, { key: ecosystemName === null || ecosystemName === void 0 ? void 0 : ecosystemName[lang] }, /*#__PURE__*/React.createElement("a", { target: "_blank", rel: "noreferrer", href: url }, ecosystemName === null || ecosystemName === void 0 ? void 0 : ecosystemName[lang], " ", /*#__PURE__*/React.createElement(LinkOutlined, null))); })) }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, { id: "\u5468\u8FB9\u751F\u6001" }), /*#__PURE__*/React.createElement(DownOutlined, { style: { marginLeft: '6px' } })))) : null, showChinaMirror && isWide ? /*#__PURE__*/React.createElement(Popover, { title: null, content: /*#__PURE__*/React.createElement("div", { style: { width: 300 } }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", { role: "img", "aria-labelledby": "\u4E2D\u56FD", style: { marginRight: '8px' } }, "\uD83C\uDDE8\uD83C\uDDF3"), "AntV \u7CFB\u5217\u7F51\u7AD9\u90E8\u7F72\u5728 gh-pages \u4E0A\uFF0C\u82E5\u8BBF\u95EE\u901F\u5EA6\u4E0D\u4F73\uFF0C\u53EF\u4EE5\u524D\u5F80\u56FD\u5185\u955C\u50CF\u7AD9\u70B9\u3002"), /*#__PURE__*/React.createElement("div", { style: { marginTop: 16, textAlign: 'right' } }, /*#__PURE__*/React.createElement(Button, { onClick: function onClick() { return updateChinaMirrorHintVisible(false); }, size: "small", style: { marginRight: 8 } }, "\u6682\u65F6\u5173\u95ED"), /*#__PURE__*/React.createElement(Button, { type: "primary", size: "small", onClick: function onClick() { localStorage.setItem('china-mirror-no-more-hint', Date.now().toString()); updateChinaMirrorHintVisible(false); } }, "\u4E0D\u518D\u63D0\u9192"))), visible: chinaMirrorHintVisible, placement: "bottomRight", align: { offset: [-12, -16] } }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("a", { href: chinaMirrorUrl, onClick: function onClick(e) { e.preventDefault(); redirectChinaMirror(chinaMirrorUrl); } }, ic(get(internalSite, 'name')), !isAntVHome && /*#__PURE__*/React.createElement(LinkOutlined, { style: { marginLeft: '6px' } })))) : null, showChinaMirror && !isWide && /*#__PURE__*/React.createElement(Modal, { visible: chinaMirrorHintVisible, cancelText: "\u4E0D\u518D\u63D0\u9192", okText: "\u7ACB\u5373\u524D\u5F80", onCancel: function onCancel() { updateChinaMirrorHintVisible(false); }, onOk: function onOk() { return redirectChinaMirror(chinaMirrorUrl); }, cancelButtonProps: { onClick: function onClick() { localStorage.setItem('china-mirror-no-more-hint', Date.now().toString()); updateChinaMirrorHintVisible(false); } } }, /*#__PURE__*/React.createElement("div", { className: styles.modalContent }, /*#__PURE__*/React.createElement("span", { role: "img", "aria-labelledby": "\u4E2D\u56FD" }, "\uD83C\uDDE8\uD83C\uDDF3"), "AntV \u7CFB\u5217\u7F51\u7AD9\u90E8\u7F72\u5728 gh-pages \u4E0A\uFF0C\u82E5\u8BBF\u95EE\u901F\u5EA6\u4E0D\u4F73\uFF0C\u53EF\u4EE5\u524D\u5F80", /*#__PURE__*/React.createElement("a", { href: chinaMirrorUrl, onClick: function onClick(e) { e.preventDefault(); window.location.href = chinaMirrorUrl; }, className: styles.remindHref }, ic(get(internalSite, 'name')), /*#__PURE__*/React.createElement(LinkOutlined, { style: { marginLeft: '6px' } })), /*#__PURE__*/React.createElement("span", null, " \u7AD9\u70B9\u3002"))), /** 产品列表 */ showAntVProductsCard && /*#__PURE__*/React.createElement("li", productItemProps, /*#__PURE__*/React.createElement("a", null, /*#__PURE__*/React.createElement(FormattedMessage, { id: "\u6240\u6709\u4EA7\u54C1" }), !isAntVHome ? /*#__PURE__*/React.createElement("img", { src: "https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png", alt: "antv logo arrow", className: cx(styles.arrow, _defineProperty({}, styles.open, productMenuVisible)), style: { marginLeft: '6px' } }) : /*#__PURE__*/React.createElement(CaretDownFilled, { style: { top: '1px', color: '#fff' }, className: cx(styles.arrow, _defineProperty({}, styles.open, productMenuVisible)) })), /*#__PURE__*/React.createElement(Products, { className: styles.productsMenu, bannerVisible: bannerVisible, show: productMenuVisible, rootDomain: rootDomain, language: defaultLanguage })), /** 版本列表 */ versions && /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Select, { defaultValue: versions[findVersion(version, Object.keys(versions))], className: styles.versions, bordered: false, size: "small", onChange: function onChange(value) { window.location.href = value; } }, Object.keys(versions).map(function (version) { var url = versions[version]; if (url.startsWith('http')) { return /*#__PURE__*/React.createElement(Select.Option, { key: url, value: url }, version); } return null; }))), /** 切换网站语言 */ showLanguageSwitcher && /*#__PURE__*/React.createElement("li", { className: cx(styles.navIcon, styles.languageSwitcher) }, /*#__PURE__*/React.createElement(Dropdown, { placement: "bottomRight", overlay: /*#__PURE__*/React.createElement(Menu, { defaultSelectedKeys: [lang], selectable: true, onSelect: function onSelect(_ref3) { var key = _ref3.key; if (key === lang) { return; } setLang(key); if (onLanguageChange) { onLanguageChange(key.toString()); return; } var newUrl = getLangUrl(window.location.href, key); nav(newUrl.replace(window.location.origin, '')); } }, /*#__PURE__*/React.createElement(Menu.Item, { key: "en" }, /*#__PURE__*/React.createElement(CheckOutlined, { style: { visibility: lang === 'en' ? 'visible' : 'hidden', color: '#52c41a' } }), "English"), /*#__PURE__*/React.createElement(Menu.Item, { key: "zh" }, /*#__PURE__*/React.createElement(CheckOutlined, { style: { visibility: lang === 'zh' ? 'visible' : 'hidden', color: '#52c41a' } }), "\u7B80\u4F53\u4E2D\u6587")), className: styles.translation }, /*#__PURE__*/React.createElement("a", { className: "ant-dropdown-link", onClick: function onClick(e) { return e.preventDefault(); } }, /*#__PURE__*/React.createElement("svg", { className: styles.translation, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, /*#__PURE__*/React.createElement("path", { d: "M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z" }))))), /** 微信公众号 */ showWxQrcode && /*#__PURE__*/React.createElement("li", { className: cx(styles.navIcon, styles.wxQrcode) }, /*#__PURE__*/React.createElement(Popover, { content: /*#__PURE__*/React.createElement("img", { width: "100%", height: "100%", src: "https://gw.alipayobjects.com/zos/antfincdn/ZKlx96dsfs/qrcode_for_gh_f52d8b6aa591_258.jpg", alt: "wx-qrcode" }), title: "\u5FAE\u4FE1\u626B\u4E00\u626B\u5173\u6CE8", overlayClassName: "wx-qrcode-popover", overlayStyle: { width: 128, height: 128 }, overlayInnerStyle: { padding: 2 } }, /*#__PURE__*/React.createElement(WechatOutlined, null))), /** GitHub icon */ showGithubCorner && /*#__PURE__*/React.createElement("li", { className: cx(styles.navIcon, styles.githubCorner) }, /*#__PURE__*/React.createElement("a", { href: githubUrl, target: "_blank", rel: "noreferrer" }, /*#__PURE__*/React.createElement(GithubOutlined, null)))); return /*#__PURE__*/React.createElement("header", { className: cx(styles.header, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.transparent, !!transparent && !productMenuVisible), styles.isHomePage, !!isHomePage && !isAntVHome), styles.lightTheme, !!isAntVHome && !productMenuVisible && isWide), styles.isAntVHome, !!isAntVHome), styles.fixed, popupMenuVisible)) }, bannerVisible && announcementTitle && /*#__PURE__*/React.createElement(Alert, { className: styles.banner, message: /*#__PURE__*/React.createElement("div", { className: styles.topAlert }, announcement.icon && /*#__PURE__*/React.createElement("img", { src: announcement.icon }), /*#__PURE__*/React.createElement("div", null, announcementTitle), announcementLinkTitle && /*#__PURE__*/React.createElement("a", { href: announcement.link.url }, announcementLinkTitle)), type: "info", banner: true, closable: true, showIcon: false, onClose: onBannerClose }), /*#__PURE__*/React.createElement("div", { className: styles.container }, /*#__PURE__*/React.createElement("div", { className: styles.left }, /*#__PURE__*/React.createElement("h1", null, /*#__PURE__*/React.createElement("a", { href: siteUrl[lang] ? siteUrl[lang] : siteUrl }, img)), !isAntVHome && subTitle && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", { className: styles.divider }), /*#__PURE__*/React.createElement("h2", { className: styles.subProduceName }, /*#__PURE__*/React.createElement("a", { href: window.location.pathname.startsWith('/en') ? '/en' : '/' }, subTitle))), showSearch && !isAntVHome && /*#__PURE__*/React.createElement(Search, null)), /*#__PURE__*/React.createElement("nav", { className: styles.nav }, menu, menuIcon))); }; export var Header = function Header(props) { var _useSiteData = useSiteData(), themeConfig = _useSiteData.themeConfig; var title = themeConfig.title, siteUrl = themeConfig.siteUrl, githubUrl = themeConfig.githubUrl, isAntVSite = themeConfig.isAntVSite, subTitleHref = themeConfig.subTitleHref, internalSite = themeConfig.internalSite, showSearch = themeConfig.showSearch, showGithubCorner = themeConfig.showGithubCorner, showGithubStars = themeConfig.showGithubStars, showLanguageSwitcher = themeConfig.showLanguageSwitcher, showWxQrcode = themeConfig.showWxQrcode, defaultLanguage = themeConfig.defaultLanguage, showAntVProductsCard = themeConfig.showAntVProductsCard, version = themeConfig.version, versions = themeConfig.versions, ecosystems = themeConfig.ecosystems, navs = themeConfig.navs, docsearchOptions = themeConfig.docsearchOptions, announcement = themeConfig.announcement, petercat = themeConfig.petercat; var searchOptions = { docsearchOptions: docsearchOptions }; var locale = useLocale(); var path = window.location.pathname; var isHomePage = path === '/' || path === "/".concat(locale.id) || path === "/".concat(locale.id, "/"); var headerProps = { subTitle: title, subTitleHref: subTitleHref, githubUrl: githubUrl, isAntVSite: isAntVSite, siteUrl: siteUrl, internalSite: internalSite, showSearch: showSearch, showGithubCorner: showGithubCorner, showGithubStars: showGithubStars, showLanguageSwitcher: showLanguageSwitcher, showWxQrcode: showWxQrcode, defaultLanguage: defaultLanguage, showAntVProductsCard: showAntVProductsCard, version: version, versions: versions, ecosystems: ecosystems, navs: navs, searchOptions: searchOptions, isHomePage: isHomePage, transparent: isHomePage && isAntVSite, announcement: announcement, petercat: petercat }; return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeaderComponent, Object.assign({}, headerProps, props)), (petercat === null || petercat === void 0 ? void 0 : petercat.show) && /*#__PURE__*/React.createElement(Assistant, { token: petercat === null || petercat === void 0 ? void 0 : petercat.token, apiDomain: "https://api.petercat.ai" })); };