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

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

@@ -1,61 +1,85 @@
-import React from 'react';
-import { Sandpack } from "@codesandbox/sandpack-react";
-import styles from "./index.module.less";
+import { useSiteData } from 'dumi';
+import React, { useMemo } from 'react';
+import { useSnapshot } from 'valtio';
 import { AIChatStore } from "../../../../model/AIChat";
-import { useSnapshot } from "valtio";
-import { wrap2Sandpack } from "./generateCode";
-// import {code} from "../../demo";
-// import {requestProxy, useVisionsnapSdk} from "../../../../hooks/useVisionsnapSdk";
-
+import CodeRunner from "dumi/theme/slots/CodeRunner";
+import { wrap2VisionSnap } from "./generateCode";
+import { requestProxy, useVisionsnapSdk } from "../../../../hooks/useVisionsnapSdk";
+import { ErrorBoundary } from 'react-error-boundary';
+import Loading from "dumi/theme/slots/Loading";
+import { ErrorFallback } from "../../../../builtins/Playground";
 function TaskBox() {
+  var _themeConfig$ai, _themeConfig$ai2;
   var snap = useSnapshot(AIChatStore);
-
-  // const { sdk, loading } = useVisionsnapSdk('3.2.4');
-  //
-  // if (loading) {
-  //   return <div>Loading...</div>;
-  // }
-  //
-  // return (
-  //     <sdk.VisionPreview id="visionIframe"
-  //                        bizCode="vision-preview-demo"
-  //                        style={{ height: '100vh' }}
-  //                        userId="263347"
-  //                        displayMode="preview-only"
-  //                        editable={false}
-  //                        code={code}
-  //                        // 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']
-      }
-    },
-    theme: "light" // 主题：dark, light, auto
-    ,
-    customSetup: {
-      entry: "/index.tsx",
-      npmRegistries: [{
-        limitToScopes: false,
-        // 设为 false 使所有包都从自定义 registry 获取
-        registryUrl: 'https://registry.npmmirror.com',
-        // 使用淘宝镜像
-        enabledScopes: [],
-        proxyEnabled: false
+  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]);
+  var _useVisionsnapSdk = useVisionsnapSdk('3.2.15'),
+    sdk = _useVisionsnapSdk.sdk,
+    loading = _useVisionsnapSdk.loading;
+  if (loading) {
+    return /*#__PURE__*/React.createElement(Loading, null);
+  }
+  if (themeConfig.isAntVSite || ((_themeConfig$ai = themeConfig.ai) === null || _themeConfig$ai === void 0 ? void 0 : _themeConfig$ai.codeRunner) === "VisionSnap" || !((_themeConfig$ai2 = themeConfig.ai) !== null && _themeConfig$ai2 !== void 0 && _themeConfig$ai2.codeRunner)) {
+    return /*#__PURE__*/React.createElement(ErrorBoundary, {
+      FallbackComponent: ErrorFallback
+    }, /*#__PURE__*/React.createElement(sdk.VisionPreview, {
+      id: "visionIframe",
+      bizCode: "vision-preview-demo",
+      style: {
+        height: '100vh'
+      },
+      userId: "263347",
+      displayMode: "code-and-preview",
+      initialView: "preview",
+      theme: "light",
+      editable: true,
+      code: wrap2VisionSnap(snap.codeBlock),
+      requestProxy: requestProxy,
+      isStreaming: false,
+      proxyOptions: {
+        isWAN: true
+      },
+      src: "https://www.weavefox.cn/_visionsnap_render/index.html?version=3.2.15&enableInspector=1"
+    }));
+  } 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/pages/AIPlayground/components/TaskBox/index.module.less

@@ -1,5 +1,6 @@
 div.antv-sp-layout {
   border: unset;
+
   :global {
     .sp-c-hluGOI:has(button:focus) {
       outline: none !important;

package/dist/pages/Examples/components/Accouncement/index.module.less

@@ -1,6 +1,6 @@
 .bannerAnnouncement {
   background: #e6f7ff;
-  border-color: rgba(71, 118, 232, 0.65);
+  border-color: rgba(71, 118, 232, 65%);
   color: #4776e8;
 
   a {

package/dist/pages/Examples/index.module.less

@@ -77,7 +77,7 @@
   }
 
   pre[class*='language-'] {
-    background-color: rgba(0, 0, 0, 0.03);
+    background-color: rgba(0, 0, 0, 3%);
   }
 
   code[class*='language-'] {
@@ -155,7 +155,7 @@
   table th {
     color: #5c6b77;
     font-weight: 500;
-    background: rgba(0, 0, 0, 0.02);
+    background: rgba(0, 0, 0, 2%);
   }
 
   table th,
@@ -174,7 +174,7 @@
     width: 20%;
     font-weight: 500;
     background: #fcfcfc;
-    color: rgba(0, 0, 0, 0.85);
+    color: rgba(0, 0, 0, 85%);
   }
 
   blockquote {
@@ -197,15 +197,16 @@
 
 .layout {
   margin: 24px 0 32px;
+
   :global {
     .ant-layout-content {
-      background-color: #ffffff;
+      background-color: #fff;
     }
   }
 }
 
 .main {
-  background-color: #ffffff;
+  background-color: #fff;
   width: calc(100% - @toc-width);
   padding-left: 48px;
   padding-right: 24px;
@@ -248,7 +249,6 @@
   background: #fff;
   max-height: 100vh;
   overflow: hidden;
-
   position: sticky;
   top: 0;
   padding: 8px 0;
@@ -288,6 +288,7 @@
 
 .affix {
   background-color: #fff;
+
   & > div {
     height: 100%;
   }
@@ -325,7 +326,7 @@
     justify-content: center;
     align-items: center;
     background: #fff;
-    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 15%);
     border-radius: 0 4px 4px 0;
   }
 }
@@ -401,7 +402,7 @@
       &:hover > div {
         transform: translateY(-4px);
         border-color: transparent;
-        box-shadow: 0 6px 16px rgba(107, 147, 224, 0.14);
+        box-shadow: 0 6px 16px rgba(107, 147, 224, 14%);
       }
 
       h4 {
@@ -455,7 +456,7 @@
   :global {
     .SplitPane {
       overflow: auto;
-      left: 0px;
+      left: 0;
       height: calc(100vh - 64px) !important;
     }
 
@@ -603,10 +604,9 @@
 }
 
 .backTop {
-  transition: color 0.3s;
   color: #868484;
   background-color: #fff;
-  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 12%), 0 6px 16px 0 rgba(0, 0, 0, 8%), 0 9px 28px 8px rgba(0, 0, 0, 5%);
   transition: color 0.3s;
   width: 44px;
   height: 44px;

package/dist/pages/Index/components/Cases/index.module.less

@@ -6,7 +6,7 @@
   position: relative;
   padding: 0;
   overflow: hidden;
-  background: rgba(250, 251, 252, 1);
+  background: rgba(250, 251, 252, 100%);
 
   .slider {
     .container1440();
@@ -38,22 +38,22 @@
         .appTitle {
           font-size: 1.2857em;
           font-weight: 500;
-          margin: 48px 0 0 0;
+          margin: 48px 0 0;
           position: relative;
           height: min-content;
-          color: rgba(0, 0, 0, 1);
+          color: rgba(0, 0, 0, 100%);
           user-select: text;
         }
 
         .appDescription {
-          color: rgba(105, 123, 140, 0.6);
+          color: rgba(105, 123, 140, 60%);
           font-size: 1em;
-          margin: 16px 0 0 0;
+          margin: 16px 0 0;
           user-select: text;
         }
 
         .detailWrapper {
-          margin: 20px 0 0 0;
+          margin: 20px 0 0;
 
           .detail {
             color: var(--primary-color);
@@ -81,7 +81,7 @@
 
           &:hover {
             border: 1px solid #ced4d9;
-            fill: #000000;
+            fill: #000;
           }
 
           &:hover :only-child {
@@ -228,7 +228,7 @@
         bottom: 100px;
       }
 
-      .slick-dots li.slick-active button:before {
+      .slick-dots li.slick-active button::before {
         opacity: 1;
         color: #1890ff;
       }

package/dist/pages/Index/components/Companies/index.module.less

@@ -14,17 +14,18 @@
     margin-bottom: 5%;
     position: relative;
     .container1440();
+
     padding-left: 4.5%;
   }
 
   .title {
     font-size: 2.714em;
     font-weight: 500;
-    margin: 118px 0 0 0;
+    margin: 118px 0 0;
     position: relative;
     height: min-content;
     text-align: center;
-    color: rgba(0, 0, 0, 1);
+    color: rgba(0, 0, 0, 100%);
   }
 
   .companiesContainer {
@@ -73,7 +74,7 @@
   .wrapper {
     .title {
       font-size: 1.9rem;
-      margin: 98px 0 0 0;
+      margin: 98px 0 0;
     }
 
     .content {

package/dist/pages/Index/components/Features/FeatureCard.module.less

@@ -17,7 +17,6 @@
 
     .title {
       font-size: 1.714em;
-      color: #000;
       margin-top: 28px;
       margin-bottom: 11px;
       font-family: AlibabaPuHuiTiM;
@@ -29,7 +28,7 @@
     .description {
       opacity: 0.6;
       width: 100%;
-      color: rgba(105, 123, 140, 1);
+      color: rgba(105, 123, 140, 100%);
       font-size: 1em;
       line-height: 1.8em;
       margin-top: 11px;
@@ -42,7 +41,7 @@
   .cards {
     .cardWrapper {
       .card {
-        margin: 84px 19px 80px 19px;
+        margin: 84px 19px 80px;
 
         .content {
           .icon {
@@ -56,8 +55,8 @@
 
           .description {
             font-size: 1em;
-            padding-bottom: 0px;
-            padding-top: 0px;
+            padding-bottom: 0;
+            padding-top: 0;
             margin-top: 12px;
           }
         }

package/dist/pages/Index/components/Features/index.module.less

@@ -21,7 +21,7 @@
 
   .title {
     font-weight: 500;
-    margin: 17px 0 0 0;
+    margin: 17px 0 0;
     position: relative;
     font-family: AlibabaPuHuiTiB;
     font-size: 40px;
@@ -52,9 +52,9 @@
     display: flex;
     justify-content: center;
     width: 100%;
-    background-color: #ffffff;
+    background-color: #fff;
     border: 1px solid #e5e8ef;
-    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.03);
+    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 3%);
     border-radius: 16px;
     overflow: hidden;
   }
@@ -77,12 +77,12 @@
 
           .cardWrapper {
             flex: none;
-            margin: 0 0 28px 0;
+            margin: 0 0 28px;
             width: 100%;
             max-width: 100%;
 
             &:last-child {
-              margin: 0 0 30px 0;
+              margin: 0 0 30px;
             }
           }
         }

package/dist/pages/Index/components/_.less

@@ -81,30 +81,30 @@ h6 {
       width: 100%;
       height: 11px;
       margin: -5px 0;
-      border-top: 5px solid rgba(255, 255, 255, 0);
-      border-bottom: 5px solid rgba(255, 255, 255, 0);
+      border-top: 5px solid rgba(255, 255, 255, 0%);
+      border-bottom: 5px solid rgba(255, 255, 255, 0%);
       cursor: row-resize;
 
       &:hover {
-        border-top: 5px solid rgba(0, 0, 0, 0.5);
-        border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+        border-top: 5px solid rgba(0, 0, 0, 50%);
+        border-bottom: 5px solid rgba(0, 0, 0, 50%);
       }
     }
 
     &.vertical {
       width: 11px;
       margin: 0 -5px;
-      border-right: 5px solid rgba(255, 255, 255, 0);
-      border-left: 5px solid rgba(255, 255, 255, 0);
+      border-right: 5px solid rgba(255, 255, 255, 0%);
+      border-left: 5px solid rgba(255, 255, 255, 0%);
       cursor: col-resize;
 
-      Pane2 {
+      pane2 {
         border-left: 1px solid #e6e6e6;
       }
 
       &:hover {
-        border-right: 5px solid rgba(0, 0, 0, 0.5);
-        border-left: 5px solid rgba(0, 0, 0, 0.5);
+        border-right: 5px solid rgba(0, 0, 0, 50%);
+        border-left: 5px solid rgba(0, 0, 0, 50%);
       }
     }
 

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/Banner/Notification.module.less

@@ -17,7 +17,7 @@
 
     .content {
       padding-left: 20px;
-      color: rgba(49, 70, 89, 1);
+      color: rgba(49, 70, 89, 100%);
       text-align: left;
 
       .description {
@@ -28,7 +28,7 @@
       }
 
       .date {
-        color: rgba(216, 203, 249, 1);
+        color: rgba(216, 203, 249, 100%);
         bottom: 0;
         font-size: 1em;
         margin-top: 4px;
@@ -38,7 +38,7 @@
   }
 
   &:hover .description {
-    color: rgba(89, 126, 247, 1);
+    color: rgba(89, 126, 247, 100%);
   }
 }
 
@@ -67,12 +67,12 @@
 @keyframes showAndHide0 {
   0% {
     opacity: 1;
-    top: 0px;
+    top: 0;
   }
 
   33.3% {
     opacity: 1;
-    top: 0px;
+    top: 0;
   }
 
   50% {
@@ -87,7 +87,7 @@
 
   100% {
     opacity: 1;
-    top: 0px;
+    top: 0;
   }
 }
 
@@ -105,12 +105,12 @@
 
   50% {
     opacity: 1;
-    top: 0px;
+    top: 0;
   }
 
   83.3% {
     opacity: 1;
-    top: 0px;
+    top: 0;
   }
 
   100% {

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

@@ -3,13 +3,14 @@
 .wrapper {
   min-height: 650px;
   max-height: 803px;
-  background: linear-gradient(225deg, #ffffff, #f0f5ff);
+  background: linear-gradient(225deg, #fff, #f0f5ff);
   height: calc(94vh);
   position: relative;
   overflow: hidden;
 
   .content {
     .container1440();
+
     height: 100%;
     position: relative;
   }
@@ -23,14 +24,14 @@
     .title {
       font-size: 3.4em; //2.875em;
       font-weight: 800;
-      color: rgba(0, 0, 0, 1);
+      color: rgba(0, 0, 0, 100%);
       position: relative;
     }
 
     .description {
       margin-top: 0.83%; //12px;
-      margin-bottom: 0px;
-      color: rgba(106, 123, 140, 1);
+      margin-bottom: 0;
+      color: rgba(106, 123, 140, 100%);
       font-size: 1.14em;
       font-weight: 200;
       position: relative;
@@ -162,6 +163,7 @@
           .gh-count {
             position: relative;
             display: none;
+
             /* hidden to start */
             margin-left: 52px;
             margin-top: 7px;
@@ -183,8 +185,8 @@
             color: #4183c4;
           }
 
-          .gh-count:before,
-          .gh-count:after {
+          .gh-count::before,
+          .gh-count::after {
             content: '';
             position: absolute;
             display: inline-block;
@@ -194,7 +196,7 @@
             border-style: solid;
           }
 
-          .gh-count:before {
+          .gh-count::before {
             top: 50%;
             left: -3px;
             margin-top: -5px;
@@ -202,7 +204,7 @@
             border-right-color: #fafafa;
           }
 
-          .gh-count:after {
+          .gh-count::after {
             top: 50%;
             border-width: 5px 5px 5px 0;
             border-right-color: #d4d4d4;
@@ -228,7 +230,6 @@
     display: flex;
     position: absolute;
     right: 0;
-    margin-top: -300px;
     width: 52%;
     max-width: 598px;
     height: 324px;

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,