@antv/dumi-theme-antv 0.3.0-beta.11 → 0.3.0-beta.13

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

@@ -9,7 +9,7 @@ export declare type PlaygroundProps = {
      */
     rid?: string;
     /**
-     * 预览区、代码区的宽度占比，默认为 0.62
+     * 预览区、代码区的宽度占比，默认为 0.38
      */
     ratio?: number;
     /**

package/dist/builtins/Playground/index.js

@@ -43,6 +43,7 @@ var Playground = function Playground(_ref) {
 
   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: {
@@ -54,7 +55,7 @@ var Playground = function Playground(_ref) {
     topic: topic,
     example: example,
     demo: demo,
-    size: ratio || defaultSize,
+    size: size,
     replaceId: rid
   }));
 };

package/dist/slots/Cases/index.js

@@ -84,7 +84,7 @@ export var Cases = function Cases(_ref) {
       }, /*#__PURE__*/React.createElement("div", {
         className: styles.appContent
       }, /*#__PURE__*/React.createElement("img", {
-        className: styles.appLogo,
+        className: cx(styles.appLogo, 'index-case-logo'),
         src: app.logo,
         alt: "logo",
         style: {

package/dist/slots/CodeEditor/index.js

@@ -118,6 +118,7 @@ export var CodeEditor = function CodeEditor(_ref) {
     };
   }, []);
   var executeCode = useCallback(debounce(function (v) {
+    if (currentEditorTab !== EDITOR_TABS.JAVASCRIPT) return;
     if (!v) return; // 1. 先编译代码
 
     var compiled;
@@ -132,15 +133,17 @@ export var CodeEditor = function CodeEditor(_ref) {
 
 
     execute(compiled, containerId, playground === null || playground === void 0 ? void 0 : playground.container, replaceId);
-  }, 300), []);
+  }, 300), [exampleId, currentEditorTab]); // 案例变化的时候，修改期待吗
+
   useEffect(function () {
     setCode(source);
-  }, [source]);
+  }, [exampleId]); // 代码变化的时候，运行代码
+
   useEffect(function () {
     executeCode(code);
   }, [code]);
   useEffect(function () {
-    var dom = document.getElementById('containerId');
+    var dom = document.getElementById(containerId);
 
     if (dom) {
       bind(dom, debounce(function () {
@@ -148,6 +151,12 @@ export var CodeEditor = function CodeEditor(_ref) {
       }, 100));
     }
 
+    return function () {
+      dom && clear(dom);
+    };
+  }, []); // 生命周期
+
+  useEffect(function () {
     onReady();
 
     if (playground !== null && playground !== void 0 && playground.playgroundDidMount) {
@@ -155,7 +164,6 @@ export var CodeEditor = function CodeEditor(_ref) {
     }
 
     return function () {
-      dom && clear(dom);
       onDestroy();
 
       if (playground !== null && playground !== void 0 && playground.playgroundWillUnmount) {
@@ -174,18 +182,25 @@ export var CodeEditor = function CodeEditor(_ref) {
         setEditorTabs([EDITOR_TABS.JAVASCRIPT, EDITOR_TABS.DATA]);
         setData(data);
       });
+    } else {
+      setEditorTabs([EDITOR_TABS.JAVASCRIPT]);
     }
-  }, []);
-  useEffect(function () {
-    if (monacoRef.current) {
-      monacoRef.current.setValue(currentEditorTab === EDITOR_TABS.JAVASCRIPT ? code : JSON.stringify(data, null, 2));
-    }
-  }, [currentEditorTab]);
-  var onCodeChange = useCallback(function (value) {
-    if (currentEditorTab === EDITOR_TABS.JAVASCRIPT) {
+  }, [exampleId]); // 切换 tab
+
+  var onTabChange = useCallback(function (tab) {
+    setCurrentEditorTab(tab);
+  }, [exampleId]); // useEffect(() => {
+  //   if (monacoRef.current) {
+  //     const v = currentEditorTab === EDITOR_TABS.JAVASCRIPT ? code : JSON.stringify(data, null, 2);
+  //     monacoRef.current.setValue(v);
+  //   }
+  // }, [currentEditorTab]);
+
+  var onCodeChange = useCallback(function (value, event) {
+    if (!event.isFlush && currentEditorTab === EDITOR_TABS.JAVASCRIPT) {
       setCode(value);
     }
-  }, []);
+  }, [currentEditorTab]);
   return /*#__PURE__*/React.createElement("div", {
     className: styles.editor
   }, /*#__PURE__*/React.createElement(Toolbar, {
@@ -200,7 +215,7 @@ export var CodeEditor = function CodeEditor(_ref) {
     onExecuteCode: function onExecuteCode() {
       return executeCode(code);
     },
-    onEditorTabChange: setCurrentEditorTab,
+    onEditorTabChange: onTabChange,
     onToggleFullscreen: onFullscreen
   }), /*#__PURE__*/React.createElement("div", {
     className: styles.monaco,
@@ -209,7 +224,8 @@ export var CodeEditor = function CodeEditor(_ref) {
     }
   }, /*#__PURE__*/React.createElement(MonacoEditor, {
     language: currentEditorTab === EDITOR_TABS.JAVASCRIPT ? 'javascript' : 'json',
-    value: code,
+    value: currentEditorTab === EDITOR_TABS.JAVASCRIPT ? code : JSON.stringify(data, null, 2) // defaultValue={code}
+    ,
     path: relativePath,
     loading: /*#__PURE__*/React.createElement(Loading, null),
     options: {

package/dist/slots/CodePreview/index.js

@@ -3,11 +3,16 @@ import { Result } from 'antd';
 import { useT } from "../hooks";
 import styles from "./index.module.less";
 
+function getErrorMessage(e) {
+  return (e.reason ? e.reason : e.message ? e.message : e).toString();
+}
 /**
  * DEMO 预览页面的预览，主要包含有：
  * 1. 一些 header 菜单
  * 2. 错误预览
  */
+
+
 export var CodePreview = function CodePreview(_ref) {
   var isPlayground = _ref.isPlayground,
       exampleId = _ref.exampleId,
@@ -26,6 +31,6 @@ export var CodePreview = function CodePreview(_ref) {
     className: styles.result,
     status: "error",
     title: useT('演示代码报错，请检查'),
-    subTitle: /*#__PURE__*/React.createElement("pre", null, error && error.toString())
+    subTitle: /*#__PURE__*/React.createElement("pre", null, getErrorMessage(error))
   }) : null));
 };

package/dist/slots/CodeRunner/index.js

@@ -62,22 +62,18 @@ export var CodeRunner = function CodeRunner(_ref) {
     relativePath: relativePath,
     githubUrl: githubUrl
   });
-
-  function getExampleId() {
-    return "".concat(topic, "_").concat(example, "_").concat(demo);
-  }
-
+  var exampleId = "".concat(topic, "_").concat(example, "_").concat(demo);
   return /*#__PURE__*/React.createElement(SplitPane, {
     split: "vertical",
     defaultSize: "".concat((1 - size) * 100, "%"),
     minSize: 100
   }, /*#__PURE__*/React.createElement(CodePreview, {
-    exampleId: getExampleId(),
+    exampleId: exampleId,
     error: error,
     header: header,
     isPlayground: isPlayground
   }), /*#__PURE__*/React.createElement(CodeEditor, {
-    exampleId: getExampleId(),
+    exampleId: exampleId,
     source: source,
     relativePath: relativePath,
     replaceId: replaceId,

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

@@ -16,6 +16,13 @@ export declare type HeaderProps = {
     showGithubStar?: boolean;
     /** 是否显示切换语言选项 */
     showLanguageSwitcher?: boolean;
+    /**
+     * 国内镜像相关的信息
+     */
+    internalSite?: {
+        url: string;
+        name: object;
+    };
     /** 切换语言的回调 */
     onLanguageChange?: (language: string) => void;
     /** 是否二维码 */
@@ -40,8 +47,6 @@ export declare type HeaderProps = {
     isAntVSite?: boolean;
     /** AntV root 域名，直接用主题的可不传 */
     rootDomain?: string;
-    /** 是否展示国内镜像链接 */
-    showChinaMirror?: boolean;
     /** 是否显示 AntV 产品卡片 */
     showAntVProductsCard?: boolean;
     /** 展示版本切换 */

package/dist/slots/Header/index.js

@@ -23,20 +23,25 @@ import { useNavigate } from "react-router-dom";
 import cx from 'classnames';
 import { useSiteData, useLocale } from 'dumi';
 import { GithubOutlined, MenuOutlined, CaretDownFilled, DownOutlined, WechatOutlined, LinkOutlined, CheckOutlined } from '@ant-design/icons';
-import { Popover, Menu, Dropdown, Select } from 'antd';
-import { map, size } from 'lodash-es';
+import { Modal, Button, Popover, Menu, Dropdown, Select } from 'antd';
+import { get, map, size } from 'lodash-es';
 import { Search } from "./Search";
 import { Products } from "./Products";
 import { Navs } from "./Navs";
 import { Logo } from "./Logo";
 import { LogoWhite } from "./LogoWhite";
 import { getLangUrl } from "./utils";
-import { useT } from "../hooks";
+import { ic, useT } from "../hooks";
 import styles from "./index.module.less";
 
+function redirectChinaMirror(chinaMirrorOrigin) {
+  window.location.href = window.location.href.replace(window.location.origin, chinaMirrorOrigin);
+}
 /**
  * 头部菜单
  */
+
+
 var HeaderComponent = function HeaderComponent(_ref) {
   var _cx, _cx4;
 
@@ -57,8 +62,6 @@ var HeaderComponent = function HeaderComponent(_ref) {
       showAntVProductsCard = _ref$showAntVProducts === void 0 ? true : _ref$showAntVProducts,
       _ref$showLanguageSwit = _ref.showLanguageSwitcher,
       showLanguageSwitcher = _ref$showLanguageSwit === void 0 ? true : _ref$showLanguageSwit,
-      _ref$showChinaMirror = _ref.showChinaMirror,
-      showChinaMirror = _ref$showChinaMirror === void 0 ? true : _ref$showChinaMirror,
       logo = _ref.logo,
       onLanguageChange = _ref.onLanguageChange,
       _ref$showWxQrcode = _ref.showWxQrcode,
@@ -76,22 +79,41 @@ var HeaderComponent = function HeaderComponent(_ref) {
       _ref$rootDomain = _ref.rootDomain,
       rootDomain = _ref$rootDomain === void 0 ? '' : _ref$rootDomain,
       versions = _ref.versions,
+      internalSite = _ref.internalSite,
       ecosystems = _ref.ecosystems,
       searchOptions = _ref.searchOptions;
   var isAntVHome = isAntVSite && isHomePage; // 是否为AntV官网首页
 
-  var locale = useLocale();
-  var nav = useNavigate();
+  var showChinaMirror = !!internalSite;
+  var chinaMirrorUrl = get(internalSite, 'url');
 
-  var _useState = useState(locale.id),
+  var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      lang = _useState2[0],
-      setLang = _useState2[1];
+      chinaMirrorHintVisible = _useState2[0],
+      updateChinaMirrorHintVisible = _useState2[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 _useState3 = useState(false),
+  var _useState3 = useState(locale.id),
       _useState4 = _slicedToArray(_useState3, 2),
-      productMenuVisible = _useState4[0],
-      setProductMenuVisible = _useState4[1];
+      lang = _useState4[0],
+      setLang = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      productMenuVisible = _useState6[0],
+      setProductMenuVisible = _useState6[1];
 
   var productMenuHovering = false;
 
@@ -121,10 +143,10 @@ var HeaderComponent = function HeaderComponent(_ref) {
     setProductMenuVisible(!productMenuVisible);
   };
 
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      popupMenuVisible = _useState6[0],
-      setPopupMenuVisible = _useState6[1];
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      popupMenuVisible = _useState8[0],
+      setPopupMenuVisible = _useState8[1];
 
   var onTogglePopupMenuVisible = function onTogglePopupMenuVisible() {
     setPopupMenuVisible(!popupMenuVisible);
@@ -195,7 +217,79 @@ var HeaderComponent = function HeaderComponent(_ref) {
     style: {
       marginLeft: '6px'
     }
-  })))) : null,
+  })))) : 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, null)))) : 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, null)), /*#__PURE__*/React.createElement("span", null, " \u7AD9\u70B9\u3002"))),
   /** 产品列表 */
   showAntVProductsCard && /*#__PURE__*/React.createElement("li", productItemProps, /*#__PURE__*/React.createElement("a", null, useT('所有产品'), !isAntVHome ? /*#__PURE__*/React.createElement("img", {
     src: "https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png",
@@ -343,6 +437,7 @@ export var Header = function Header(props) {
       githubUrl = themeConfig.githubUrl,
       isAntVSite = themeConfig.isAntVSite,
       subTitleHref = themeConfig.subTitleHref,
+      internalSite = themeConfig.internalSite,
       showSearch = themeConfig.showSearch,
       showGithubCorner = themeConfig.showGithubCorner,
       showGithubStars = themeConfig.showGithubStars,
@@ -363,6 +458,7 @@ export var Header = function Header(props) {
     githubUrl: githubUrl,
     isAntVSite: isAntVSite,
     siteUrl: siteUrl,
+    internalSite: internalSite,
     showSearch: showSearch,
     showGithubCorner: showGithubCorner,
     showGithubStars: showGithubStars,

package/dist/slots/ManualContent/index.js

@@ -26,6 +26,7 @@ import { useLocale, useSiteData, useFullSidebarData, useRouteMeta } from 'dumi';
 import { useNavigate } from "react-router-dom";
 import { EditOutlined, MenuFoldOutlined, MenuUnfoldOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
 import readingTime from 'reading-time';
+import URI from 'uri-parse';
 import { SEO } from "../SEO";
 import { getBaseRoute, getIndexRoute, getOpenKeys, getNavigateUrl } from "./utils";
 import { NavigatorBanner } from "./NavigatorBanner";
@@ -202,10 +203,12 @@ export var ManualContent = function ManualContent(_ref) {
     sidebarRoutes.push(route);
   }
 
-  var url = getNavigateUrl(window.location.pathname, indexRoute, sidebarRoutes);
+  var uri = new URI(location.href);
+  uri.path = getNavigateUrl("/".concat(uri.path), indexRoute, sidebarRoutes);
 
-  if (url !== window.location.pathname) {
-    navigate(url);
+  if ("".concat(uri.path) !== window.location.pathname) {
+    uri.path = uri.path.slice(1);
+    navigate(uri.toURI().replace(location.origin, ''));
   } // 改变菜单栏选中和 openKeys 状态
 
 

package/dist/slots/ManualContent/utils.js

@@ -54,8 +54,8 @@ export function getNavigateUrl(pathname, first, siderbarMenu) {
     return pathname.replace('/docs/', '/').replace('/zh/', '/');
   }
 
-  if (!siderbarMenu.some(function (item) {
-    return item === pathname;
+  if (siderbarMenu.every(function (item) {
+    return ![item, "".concat(item, "/")].includes(pathname);
   })) {
     return first;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/dumi-theme-antv",
-  "version": "0.3.0-beta.11",
+  "version": "0.3.0-beta.13",
   "description": "AntV website theme based on dumi2.",
   "types": "dist/types.d.ts",
   "scripts": {