@antv/dumi-theme-antv 0.8.0-beta.1 → 0.8.0-beta.3

package/dist/pages/AIPlayground/components/TaskBox/index.js

@@ -1,14 +1,47 @@
-import React from 'react';
-import { Sandpack } from "@codesandbox/sandpack-react";
-import styles from "./index.module.less";
+import { Sandpack } from '@codesandbox/sandpack-react';
+import { useSiteData } from 'dumi';
+import React, { useMemo } from 'react';
+import { useSnapshot } from 'valtio';
 import { AIChatStore } from "../../../../model/AIChat";
-import { useSnapshot } from "valtio";
+import CodeRunner from "dumi/theme/slots/CodeRunner";
 import { wrap2Sandpack } from "./generateCode";
+import styles from "./index.module.less";
 // import {code} from "../../demo";
 // import {requestProxy, useVisionsnapSdk} from "../../../../hooks/useVisionsnapSdk";
 
 function TaskBox() {
   var snap = useSnapshot(AIChatStore);
+  var _useSiteData = useSiteData(),
+    themeConfig = _useSiteData.themeConfig;
+  var demoId = useMemo(function () {
+    return crypto.randomUUID();
+  }, [snap.codeBlock]);
+  var exampleTopics = useMemo(function () {
+    return [{
+      icon: '',
+      title: {},
+      id: snap.anonymousUserId,
+      examples: [
+      // 这是一个 Example 对象
+      {
+        icon: '',
+        title: {},
+        id: snap.activeSessionId,
+        api: 'https://example.com/api/pie-chart',
+        // 必须的 api 属性
+        demos: [
+        // 这是一个 Demo 对象
+        {
+          id: demoId,
+          screenshot: '',
+          title: {},
+          filename: 'index.tsx',
+          // 必须的 filename 属性
+          source: snap.codeBlock
+        }]
+      }]
+    }];
+  }, [demoId, snap.activeSessionId, snap.anonymousUserId, snap.codeBlock]);
 
   // const { sdk, loading } = useVisionsnapSdk('3.2.4');
   //
@@ -27,35 +60,46 @@ function TaskBox() {
   //                        // requestProxy={requestProxy}
   //                        isStreaming={false} />
   // );
-
-  return /*#__PURE__*/React.createElement(Sandpack, {
-    template: "vanilla" // 指定项目模板，Sandpack 会据此配置环境
-    ,
-    files: wrap2Sandpack(snap.codeBlock),
-    options: {
-      showLineNumbers: true,
-      // 显示行号
-      showTabs: true,
-      closableTabs: false,
-      editorHeight: 'calc(100vh - 150px)',
-      rtl: true,
-      classes: {
-        'sp-layout': styles['antv-sp-layout']
+  if (themeConfig.isAntVSite) {
+    return /*#__PURE__*/React.createElement(Sandpack, {
+      template: "vanilla" // 指定项目模板，Sandpack 会据此配置环境
+      ,
+      files: wrap2Sandpack(snap.codeBlock),
+      options: {
+        showLineNumbers: true,
+        // 显示行号
+        showTabs: true,
+        closableTabs: false,
+        editorHeight: 'calc(100vh - 150px)',
+        rtl: true,
+        classes: {
+          'sp-layout': styles['antv-sp-layout']
+        }
+      },
+      theme: "light" // 主题：dark, light, auto
+      ,
+      customSetup: {
+        entry: '/index.tsx',
+        npmRegistries: [{
+          limitToScopes: false,
+          // 设为 false 使所有包都从自定义 registry 获取
+          registryUrl: 'https://registry.npmmirror.com',
+          // 使用淘宝镜像
+          enabledScopes: [],
+          proxyEnabled: false
+        }]
       }
-    },
-    theme: "light" // 主题：dark, light, auto
-    ,
-    customSetup: {
-      entry: "/index.tsx",
-      npmRegistries: [{
-        limitToScopes: false,
-        // 设为 false 使所有包都从自定义 registry 获取
-        registryUrl: 'https://registry.npmmirror.com',
-        // 使用淘宝镜像
-        enabledScopes: [],
-        proxyEnabled: false
-      }]
-    }
-  });
+    });
+  } else {
+    return /*#__PURE__*/React.createElement(CodeRunner, {
+      isPlayground: true,
+      showAI: false,
+      size: 0.5,
+      topic: snap.anonymousUserId,
+      example: snap.activeSessionId,
+      demo: demoId,
+      exampleTopics: exampleTopics
+    });
+  }
 }
 export default TaskBox;

package/dist/plugin/index.js

@@ -168,8 +168,8 @@ export default function ThemeAntVContextWrapper() {
       },
       {
         id: "dumi-theme-antv-ai-playground-lang",
-        absPath: "/:language/ai-playground/:id",
-        path: ":language/ai-playground/:id",
+        absPath: "/:language/ai-playground",
+        path: ":language/ai-playground",
         file: `${PAGES_DIR}/AIPlayground`
       }
     ];

package/dist/slots/CodeEditor/Toolbar.js

@@ -44,7 +44,9 @@ export var Toolbar = function Toolbar(_ref) {
     onToggleFullscreen = _ref$onToggleFullscre === void 0 ? null : _ref$onToggleFullscre,
     onExecuteCode = _ref.onExecuteCode,
     onClickAI = _ref.onClickAI,
-    onReload = _ref.onReload;
+    onReload = _ref.onReload,
+    _ref$showAI = _ref.showAI,
+    showAI = _ref$showAI === void 0 ? true : _ref$showAI;
   var locale = useLocale();
   var exampleTitle = _typeof(title) === 'object' ? title[locale.id] : title;
 
@@ -80,15 +82,19 @@ export var Toolbar = function Toolbar(_ref) {
         return onEditorTabChange(tab);
       }
     }, tab, " ", slot && slot);
