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

package/dist/plugin/index.js

@@ -25,44 +25,51 @@ __export(plugin_exports, {
   default: () => plugin_default
 });
 module.exports = __toCommonJS(plugin_exports);
+var path = __toESM(require("path"));
 var import_examples = require("./examples");
-function generateMetaJSON() {
-  const res = (0, import_examples.getExamplesPageTopics)();
-  return {
-    exampleTopics: res
-  };
-}
+var import_utils = require("./utils");
 var plugin_default = (api) => {
   api.describe({ key: `dumi-theme:${require("../../package.json").name}` });
+  api.modifyDefaultConfig((memo) => {
+    memo.resolve.codeBlockMode = "passive";
+    memo.exportStatic.extraRoutePaths = (0, import_examples.getExamplePaths)();
+    memo.mfsu = false;
+    return memo;
+  });
   const pages = [
+    {
+      id: "dumi-theme-antv-homepage",
+      absPath: "/"
+    },
     {
       id: "dumi-theme-antv-example-list-zh",
-      path: "/examples/",
-      file: require.resolve("../pages/Examples/index.tsx")
+      absPath: "/examples",
+      file: (0, import_utils.myResolve)("../pages/Examples/index.tsx")
     },
     {
       id: "dumi-theme-antv-example-list-lang",
-      path: "/:language/examples/",
-      file: require.resolve("../pages/Examples/index.tsx")
+      absPath: "/:language/examples",
+      file: (0, import_utils.myResolve)("../pages/Examples/index.tsx")
     },
     {
       id: "dumi-theme-antv-single-example-zh",
-      path: "/examples/:topic/:example",
-      file: require.resolve("../pages/Example/index.tsx")
+      absPath: "/examples/:topic/:example",
+      file: (0, import_utils.myResolve)("../pages/Example/index.tsx")
     },
     {
       id: "dumi-theme-antv-single-example-lang",
-      path: "/:language/examples/:topic/:example",
-      file: require.resolve("../pages/Example/index.tsx")
+      absPath: "/:language/examples/:topic/:example",
+      file: (0, import_utils.myResolve)("../pages/Example/index.tsx")
     }
   ];
-  const contextFilePath = require.resolve("../context.ts");
+  const contextFilePath = (0, import_utils.myResolve)("../context.ts");
   api.onGenerateFiles(() => {
     api.writeTmpFile({
       noPluginDir: true,
       path: "theme-antv/ContextWrapper.tsx",
       content: `
-import { useOutlet } from 'dumi';
+import React from 'react';
+import { useOutlet, useSiteData } from 'dumi';
 import { ThemeAntVContext } from '${contextFilePath}';
 
 export default function ThemeAntVContextWrapper() {
@@ -71,7 +78,9 @@ export default function ThemeAntVContextWrapper() {
   return (
     <ThemeAntVContext.Provider
       value={{
-        meta: ${JSON.stringify(generateMetaJSON())}
+        meta: ${JSON.stringify({
+        exampleTopics: (0, import_examples.getExamplesPageTopics)(api.config.themeConfig.examples || [])
+      })}
       }}
     >
       {outlet}
@@ -89,15 +98,16 @@ export default function ThemeAntVContextWrapper() {
     pages.forEach((page) => {
       routes[page.id] = {
         id: page.id,
-        path: page.path,
-        absPath: page.path,
+        path: page.absPath.slice(1),
+        absPath: page.absPath,
         file: page.file,
         parentId: "DocLayout"
       };
     });
-    routes["404"].file = require.resolve("../pages/404.tsx");
+    routes["404"].file = (0, import_utils.myResolve)("../pages/404.tsx");
     return routes;
   });
+  api.addTmpGenerateWatcherPaths(() => [path.resolve(process.cwd(), "examples")]);
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {});

package/dist/plugin/utils.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 自定义的 resolve 函数，优先找 tsx，如果找不到则找对应的 js 文件。
+ * 因为 dumi-theme-antv 编译之后，全部变成 js 文件
+ */
+export declare function myResolve(p: string, alternateExts?: string[]): string;

package/dist/plugin/utils.js

@@ -0,0 +1,46 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plugin/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  myResolve: () => myResolve
+});
+module.exports = __toCommonJS(utils_exports);
+var path = __toESM(require("path"));
+function myResolve(p, alternateExts = [".js"]) {
+  const extname2 = path.extname(p);
+  const pathname = p.slice(0, p.length - extname2.length);
+  const exts = [extname2, ...alternateExts];
+  for (let i = 0; i < exts.length; i++) {
+    const ext = exts[i];
+    const fullpath = `${pathname}${ext}`;
+    try {
+      return require.resolve(fullpath);
+    } catch (e) {
+    }
+  }
+  return "";
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  myResolve
+});

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
+import { IC } from '../../types';
 interface Case {
     logo?: string;
     isAppLogo?: boolean;

package/dist/slots/CodeEditor/Toolbar.js

@@ -19,7 +19,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 import React, { useEffect, useState } from 'react';
-import { CodeSandboxOutlined, PlayCircleOutlined, ThunderboltOutlined, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
+import { CodeSandboxOutlined, PlayCircleOutlined, ThunderboltOutlined } from '@ant-design/icons';
 import { Typography, Tooltip } from 'antd';
 import { useLocale } from 'dumi';
 import { getParameters } from 'codesandbox/lib/api/define';
@@ -68,8 +68,8 @@ export var Toolbar = function Toolbar(_ref) {
       updateRiddleVisible = _useState2[1];
 
   useEffect(function () {
-    ping(function (status) {
-      updateRiddleVisible(status === 'responded');
+    ping().then(function (status) {
+      return updateRiddleVisible(status === 'responded');
     });
   }, []);
   return /*#__PURE__*/React.createElement("div", {
@@ -129,19 +129,7 @@ export var Toolbar = function Toolbar(_ref) {
     style: {
       marginLeft: 6
     }
-  }), onToggleFullscreen ? /*#__PURE__*/React.createElement(Tooltip, {
-    title: isFullScreen ? useT('离开全屏') : useT('进入全屏')
-  }, isFullScreen ? /*#__PURE__*/React.createElement(FullscreenExitOutlined, {
-    onClick: onToggleFullscreen,
-    style: {
-      marginLeft: 12
-    }
-  }) : /*#__PURE__*/React.createElement(FullscreenOutlined, {
-    onClick: onToggleFullscreen,
-    style: {
-      marginLeft: 12
-    }
-  })) : null, /*#__PURE__*/React.createElement(Tooltip, {
+  }), /*#__PURE__*/React.createElement(Tooltip, {
     title: useT('执行代码')
   }, /*#__PURE__*/React.createElement(PlayCircleOutlined, {
     onClick: onExecuteCode,

package/dist/slots/CodeEditor/index.js

@@ -14,8 +14,10 @@ import React, { useRef, useState, useCallback, useEffect } from 'react';
 import MonacoEditor, { loader } from '@monaco-editor/react';
 import { useSiteData, useLocale } from 'dumi';
 import { debounce, noop } from 'lodash-es';
+import { bind, clear } from 'size-sensor';
 import { replaceInsertCss, execute, compile } from "./utils";
 import { Toolbar, EDITOR_TABS } from "./Toolbar";
+import { Loading } from "../Loading";
 import styles from "./index.module.less";
 loader.config({
   'vs/nls': {
@@ -85,29 +87,43 @@ export var CodeEditor = function CodeEditor(_ref) {
     window.dispatchEvent(e);
   };
 
+  var reportError = useCallback(function (e) {
+    if (e) {
+      console.log(e);
+      onError(e);
+      e.preventDefault && e.preventDefault();
+    } else {
+      onError(null);
+    }
+  }, []);
   useEffect(function () {
     // 用于上报错误信息，使用 script 执行代码
     if (typeof window !== 'undefined') {
-      window.__reportErrorInPlayground = function (e) {
-        if (e) {
-          console.error(e);
-          onError(e);
-        }
-      };
+      // Cath error of code.
+      window.__reportErrorInPlayground = reportError; // Catch error of timeout/raf.
+
+      window.onerror = reportError; // Catch error of  promise.
+
+      window.addEventListener('unhandledrejection', reportError);
     }
-  });
+
+    return function () {
+      if (window) {
+        window.__reportErrorInPlayground = undefined;
+        window.onerror = undefined;
+        window.removeEventListener('unhandledrejection', reportError);
+      }
+    };
+  }, []);
   var executeCode = useCallback(debounce(function (v) {
     if (!v) return; // 1. 先编译代码
 
     var compiled;
 
     try {
-      compiled = compile(replaceInsertCss(v, locale.id), relativePath); // 清除错误
-
-      onError(null);
+      compiled = compile(replaceInsertCss(v, locale.id), relativePath);
     } catch (e) {
-      console.error(e);
-      onError(e); // 执行出错，后面的步骤不用做了！
+      reportError(e); // 执行出错，后面的步骤不用做了！
 
       return;
     } // 2. 执行代码，try catch 在内部已经做了
@@ -122,6 +138,10 @@ export var CodeEditor = function CodeEditor(_ref) {
     executeCode(code);
   }, [code]);
   useEffect(function () {
+    var dom = document.getElementById('playgroundScriptContainer');
+    bind(dom, debounce(function () {
+      dispatchResizeEvent();
+    }, 100));
     onReady();
 
     if (playground !== null && playground !== void 0 && playground.playgroundDidMount) {
@@ -129,6 +149,7 @@ export var CodeEditor = function CodeEditor(_ref) {
     }
 
     return function () {
+      clear(dom);
       onDestroy();
 
       if (playground !== null && playground !== void 0 && playground.playgroundWillUnmount) {
@@ -149,6 +170,11 @@ export var CodeEditor = function CodeEditor(_ref) {
       });
     }
   }, []);
+  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) {
       setCode(value);
@@ -177,9 +203,9 @@ export var CodeEditor = function CodeEditor(_ref) {
     }
   }, /*#__PURE__*/React.createElement(MonacoEditor, {
     language: currentEditorTab === EDITOR_TABS.JAVASCRIPT ? 'javascript' : 'json',
-    value: currentEditorTab === EDITOR_TABS.JAVASCRIPT ? code : JSON.stringify(data, null, 2),
+    value: code,
     path: relativePath,
-    loading: "Loading...",
+    loading: /*#__PURE__*/React.createElement(Loading, null),
     options: {
       readOnly: currentEditorTab === EDITOR_TABS.DATA,
       automaticLayout: true,

package/dist/slots/CodeEditor/utils.js

@@ -135,7 +135,7 @@ export function execute(code, playgroundScriptContainer, container) {
   var script = document.createElement('script'); // replace container id in case of multi demos in document
 
   var newCode = code.replace(/'container'|"container"/, "'".concat(replaceId, "'"));
-  script.innerHTML = "\n// Can only have one anonymous define call per script file\n// \u548C monaco loader \u52A0\u8F7D\u51B2\u7A81\nvar __runnerDefine = window['define'];\nwindow['define'] = null;\ntry {\n  ".concat(newCode, "\n\n  window.__reportErrorInPlayground && window.__reportErrorInPlayground(null);\n} catch(e) {\n  window.__reportErrorInPlayground && window.__reportErrorInPlayground(e);\n} finally {\n  window['define'] = __runnerDefine;\n}\n  "); // 追加图表容器
+  script.innerHTML = "\n// Can only have one anonymous define call per script file\n// \u548C monaco loader \u52A0\u8F7D\u51B2\u7A81\nvar __runnerDefine = window['define'];\nwindow['define'] = null;\ntry {\n  ".concat(newCode, "\n\n  // \u6E05\u9664\u663E\u793A\u7684\u9519\u8BEF\n  window.__reportErrorInPlayground && window.__reportErrorInPlayground(null);\n} catch(e) {\n  window.__reportErrorInPlayground && window.__reportErrorInPlayground(e);\n} finally {\n  window['define'] = __runnerDefine;\n}\n  "); // 追加图表容器
 
   node.innerHTML = container || "<div id=".concat(replaceId, " />"); // 运行 script
 

package/dist/slots/CodePreview/CodeHeader.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { PageHeader, Tooltip, Space, Divider } from 'antd';
 import { EditOutlined } from '@ant-design/icons';
 import { useT } from "../hooks";
-import { getGithubSourceUrl } from "../utils";
+import { getGithubSourceURL } from "../utils";
 import styles from "./CodeHeader.module.less";
 
 /**
@@ -18,7 +18,7 @@ export var CodeHeader = function CodeHeader(_ref) {
     subTitle: /*#__PURE__*/React.createElement(Tooltip, {
       title: useT('在 GitHub 上编辑')
     }, /*#__PURE__*/React.createElement("a", {
-      href: getGithubSourceUrl(githubUrl, relativePath, 'examples'),
+      href: getGithubSourceURL(githubUrl, relativePath, 'examples'),
       target: "_blank",
       rel: "noopener noreferrer",
       className: styles.editOnGtiHubButton

package/dist/slots/CodePreview/index.js

@@ -24,6 +24,6 @@ export var CodePreview = function CodePreview(_ref) {
     className: styles.result,
     status: "error",
     title: useT('演示代码报错，请检查'),
-    subTitle: /*#__PURE__*/React.createElement("pre", null, error && error.message)
+    subTitle: /*#__PURE__*/React.createElement("pre", null, error && error.toString())
   }) : null));
 };

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

@@ -10,21 +10,22 @@
   flex-direction: column;
 
   .header {
-    flex: 0
   }
 
   .content {
-    width: 100%;
-    height: 100%;
     position: relative;
+    flex: 1;
+    min-height: 0;
   
-    .playgroundScriptContainer {
-      flex: 1;
+    :global(#playgroundScriptContainer) {
       position: relative;
+      width: 100%;
+      height: 100%;
+
       :global(#container) {
+        position: relative;
         width: 100%;
         height: 100%;
-        position: relative;
       }
     }
 

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

@@ -1,10 +1,11 @@
 import React from 'react';
-import { ExamplesPage } from '../../typings';
+import { ExampleTopic } from '../../types';
 declare type CodeRunnerProps = {
     topic: string;
     example: string;
     demo: string;
-    exampleTopics: ExamplesPage.ExampleTopic[];
+    exampleTopics: ExampleTopic[];
+    size?: number;
     notFound?: React.Element;
 };
 /**

package/dist/slots/CodeRunner/index.js

@@ -28,6 +28,7 @@ export var CodeRunner = function CodeRunner(_ref) {
       topic = _ref.topic,
       example = _ref.example,
       demo = _ref.demo,
+      size = _ref.size,
       _ref$notFound = _ref.notFound,
       notFound = _ref$notFound === void 0 ? /*#__PURE__*/React.createElement(NotFound, null) : _ref$notFound;
   var demoInfo = getDemoInfo(exampleTopics, topic, example, demo); // 找不到，啥也别干了，404 页面
@@ -40,7 +41,8 @@ export var CodeRunner = function CodeRunner(_ref) {
   var _useSiteData = useSiteData(),
       themeConfig = _useSiteData.themeConfig;
 
-  var githubUrl = themeConfig.githubUrl;
+  var githubUrl = themeConfig.githubUrl,
+      playground = themeConfig.playground;
 
   var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
@@ -60,7 +62,7 @@ export var CodeRunner = function CodeRunner(_ref) {
   });
   return /*#__PURE__*/React.createElement(SplitPane, {
     split: "vertical",
-    defaultSize: "50%",
+    defaultSize: "".concat((1 - size) * 100, "%"),
     minSize: 100
   }, /*#__PURE__*/React.createElement(CodePreview, {
     error: error,
@@ -71,6 +73,7 @@ export var CodeRunner = function CodeRunner(_ref) {
     onError: setError,
     onFullscreen: setFullscreen,
     onDestroy: noop,
-    onReady: noop
+    onReady: noop,
+    playground: playground
   }));
 };

package/dist/slots/CodeRunner/utils.d.ts

@@ -1,10 +1,11 @@
+import { Demo, ExampleTopic } from '../../types';
 /**
  * 将数据结构转化成 map，便于后续检索的速度
  * @param exampleTopics
  * @returns
  */
-export declare function getExampleTopicMap(exampleTopics: ExamplesPage.ExampleTopic[]): Map<string, ExamplesPage.Demo>;
+export declare function getExampleTopicMap(exampleTopics: ExampleTopic[]): Map<string, Demo>;
 /**
  * 从 Context 信息中，获取到 Example 相关的信息，用于页面渲染
  */
-export declare function getDemoInfo(exampleTopics: ExamplesPage.ExampleTopic[], topic: string, example: string, demo: string): ExamplesPage.Demo | undefined;
+export declare function getDemoInfo(exampleTopics: ExampleTopic[], topic: string, example: string, demo: string): Demo;

package/dist/slots/CodeRunner/utils.js

@@ -5,12 +5,12 @@ 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 { map } from 'lodash-es';
+
 /**
  * 将数据结构转化成 map，便于后续检索的速度
  * @param exampleTopics
  * @returns
  */
-
 export function getExampleTopicMap(exampleTopics) {
   var exampleTopicMap = new Map();
   map(exampleTopics, function (topic) {

package/dist/slots/Detail/News.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IC } from '../../types';
 export interface NewsProps {
     index?: number;
     type: IC;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IC } from '../../types';
 import { NewsProps } from './News';
 declare type DetailButtonProps = {
     text: IC;

package/dist/slots/Detail/index.js

@@ -81,7 +81,7 @@ export var Detail = function Detail(_ref) {
         link = _ref2.link,
         shape = _ref2.shape;
     return /*#__PURE__*/React.createElement("a", {
-      key: text,
+      key: ic(text),
       className: cx(styles.buttonLink, styles[type || ''], type === 'primary' ? 'primary-button' : 'common-button'),
       style: _objectSpread({
         borderRadius: shape === 'square' ? '4px' : '1000px'

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

@@ -1,52 +1,18 @@
 import React from 'react';
-export interface PlayGroundItemProps {
-    source: string;
-    examples: PlayGroundItemProps[];
-    babeledSource: string;
-    absolutePath?: string;
-    relativePath?: string;
-    screenshot?: string;
-    recommended?: boolean;
-    filename: string;
-    title?: string;
-    location?: Location;
-    playground?: {
-        container?: string;
-        playgroundDidMount?: string;
-        playgroundWillUnmount?: string;
-        dependencies?: {
-            [key: string]: string;
-        };
-        devDependencies?: {
-            [key: string]: string;
-        };
-        htmlCodeTemplate?: string;
-    };
-}
-export interface TreeItem {
-    title?: string;
-    value?: string;
-    key?: string;
-    children?: any;
-    icon?: string;
-    relativePath?: string;
-    filename?: string;
-    screenshot?: string;
-    node?: any;
-}
+import { Demo, ExampleTopic } from '../../types';
 export interface ExampleSiderProps {
     /**
      * 当前 Example (受控)
      */
-    currentDemo: ExamplesPage.Demo;
+    currentDemo: Demo;
     /**
      * 当选中的 Demo 被改变时做些什么
      */
-    onDemoClicked: (demo: ExamplesPage.Demo) => void;
+    onDemoClicked: (demo: Demo) => void;
     /**
      * 所有的案例主题
      */
-    exampleTopics: ExamplesPage.ExampleTopic[];
+    exampleTopics: ExampleTopic[];
     showExampleDemoTitle: boolean;
 }
 /**

package/dist/slots/ExampleSider/index.js

@@ -4,14 +4,6 @@ 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; }
 
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
 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."); }
@@ -24,15 +16,15 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import { Input, Menu, Tooltip } from 'antd';
 import React, { useEffect, useRef, useState } from 'react';
+import { Input, Menu, Tooltip } from 'antd';
 import { useLocale } from 'dumi';
 import { createFromIconfontCN, SearchOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
-import { reduce, size } from 'lodash-es';
 import { useT } from "../hooks";
-import styles from "./index.module.less";
-// menu icon
+import { filterTreeNode } from "../utils";
+import styles from "./index.module.less"; // menu icon
+
 var MenuIcon = createFromIconfontCN({
   scriptUrl: '//at.alicdn.com/t/font_470089_1lnym745udm.js' // generated by iconfont.cn
 
@@ -64,37 +56,23 @@ export var ExampleSider = function ExampleSider(props) {
       searchValue = _useState6[0],
       setSearchValue = _useState6[1];
 
-  var locale = useLocale(); // 查找符合条件的数据 从title和 searchValue 可以匹配 就返回 否自返回[]
-
-  var findSearchTreeData = function findSearchTreeData(data) {
-    return reduce(data, function (value, item) {
-      var _item$title;
-
-      if ((_item$title = item.title) !== null && _item$title !== void 0 && _item$title.match(searchValue)) {
-        return [].concat(_toConsumableArray(value), [item]);
-      }
-
-      if (item.children) {
-        var searchData = findSearchTreeData(item.children);
-        return size(searchData) ? [].concat(_toConsumableArray(value), [_objectSpread(_objectSpread({}, item), {}, {
-          children: searchData
-        })]) : value;
-      }
-
-      return value;
-    }, []);
-  }; // 获取默认展开的keys数组 传入treeData 和 底层的 key  返回符合条件的 keys
-
-
-  var getDefaultOpenKeys = function getDefaultOpenKeys(data, key) {
-    return reduce(data, function (value, item) {
-      if (item.children) {
-        var keys = getDefaultOpenKeys(item.children, key);
-        return keys.length ? [].concat(_toConsumableArray(value), [item.value], _toConsumableArray(keys)) : value;
-      }
+  var locale = useLocale();
+
+  var getCurrentTopics = function getCurrentTopics() {
+    if (searchValue) {
+      var res = filterTreeNode({
+        id: 'FAKE_ID',
+        childrenKey: 'exampleTopics',
+        title: {
+          'zh': 'FAKE_TITLE',
+          'en': 'FAKE_TITLE'
+        },
+        exampleTopics: exampleTopics
+      }, searchValue, locale.id);
+      return (res === null || res === void 0 ? void 0 : res.exampleTopics) || [];
+    }
 
-      return key === item.value ? [item.value] : value;
-    }, []);
+    return exampleTopics;
   }; // 初始化菜单栏展开keys
 
 
@@ -142,7 +120,7 @@ export var ExampleSider = function ExampleSider(props) {
   };
 
   var renderSubMenu = function renderSubMenu() {
-    return exampleTopics.map(function (topic) {
+    return getCurrentTopics().map(function (topic) {
       return /*#__PURE__*/React.createElement(Menu.SubMenu, {
         key: "TOPIC-".concat(topic.id),
         title: /*#__PURE__*/React.createElement("div", null, topic.icon && /*#__PURE__*/React.createElement(MenuIcon, {
@@ -208,7 +186,7 @@ export var ExampleSider = function ExampleSider(props) {
     style: {
       width: '100%'
     },
-    className: styles.siderbarMenu,
+    className: styles.sideBarMenu,
     openKeys: openKeys,
     selectedKeys: ["DEMO-".concat(currentDemo.id)],
     onOpenChange: function onOpenChange(keys) {

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

@@ -122,7 +122,7 @@
   font-weight: 500;
 }
 
-.siderbarMenu {
+.sideBarMenu {
   border: none;
 
   .menuTitleContent {