@antv/dumi-theme-antv 0.3.0-beta.8 → 0.3.0

package/dist/slots/Cases/index.js

@@ -2,12 +2,13 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 import React from 'react';
 import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
-import { Link } from 'dumi';
+import { Link, FormattedMessage } from 'dumi';
 import Slider from 'react-slick';
 import cx from 'classnames';
+import { useLocale } from 'dumi';
+import { ic, icWithLocale } from "../hooks";
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
-import { useT, ic } from "../hooks";
 import styles from "./index.module.less";
 export var Cases = function Cases(_ref) {
   var _ref$cases = _ref.cases,
@@ -15,6 +16,7 @@ export var Cases = function Cases(_ref) {
       _ref$style = _ref.style,
       style = _ref$style === void 0 ? {} : _ref$style,
       className = _ref.className;
+  var lang = useLocale().id;
   var slider = React.useRef(null);
 
   var clickPrevious = function clickPrevious() {
@@ -68,15 +70,19 @@ export var Cases = function Cases(_ref) {
         href: app.link,
         target: "_blank",
         rel: "noopener noreferrer"
-      }, useT('查看详情')) : /*#__PURE__*/React.createElement(Link, {
+      }, /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "\u67E5\u770B\u8BE6\u60C5"
+      })) : /*#__PURE__*/React.createElement(Link, {
         className: styles.detail,
-        to: app.link ? app.link : ''
-      }, useT('查看详情')));
+        to: icWithLocale(app.link, lang) || ''
+      }, /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "\u67E5\u770B\u8BE6\u60C5"
+      })));
       return /*#__PURE__*/React.createElement("div", {
         className: styles.appWrapper,
         key: ic(app.title)
       }, /*#__PURE__*/React.createElement("img", {
-        className: styles.appTeaser,
+        className: cx(styles.appTeaser, 'index-cases-image'),
         src: app.image,
         alt: ic(app.title)
       }), /*#__PURE__*/React.createElement("div", {
@@ -84,7 +90,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/Cases/index.module.less

@@ -18,7 +18,8 @@
     width: 83.88%;
     height: 100%;
     overflow-y: hidden;
-    display: flex;
+    display: flex !important;
+    align-items: center;
 
     .appLeft {
       margin-left: 3.06%;

package/dist/slots/CodeEditor/Toolbar.js

@@ -21,12 +21,11 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 import React, { useEffect, useState } from 'react';
 import { CodeSandboxOutlined, PlayCircleOutlined, ThunderboltOutlined } from '@ant-design/icons';
 import { Typography, Tooltip } from 'antd';
-import { useLocale } from 'dumi';
+import { useLocale, FormattedMessage } from 'dumi';
 import { getParameters } from 'codesandbox/lib/api/define';
 import stackblitzSdk from '@stackblitz/sdk';
 import { ping } from "../utils";
 import { extractImportDeps, getCodeSandboxConfig, getStackblitzConfig, getRiddleConfig } from "./utils";
-import { useT } from "../hooks";
 import styles from "./Toolbar.module.less";
 var Paragraph = Typography.Paragraph;
 export var EDITOR_TABS;
@@ -93,20 +92,26 @@ export var Toolbar = function Toolbar(_ref) {
     name: "data",
     value: JSON.stringify(riddlePrefillConfig)
   }), /*#__PURE__*/React.createElement(Tooltip, {
-    title: useT('在 Riddle 中打开')
+    title: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "\u5728 Riddle \u4E2D\u6253\u5F00"
+    })
   }, /*#__PURE__*/React.createElement("input", {
     type: "submit",
     value: "Create New Riddle with Prefilled Data",
     className: styles.riddle
   }))) : null, /*#__PURE__*/React.createElement(Tooltip, {
-    title: useT('在 StackBlitz 中打开')
+    title: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "\u5728 StackBlitz \u4E2D\u6253\u5F00"
+    })
   }, /*#__PURE__*/React.createElement(ThunderboltOutlined, {
     className: styles.stackblitz,
     onClick: function onClick() {
       stackblitzSdk.openProject(stackblitzPrefillConfig);
     }
   })), /*#__PURE__*/React.createElement(Tooltip, {
-    title: useT('在 CodeSandbox 中打开')
+    title: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "\u5728 CodeSandbox \u4E2D\u6253\u5F00"
+    })
   }, /*#__PURE__*/React.createElement("form", {
     action: "https://codesandbox.io/api/v1/sandboxes/define",
     method: "POST",
@@ -130,7 +135,9 @@ export var Toolbar = function Toolbar(_ref) {
       marginLeft: 6
     }
   }), /*#__PURE__*/React.createElement(Tooltip, {
-    title: useT('执行代码')
+    title: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "\u6267\u884C\u4EE3\u7801"
+    })
   }, /*#__PURE__*/React.createElement(PlayCircleOutlined, {
     onClick: onExecuteCode,
     style: {

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

@@ -4,6 +4,10 @@ export declare type CodeEditorProps = {
      * 标题
      */
     title?: string;
+    /**
+     * 示例的 id
+     */
+    exampleId: string;
     /**
      * 输入的源码
      */

package/dist/slots/CodeEditor/index.js

@@ -17,7 +17,7 @@ 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 { Loading } from "dumi/theme/slots/Loading";
 import styles from "./index.module.less";
 loader.config({
   'vs/nls': {
@@ -43,6 +43,7 @@ export var CodeEditor = function CodeEditor(_ref) {
       _ref$replaceId = _ref.replaceId,
       replaceId = _ref$replaceId === void 0 ? 'container' : _ref$replaceId,
       isFullscreen = _ref.isFullscreen,
+      exampleId = _ref.exampleId,
       _ref$onReady = _ref.onReady,
       onReady = _ref$onReady === void 0 ? noop : _ref$onReady,
       _ref$onDestroy = _ref.onDestroy,
@@ -79,8 +80,9 @@ export var CodeEditor = function CodeEditor(_ref) {
   var _useState7 = useState(EDITOR_TABS.JAVASCRIPT),
       _useState8 = _slicedToArray(_useState7, 2),
       currentEditorTab = _useState8[0],
-      setCurrentEditorTab = _useState8[1]; // 出发 auto resize
+      setCurrentEditorTab = _useState8[1];
 
+  var containerId = "playgroundScriptContainer_".concat(exampleId); // 出发 auto resize
 
   var dispatchResizeEvent = function dispatchResizeEvent() {
     var e = new Event('resize');
@@ -116,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;
@@ -129,19 +132,31 @@ export var CodeEditor = function CodeEditor(_ref) {
     } // 2. 执行代码，try catch 在内部已经做了
 
 
-    execute(compiled, 'playgroundScriptContainer', playground === null || playground === void 0 ? void 0 : playground.container, replaceId);
-  }, 300), []);
+    execute(compiled, containerId, playground === null || playground === void 0 ? void 0 : playground.container, replaceId);
+  }, 300), [exampleId, currentEditorTab]); // 案例变化的时候，修改期待吗
+
   useEffect(function () {
     setCode(source);
-  }, [source]);
+  }, [exampleId]); // 代码变化的时候，运行代码
+
   useEffect(function () {
     executeCode(code);
   }, [code]);
   useEffect(function () {
-    var dom = document.getElementById('playgroundScriptContainer');
-    bind(dom, debounce(function () {
-      dispatchResizeEvent();
-    }, 100));
+    var dom = document.getElementById(containerId);
+
+    if (dom) {
+      bind(dom, debounce(function () {
+        dispatchResizeEvent();
+      }, 100));
+    }
+
+    return function () {
+      dom && clear(dom);
+    };
+  }, []); // 生命周期
+
+  useEffect(function () {
     onReady();
 
     if (playground !== null && playground !== void 0 && playground.playgroundDidMount) {
@@ -149,7 +164,6 @@ export var CodeEditor = function CodeEditor(_ref) {
     }
 
     return function () {
-      clear(dom);
       onDestroy();
 
       if (playground !== null && playground !== void 0 && playground.playgroundWillUnmount) {
@@ -168,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, {
@@ -194,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,
@@ -203,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/CodeEditor/utils.js

@@ -137,7 +137,7 @@ export function execute(code, playgroundScriptContainer, container) {
   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  // \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
+  node.innerHTML = container || "<div id=".concat(replaceId, " class=\"playgroundCodeContainer\" />"); // 运行 script
 
   node.appendChild(script);
 }

package/dist/slots/CodePreview/CodeHeader.js

@@ -1,9 +1,5 @@
 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 styles from "./CodeHeader.module.less";
+import { PageHeader, Space, Divider } from 'antd';
 
 /**
  * 组件的 header
@@ -14,15 +10,20 @@ export var CodeHeader = function CodeHeader(_ref) {
       githubUrl = _ref.githubUrl;
   return /*#__PURE__*/React.createElement(PageHeader, {
     ghost: false,
-    title: title,
-    subTitle: /*#__PURE__*/React.createElement(Tooltip, {
-      title: useT('在 GitHub 上编辑')
-    }, /*#__PURE__*/React.createElement("a", {
-      href: getGithubSourceURL(githubUrl, relativePath, 'examples'),
-      target: "_blank",
-      rel: "noopener noreferrer",
-      className: styles.editOnGtiHubButton
-    }, /*#__PURE__*/React.createElement(EditOutlined, null))),
+    title: title // todo 编辑地址各种各样，需要有单独的配置，暂时关闭！
+    // subTitle={
+    //   <Tooltip title={<FormattedMessage id="在 GitHub 上编辑" />}>
+    //     <a
+    //       href={getGithubSourceURL(githubUrl, relativePath, 'examples')}
+    //       target="_blank"
+    //       rel="noopener noreferrer"
+    //       className={styles.editOnGtiHubButton}
+    //     >
+    //       <EditOutlined />
+    //     </a>
+    //   </Tooltip>
+    // }
+    ,
     extra: /*#__PURE__*/React.createElement(Space, {
       split: /*#__PURE__*/React.createElement(Divider, {
         type: "vertical"

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

@@ -1,5 +1,13 @@
 import React from 'react';
 export declare type CodePreviewProps = {
+    /**
+     * 在文档中预览
+     */
+    isPlayground: boolean;
+    /**
+     * id
+     */
+    exampleId: string;
     /**
      * 预览页面头部组件，用于显示 demo 名称，一些操作栏等
      */

package/dist/slots/CodePreview/index.js

@@ -1,29 +1,38 @@
 import React from 'react';
 import { Result } from 'antd';
-import { useT } from "../hooks";
+import { FormattedMessage } from 'dumi';
 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 header = _ref.header,
+  var isPlayground = _ref.isPlayground,
+      exampleId = _ref.exampleId,
+      header = _ref.header,
       error = _ref.error;
   return /*#__PURE__*/React.createElement("div", {
     className: styles.preview
-  }, /*#__PURE__*/React.createElement("div", {
+  }, isPlayground ? null : /*#__PURE__*/React.createElement("div", {
     className: styles.header
   }, header), /*#__PURE__*/React.createElement("div", {
     className: styles.content
   }, /*#__PURE__*/React.createElement("div", {
-    id: "playgroundScriptContainer",
+    id: "playgroundScriptContainer_".concat(exampleId),
     className: styles.playgroundScriptContainer
   }), error ? /*#__PURE__*/React.createElement(Result, {
     className: styles.result,
     status: "error",
-    title: useT('演示代码报错，请检查'),
-    subTitle: /*#__PURE__*/React.createElement("pre", null, error && error.toString())
+    title: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "\u6F14\u793A\u4EE3\u7801\u62A5\u9519\uFF0C\u8BF7\u68C0\u67E5"
+    }),
+    subTitle: /*#__PURE__*/React.createElement("pre", null, getErrorMessage(error))
   }) : null));
 };

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

@@ -3,13 +3,16 @@
   height: 100%;
   position: relative;
 
-  padding: 16px;
+  padding: 24px;
   overflow: auto;
 
   display: flex;
   flex-direction: column;
 
   .header {
+    :global(.ant-page-header) {
+      padding-left: 0;
+    }
   }
 
   .content {
@@ -17,11 +20,17 @@
     flex: 1;
     min-height: 0;
   
-    :global(#playgroundScriptContainer) {
+    .playgroundScriptContainer, .playgroundCodeContainer {
       position: relative;
       width: 100%;
       height: 100%;
 
+      :global(.playgroundCodeContainer) {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+
       :global(#container) {
         position: relative;
         width: 100%;

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

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

package/dist/slots/CodeRunner/index.js

@@ -14,11 +14,12 @@ import React, { useState } from 'react';
 import { useSiteData, useLocale } from 'dumi';
 import { noop } from 'lodash-es';
 import SplitPane from 'react-split-pane';
-import { CodeEditor } from "../CodeEditor";
-import { CodePreview } from "../CodePreview";
+import { CodeEditor } from "dumi/theme/slots/CodeEditor";
+import { CodePreview } from "dumi/theme/slots/CodePreview";
 import { CodeHeader } from "../CodePreview/CodeHeader";
 import { getDemoInfo } from "./utils";
-import { NotFound } from "../404";
+import { NotFound } from "dumi/theme/slots/404";
+import { ic } from "../hooks";
 
 /**
  * 代码编辑器 + 代码预览区域
@@ -29,6 +30,8 @@ export var CodeRunner = function CodeRunner(_ref) {
       example = _ref.example,
       demo = _ref.demo,
       size = _ref.size,
+      replaceId = _ref.replaceId,
+      isPlayground = _ref.isPlayground,
       _ref$notFound = _ref.notFound,
       notFound = _ref$notFound === void 0 ? /*#__PURE__*/React.createElement(NotFound, null) : _ref$notFound;
   var demoInfo = getDemoInfo(exampleTopics, topic, example, demo); // 找不到，啥也别干了，404 页面
@@ -56,20 +59,25 @@ export var CodeRunner = function CodeRunner(_ref) {
 
   var locale = useLocale();
   var header = /*#__PURE__*/React.createElement(CodeHeader, {
-    title: title[locale.id],
+    title: ic(title),
     relativePath: relativePath,
     githubUrl: githubUrl
   });
+  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: exampleId,
     error: error,
-    header: header
+    header: header,
+    isPlayground: isPlayground
   }), /*#__PURE__*/React.createElement(CodeEditor, {
+    exampleId: exampleId,
     source: source,
     relativePath: relativePath,
+    replaceId: replaceId,
     onError: setError,
     onFullscreen: setFullscreen,
     onDestroy: noop,

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

@@ -4,7 +4,7 @@ declare type Company = {
     img: string;
 };
 interface CompaniesProps {
-    title: string;
+    title: any;
     companies: Company[];
     className?: string;
     style?: React.CSSProperties;

package/dist/slots/{TOC.d.ts → ContentTable/index.d.ts}

@@ -1,5 +1,6 @@
 import React from 'react';
+import './index.module.less';
 /**
  * 文档右侧的指示器（table of content）
  */
-export declare const TOC: React.FC<{}>;
+export declare const ContentTable: React.FC<{}>;

package/dist/slots/{TOC.js → ContentTable/index.js}

@@ -1,6 +1,7 @@
 import Toc from 'dumi/theme-default/slots/Toc';
+import "./index.module.less";
 /**
  * 文档右侧的指示器（table of content）
  */
 
-export var TOC = Toc;
+export var ContentTable = Toc;

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

@@ -0,0 +1,11 @@
+:global {
+  ul.dumi-default-toc {
+    >li {
+      margin-left: 0px!important;
+    }
+    .active {
+      color: #873bf4!important;
+      border-left: 3px solid #873bf4!important;
+    }
+  }
+}

package/dist/slots/Detail/News.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'dumi';
+import { Link, useLocale } from 'dumi';
 import { ic } from "../hooks";
 import styles from "./News.module.less";
 var numberImages = ['https://gw.alipayobjects.com/zos/antfincdn/IqREAm36K7/1.png', 'https://gw.alipayobjects.com/zos/antfincdn/3fG1Iqjfnz/2.png'];
@@ -11,6 +11,7 @@ export var News = function News(_ref) {
       date = _ref.date,
       _ref$link = _ref.link,
       link = _ref$link === void 0 ? '' : _ref$link;
+  var lang = useLocale().id;
   var children = /*#__PURE__*/React.createElement("div", {
     className: styles.container
   }, /*#__PURE__*/React.createElement("img", {
@@ -35,7 +36,7 @@ export var News = function News(_ref) {
   }
 
   return /*#__PURE__*/React.createElement(Link, {
-    to: link,
+    to: link[lang] ? link[lang] : link,
     className: styles.news
   }, children);
 };

package/dist/slots/Detail/index.js

@@ -22,6 +22,7 @@ import React, { useState, useEffect } from 'react';
 import cx from 'classnames';
 import gh from 'parse-github-url';
 import GitHubButton from 'react-github-button';
+import { useLocale } from 'dumi/dist/client/theme-api';
 import { ic } from "../hooks";
 import { News } from "./News";
 import styles from "./index.module.less";
@@ -50,6 +51,7 @@ export var Detail = function Detail(_ref) {
       removeNews = _useState2[0],
       setRemoteNews = _useState2[1];
 
+  var lang = useLocale().id;
   useEffect(function () {
     fetch(AssetsNewsURL).then(function (res) {
       return res.json();
@@ -86,7 +88,7 @@ export var Detail = function Detail(_ref) {
       style: _objectSpread({
         borderRadius: shape === 'square' ? '4px' : '1000px'
       }, style),
-      href: link
+      href: link[lang] ? link[lang] : link
     }, /*#__PURE__*/React.createElement("span", {
       className: styles.button
     }, ic(text)));

package/dist/slots/ExampleSider/index.js

@@ -18,10 +18,10 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { useEffect, useRef, useState } from 'react';
 import { Input, Menu, Tooltip } from 'antd';
-import { useLocale } from 'dumi';
+import { useLocale, FormattedMessage, useIntl } from 'dumi';
+import { cloneDeep } from 'lodash-es';
 import { createFromIconfontCN, SearchOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
-import { useT } from "../hooks";
 import { filterTreeNode } from "../utils";
 import styles from "./index.module.less"; // menu icon
 
@@ -57,22 +57,19 @@ export var ExampleSider = function ExampleSider(props) {
       setSearchValue = _useState6[1];
 
   var locale = useLocale();
+  var intl = useIntl();
 
   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 exampleTopics;
+    var res = filterTreeNode({
+      id: 'FAKE_ID',
+      childrenKey: 'exampleTopics',
+      title: {
+        'zh': 'FAKE_TITLE',
+        'en': 'FAKE_TITLE'
+      },
+      exampleTopics: cloneDeep(exampleTopics)
+    }, searchValue, locale.id);
+    return (res === null || res === void 0 ? void 0 : res.exampleTopics) || [];
   }; // 初始化菜单栏展开keys
 
 
@@ -131,11 +128,11 @@ export var ExampleSider = function ExampleSider(props) {
         }, topic.title && getSearchValueTitle(topic.title[locale.id])))
       }, topic.examples.map(function (example) {
         return /*#__PURE__*/React.createElement(Menu.SubMenu, {
-          key: "EXAMPLE-".concat(example.id),
+          key: "EXAMPLE-".concat(topic.id, "-").concat(example.id),
           title: example.title[locale.id]
         }, example.demos.map(function (demo) {
           return /*#__PURE__*/React.createElement(Menu.Item, {
-            key: "DEMO-".concat(demo.id),
+            key: "DEMO-".concat(topic.id, "-").concat(example.id, "-").concat(demo.id),
             style: {
               height: 70,
               padding: 0,
@@ -161,7 +158,9 @@ export var ExampleSider = function ExampleSider(props) {
       className: styles.searchSider
     }, /*#__PURE__*/React.createElement(Input, {
       size: "small",
-      placeholder: useT('搜索…'),
+      placeholder: intl.formatMessage({
+        id: '搜索…'
+      }),
       prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
       value: searchValue,
       onChange: function onChange(e) {
@@ -169,7 +168,9 @@ export var ExampleSider = function ExampleSider(props) {
       }
     }), /*#__PURE__*/React.createElement(Tooltip, {
       placement: "right",
-      title: useT('收起所有')
+      title: /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "\u6536\u8D77\u6240\u6709"
+      })
     }, /*#__PURE__*/React.createElement(VerticalAlignTopOutlined, {
       className: styles.searchSiderIcon,
       onClick: function onClick() {