-  })), /*#__PURE__*/React.createElement("a", {
+  })), showAI ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("a", {
     className: styles.ai,
     onClick: onClickAI
-  }, "AI \u52A9\u624B"), /*#__PURE__*/React.createElement(Tooltip, {
-    title: "\u8FD8\u539F"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "ai.toolbar.assistant"
+  })), /*#__PURE__*/React.createElement(Tooltip, {
+    title: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "ai.toolbar.restore"
+    })
   }, /*#__PURE__*/React.createElement("span", {
     className: styles.ai,
     onClick: onReload
-  }, /*#__PURE__*/React.createElement(ReloadOutlined, null))), riddleVisible ? /*#__PURE__*/React.createElement("form", {
+  }, /*#__PURE__*/React.createElement(ReloadOutlined, null)))) : null, riddleVisible ? /*#__PURE__*/React.createElement("form", {
     action: "//riddle.alibaba-inc.com/riddles/define",
     method: "POST",
     target: "_blank"
@@ -98,7 +104,7 @@ export var Toolbar = function Toolbar(_ref) {
     value: JSON.stringify(riddlePrefillConfig)
   }), /*#__PURE__*/React.createElement(Tooltip, {
     title: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "\u5728 Riddle \u4E2D\u6253\u5F00"
+      id: "ai.toolbar.open.riddle"
     })
   }, /*#__PURE__*/React.createElement("input", {
     type: "submit",
@@ -106,7 +112,7 @@ export var Toolbar = function Toolbar(_ref) {
     className: styles.riddle
   }))) : null, /*#__PURE__*/React.createElement(Tooltip, {
     title: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "\u5728 StackBlitz \u4E2D\u6253\u5F00"
+      id: "ai.toolbar.open.stackblitz"
     })
   }, /*#__PURE__*/React.createElement(ThunderboltOutlined, {
     className: styles.stackblitz,
@@ -115,7 +121,7 @@ export var Toolbar = function Toolbar(_ref) {
     }
   })), /*#__PURE__*/React.createElement(Tooltip, {
     title: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "\u5728 CodeSandbox \u4E2D\u6253\u5F00"
+      id: "ai.toolbar.open.codesandbox"
     })
   }, /*#__PURE__*/React.createElement("form", {
     action: "https://codesandbox.io/api/v1/sandboxes/define",
@@ -141,7 +147,7 @@ export var Toolbar = function Toolbar(_ref) {
     }
   }), /*#__PURE__*/React.createElement(Tooltip, {
     title: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "\u6267\u884C\u4EE3\u7801"
+      id: "ai.toolbar.execute"
     })
   }, /*#__PURE__*/React.createElement(PlayCircleOutlined, {
     onClick: onExecuteCode,

package/dist/slots/CodeEditor/index.js

@@ -15,7 +15,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import MonacoEditor, { loader } from '@monaco-editor/react';
 import { Drawer, Switch } from 'antd';
 import { autoType as d3AutoType, dsvFormat } from 'd3-dsv';
-import { useLocale, useSiteData } from 'dumi';
+import { useLocale, useSiteData, useIntl } from 'dumi';
 import { debounce, noop } from 'lodash-es';
 import { format } from 'prettier';
 import parserBabel from 'prettier/parser-babel';
@@ -57,10 +57,13 @@ var CodeEditor = function CodeEditor(_ref) {
     _ref$onError = _ref.onError,
     onError = _ref$onError === void 0 ? noop : _ref$onError,
     _ref$onFullscreen = _ref.onFullscreen,
-    onFullscreen = _ref$onFullscreen === void 0 ? noop : _ref$onFullscreen;
+    onFullscreen = _ref$onFullscreen === void 0 ? noop : _ref$onFullscreen,
+    _ref$showAI = _ref.showAI,
+    showAI = _ref$showAI === void 0 ? true : _ref$showAI;
   var locale = useLocale();
   var _useSiteData = useSiteData(),
     themeConfig = _useSiteData.themeConfig;
+  var intl = useIntl();
   var _themeConfig$es = themeConfig.es5,
     es5 = _themeConfig$es === void 0 ? true : _themeConfig$es,
     _themeConfig$showSpec = themeConfig.showSpecTab,
@@ -103,8 +106,8 @@ var CodeEditor = function CodeEditor(_ref) {
     setCurrentEditorTab = _useState12[1];
   var _useState13 = useState(false),
     _useState14 = _slicedToArray(_useState13, 2),
-    showAI = _useState14[0],
-    setShowAI = _useState14[1];
+    showAIDrawer = _useState14[0],
+    setShowAIDrawer = _useState14[1];
   var containerId = "playgroundScriptContainer_".concat(exampleId);
 
   // 出发 auto resize
@@ -280,7 +283,7 @@ var CodeEditor = function CodeEditor(_ref) {
   // 用于更新当前 example 的 spec 和 data
   useEffect(function () {
     setCurrentEditorTab(EDITOR_TABS.JAVASCRIPT);
-    setShowAI(false);
+    setShowAIDrawer(false);
   }, [exampleId]);
 
   // hook 用户的数据
@@ -384,7 +387,7 @@ var CodeEditor = function CodeEditor(_ref) {
     }
   };
   var onClickAI = function onClickAI() {
-    setShowAI(true);
+    setShowAIDrawer(true);
   };
   var onReload = function onReload() {
     setCode(source);
@@ -406,6 +409,7 @@ var CodeEditor = function CodeEditor(_ref) {
     onEditorTabChange: onTabChange,
     onToggleFullscreen: onFullscreen,
     onClickAI: onClickAI,
+    showAI: showAI,
     onReload: onReload,
     slots: {
       Spec: /*#__PURE__*/React.createElement("span", {
@@ -461,10 +465,10 @@ var CodeEditor = function CodeEditor(_ref) {
     }), /*#__PURE__*/React.createElement(Drawer, {
       placement: "right",
       closable: true,
-      open: showAI,
+      open: showAIDrawer,
       getContainer: false,
       onClose: function onClose() {
-        return setShowAI(false);
+        return setShowAIDrawer(false);
       },
       rootClassName: styles.drawer,
       width: '90%'
@@ -473,7 +477,9 @@ var CodeEditor = function CodeEditor(_ref) {
       messages: [{
         id: crypto.randomUUID(),
         role: 'assistant',
-        content: "\u6211\u662FAntV AI\u52A9\u624B\u3002\u60A8\u53EF\u4EE5\u968F\u65F6\u5411\u6211\u63D0\u95EE\uFF0C\u8BA9\u6211\u4E3A\u60A8\uFF1A\n              \n1\u3001\u89E3\u8BFB\u5F53\u524D\u56FE\u8868\u7684\u4EE3\u7801\u914D\u7F6E\u3002\n              \n2\u3001\u901A\u8FC7\u81EA\u7136\u8BED\u8A00\u5BF9\u8BDD\uFF0C\u57FA\u4E8E\u5F53\u524D\u6848\u4F8B\u751F\u6210\u65B0\u4EE3\u7801\u4EE5\u5B9A\u5236\u56FE\u8868\u3002",
+        content: intl.formatMessage({
+          id: 'ai.assistant.editor.intro'
+        }),
         createdAt: Date.now()
       }],
       context: valueOf(tab),

package/dist/slots/CodeRunner/index.js

@@ -32,7 +32,9 @@ var CodeRunner = function CodeRunner(_ref) {
     replaceId = _ref.replaceId,
     isPlayground = _ref.isPlayground,
     _ref$notFound = _ref.notFound,
-    notFound = _ref$notFound === void 0 ? /*#__PURE__*/React.createElement(NotFound, null) : _ref$notFound;
+    notFound = _ref$notFound === void 0 ? /*#__PURE__*/React.createElement(NotFound, null) : _ref$notFound,
+    _ref$showAI = _ref.showAI,
+    showAI = _ref$showAI === void 0 ? true : _ref$showAI;
   var demoInfo = getDemoInfo(exampleTopics, topic, example, demo);
 
   // 找不到，啥也别干了，404 页面
@@ -80,7 +82,8 @@ var CodeRunner = function CodeRunner(_ref) {
     onDestroy: noop,
     onReady: noop,
     playground: playground,
-    title: ic(title)
+    title: ic(title),
+    showAI: showAI
   }))));
 };
 export default CodeRunner;

package/dist/slots/Header/Search/SearchResult.js

@@ -39,16 +39,21 @@ export var SearchResult = function SearchResult(_ref) {
         promptText: keywords,
         mode: "solve",
         lib: !themeConfig.isAntVSite ? themeConfig.title : undefined,
-        jump: true
+        jump: true,
+        lang: intl.locale === 'zh' ? 'zh' : 'en'
       });
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: classnames(styles.title, styles.highlighted)
   }, keywords), /*#__PURE__*/React.createElement("div", {
     className: styles.description
-  }, "\u8BD5\u8BD5\xA0", /*#__PURE__*/React.createElement("span", {
+  }, intl.formatMessage({
+    id: 'ai.search.try'
+  }), "\xA0", /*#__PURE__*/React.createElement("span", {
     className: styles.highlighted
-  }, "AI"), "\xA0\u53EF\u89C6\u5316\u7B54\u7591"))), results !== null && results !== void 0 && results.length ? results.map(function (r, index) {
+  }, "AI"), "\xA0", intl.formatMessage({
+    id: 'ai.search.visualization'
+  })))), results !== null && results !== void 0 && results.length ? results.map(function (r, index) {
     return /*#__PURE__*/React.createElement("div", {
       className: styles.item,
       key: index

package/dist/slots/Header/index.js

@@ -195,7 +195,9 @@ var HeaderComponent = function HeaderComponent(_ref) {
       href: href,
       target: "_blank",
       rel: "noreferrer"
-    }, "AI\u751F\u7801"));
+    }, /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "header.ai.code"
+    })));
   }, [isInternalUser, showWeavefox]);
   var menu = /*#__PURE__*/React.createElement("ul", {
     className: cx(styles.menu, _defineProperty(_defineProperty({}, styles.popup, !isWide), styles.popupHidden, !popupMenuVisible))
@@ -235,7 +237,9 @@ var HeaderComponent = function HeaderComponent(_ref) {
       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", {
+    }, "\uD83C\uDDE8\uD83C\uDDF3"), /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "header.china.mirror.title"
+    })), /*#__PURE__*/React.createElement("div", {
       style: {
         marginTop: 16,
         textAlign: 'right'
@@ -248,14 +252,18 @@ var HeaderComponent = function HeaderComponent(_ref) {
       style: {
         marginRight: 8
       }
-    }, "\u6682\u65F6\u5173\u95ED"), /*#__PURE__*/React.createElement(Button, {
+    }, /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "header.china.mirror.temp.close"
+    })), /*#__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"))),
+    }, /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "header.china.mirror.no.more"
+    })))),
     open: chinaMirrorHintVisible,
     placement: "bottomRight",
     align: {
@@ -273,8 +281,12 @@ var HeaderComponent = function HeaderComponent(_ref) {
     }
   })))) : null, showChinaMirror && !isWide && /*#__PURE__*/React.createElement(Modal, {
     open: chinaMirrorHintVisible,
-    cancelText: "\u4E0D\u518D\u63D0\u9192",
-    okText: "\u7ACB\u5373\u524D\u5F80",
+    cancelText: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "header.china.mirror.no.more"
+    }),
+    okText: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "header.china.mirror.temp.close"
+    }),
     onCancel: function onCancel() {
       updateChinaMirrorHintVisible(false);
     },
@@ -292,7 +304,9 @@ var HeaderComponent = function HeaderComponent(_ref) {
   }, /*#__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", {
+  }, "\uD83C\uDDE8\uD83C\uDDF3"), /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "header.china.mirror.title"
+  }), /*#__PURE__*/React.createElement("a", {
     href: chinaMirrorUrl,
     onClick: function onClick(e) {
       e.preventDefault();
@@ -370,7 +384,9 @@ var HeaderComponent = function HeaderComponent(_ref) {
       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",
+    title: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "header.wx.qrcode.title"
+    }),
     styles: {
       body: {
         padding: 2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/dumi-theme-antv",
-  "version": "0.8.0-beta.1",
+  "version": "0.8.0-beta.3",
   "description": "AntV website theme based on dumi2.",
   "keywords": [
     "dumi",