@antv/dumi-theme-antv 0.8.0-beta.17 → 0.8.0-beta.19

package/dist/hooks/useProducts.js

@@ -31,10 +31,8 @@ export function useAntVConfig() {
   return useQuery({
     queryKey: ['antv-config'],
     queryFn: getAntVConfig,
-    staleTime: 24 * 60 * 60 * 1000,
-    // 一天内数据不会被认为是 "stale"，不会触发后台刷新
     initialData: {
-      "VisionSnapVersion": "3.4.6",
+      "VisionSnapVersion": "3.4.11",
       "library": ["G2", "F2", "G6"]
     }
   });

package/dist/pages/AIPlayground/components/MarkdownComponent/MarkdownCodeBlock.js

@@ -6,7 +6,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { a11yLight } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
+import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { AIChatStore } from "../../../../model/AIChat";
 import { useCopyToClipboard } from 'react-use';
 import { CheckOutlined, CopyOutlined, PlaySquareOutlined } from '@ant-design/icons';
@@ -83,8 +83,8 @@ export var MarkdownCodeBlock = function MarkdownCodeBlock(_ref) {
       id: 'ai.markdown.run'
     })
   }, /*#__PURE__*/React.createElement(PlaySquareOutlined, null)))), /*#__PURE__*/React.createElement(SyntaxHighlighter, {
-    style: a11yLight,
-    language: language,
+    style: oneLight,
+    language: language === 'vue' ? 'html' : language,
     PreTag: "div" // 使用 div 作为外层标签，避免 pre 标签的默认样式冲突
     ,
     showLineNumbers: false // (可选) 显示行号

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

@@ -1,4 +1,6 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -11,7 +13,9 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
  * @param {string} codeString 包含代码的字符串。
  * @returns {object} 一个符合 package.json dependencies 格式的对象。
  */
-export function generateDependencies(codeString) {
+export function generateDependencies() {
+  var codeString = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var ext = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'js';
   // 1. 初始化固定的依赖
   var dependencies = {};
 
@@ -73,73 +77,99 @@ export function generateDependencies(codeString) {
       }
     }
 
-    // f2的语法是jsx。VisionSnap限制只要是jsx就必须装React。
+    // VisionSnap限制只要是jsx就必须装React。
   } catch (err) {
     _iterator.e(err);
   } finally {
     _iterator.f();
   }
-  if (Object.prototype.hasOwnProperty.call(dependencies, "@antv/f2")) {
+  if (ext === 'jsx' || ext === 'tsx') {
     dependencies["react"] = "^18";
     dependencies["react-dom"] = "^18";
   }
+  if (ext === 'vue') {
+    dependencies["vue"] = "^3";
+  }
+  if (dependencies['@antv/s2'] || dependencies['@antv/s2-react'] || dependencies['@antv/s2-react-components']) {
+    dependencies = _objectSpread(_objectSpread({}, dependencies), {}, {
+      "@ant-design/icons": "^6.1.0",
+      "@antv/s2": "^2.4.9",
+      "@antv/s2-react": "^2.2.3",
+      "@antv/s2-react-components": "^2.1.2",
+      "antd": "^5.27.6",
+      "insert-css": "^2.0.0",
+      "react": "^18.3.1",
+      "react-color": "^2.19.3",
+      "react-dom": "^18.3.1",
+      "@antv/g2": "^5.4.2"
+    });
+  }
   return dependencies;
 }
 
 /**
  * 基于代码内容，启发式地判断其最合适的文件扩展名。
  * @param {string} code - 要分析的前端代码字符串。
- * @returns {'tsx' | 'jsx' | 'ts' | 'js'} - 推断出的文件扩展名（不含点）。
+ * @returns {'vue' | 'tsx' | 'jsx' | 'ts' | 'js'} - 推断出的文件扩展名（不含点）。
  */
 export function getLanguageExtension(code) {
   // --- 特征检测函数 ---
 
   /**
-   * 检查代码是否包含 JSX 语法。
-   * 这是一个启发式检查，它查找类似HTML标签的模式。
-   * - 匹配 <div...>, <MyComponent...>, </tag>, <Component/>, <>
+   * 检查代码是否包含 Vue 单文件组件 (SFC) 的特征。
+   * 这是最优先的检查，因为Vue的SFC结构非常独特。
    */
-  var containsJsx = function containsJsx(text) {
-    // 1. 查找开/闭标签 <...> 或自闭合标签 <.../>
-    // 2. 忽略可能误判的比较操作，如 `i < j`
-    // 这个正则查找一个'<'符号，后面不能是'!' (注释)或'=' (小于等于)，
-    // 并且后面跟着一个合法的标签名（字母开头）或闭合标签'/'。
-    // 这比简单的 /<...>/ 更可靠。
-    var jsxRegex = /<(?![\s!=])([a-zA-Z][a-zA-Z0-9-]*|\/|)/;
-    return jsxRegex.test(text);
-  };
+  var containsVue = function containsVue(text) {
+    // 检查点 1: Vue 3 <script setup> 语法（最强信号）
+    // 匹配 <script setup> 或 <script lang="ts" setup>
+    var scriptSetupRegex = /<script\s+(?:lang="ts"\s+)?setup>/;
+    if (scriptSetupRegex.test(text)) {
+      return true;
+    }
 
-  /**
-   * 检查代码是否包含 TypeScript 语法。
-   * 这是一个启发式检查，查找TS独有的关键字和语法模式。
-   */
-  var containsTypeScript = function containsTypeScript(text) {
-    // 检查点 1: 类型/接口定义（非常明确的信号）
-    // 匹配 `type MyType = ...` 或 `interface MyInterface { ... }`
-    var typeDefinitionRegex = /\b(interface|type)\s+[A-Z][a-zA-Z0-9]*\b/;
-    if (typeDefinitionRegex.test(text)) {
+    // 检查点 2: 顶层 <template> 块（非常强的信号）
+    // 使用 'm' (multiline) 标志，'^' 匹配每行的开头。
+    var templateRegex = /^\s*<template.*>/m;
+    if (templateRegex.test(text)) {
       return true;
     }
 
-    // 检查点 2: 变量或参数的类型注解（强信号）
-    // 匹配 `: string`, `: number`, `: MyType` 等
-    // 这个正则查找一个冒号，后面跟着一个类型（通常大写字母开头或ts内置类型）
-    var typeAnnotationRegex = /:\s*([A-Z][a-zA-Z0-9<>.]*|string|number|boolean|any\[?\]?)/;
-    if (typeAnnotationRegex.test(text)) {
+    // 检查点 3: 导入 Vue 核心库（通用信号）
+    // 匹配 import ... from 'vue'
+    var vueImportRegex = /import\s+.*?\s+from\s*['"]vue['"]/;
+    if (vueImportRegex.test(text)) {
       return true;
     }
 
-    // 检查点 3: 其他TS关键字
-    // 匹配 `as someType`, `implements`, `private`, `public`, `protected` 等
-    var tsKeywordsRegex = /\b(as|implements|private|public|protected|readonly)\s+[a-zA-Z]/;
-    if (tsKeywordsRegex.test(text)) {
+    // 检查点 4: Vue 2 Options API 特征（辅助信号）
+    // 匹配 export default { ... data|methods|computed ... } 结构
+    var optionsApiRegex = /\bexport\s+default\s*{[\s\S]*?\b(data|methods|computed|watch)\b/;
+    if (optionsApiRegex.test(text)) {
       return true;
     }
     return false;
   };
+  var containsJsx = function containsJsx(text) {
+    var jsxRegex = /<(?![\s!=])([a-zA-Z][a-zA-Z0-9-]*|\/|)/;
+    return jsxRegex.test(text);
+  };
+  var containsTypeScript = function containsTypeScript(text) {
+    var typeDefinitionRegex = /\b(interface|type)\s+[A-Z][a-zA-Z0-9]*\b/;
+    if (typeDefinitionRegex.test(text)) return true;
+    var typeAnnotationRegex = /:\s*([A-Z][a-zA-Z0-9<>.]*|string|number|boolean|any\[?\]?)/;
+    if (typeAnnotationRegex.test(text)) return true;
+    var tsKeywordsRegex = /\b(as|implements|private|public|protected|readonly)\s+[a-zA-Z]/;
+    if (tsKeywordsRegex.test(text)) return true;
+    return false;
+  };
+
+  // --- 决策逻辑（Vue优先） ---
 
-  // --- 决策逻辑 ---
+  if (containsVue(code)) {
+    return 'vue';
+  }
 
+  // 如果不是Vue，则回退到原有的React/JS逻辑
   if (containsJsx(code)) {
     if (containsTypeScript(code)) {
       return 'tsx';
@@ -155,9 +185,9 @@ export function getLanguageExtension(code) {
 export function wrap2VisionSnap() {
   var codeBlock = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var ext = getLanguageExtension(codeBlock);
-  var mainFile = "/src/index.".concat(ext);
+  var mainFile = ext === 'vue' ? "/src/index.js" : "/src/index.".concat(ext);
   var appFile = "/src/App.".concat(ext);
-  var dependencies = generateDependencies(codeBlock);
+  var dependencies = generateDependencies(codeBlock, ext);
   var rootElementType = dependencies['@antv/f2'] ? 'canvas' : 'div';
   var dependenciesJSON = {
     "name": "AntV-adapted-project",
@@ -165,6 +195,7 @@ export function wrap2VisionSnap() {
     "main": mainFile,
     "dependencies": dependencies
   };
+  var mainFileCode = ext === 'vue' ? "import { createApp } from 'vue';\nimport App from './App.vue';\n\nconst app = createApp(App);\napp.mount('#app');\n" : "\n// --- Adapter Script ---\n\n// 1. \u627E\u5230\u7F16\u8F91\u5668\u73AF\u5883\u63D0\u4F9B\u7684\u6839\u8282\u70B9 #root\nconst rootElement = document.getElementById('root');\n\nif (rootElement) {\n  // 2. \u5728 #root \u5185\u90E8\u521B\u5EFA\u4E00\u4E2A ".concat(rootElementType, "\n  const containerElement = document.createElement('").concat(rootElementType, "');\n\n  // 3. \u5C06\u8FD9\u4E2A div \u7684 id \u8BBE\u7F6E\u4E3A 'container'\uFF0C\u4EE5\u6EE1\u8DB3\u7528\u6237\u4EE3\u7801\u7684\u9700\u6C42\n  containerElement.id = 'container';\n\n  // 4. \u5C06\u5B83\u6DFB\u52A0\u5230 #root \u4E2D\n  rootElement.appendChild(containerElement);\n\n  // 5. \u73B0\u5728 DOM \u4E2D\u5DF2\u7ECF\u5B58\u5728 #container\uFF0C\u5B89\u5168\u5730\u5BFC\u5165\u5E76\u6267\u884C\u7528\u6237\u7684\u4EE3\u7801\n  import('./App.").concat(ext, "');\n\n}\n      ");
   return {
     modules: _defineProperty(_defineProperty({
       '/package.json': {
@@ -173,9 +204,9 @@ export function wrap2VisionSnap() {
       }
     }, mainFile, {
       fpath: mainFile,
-      code: "\n// --- Adapter Script ---\n\n// 1. \u627E\u5230\u7F16\u8F91\u5668\u73AF\u5883\u63D0\u4F9B\u7684\u6839\u8282\u70B9 #root\nconst rootElement = document.getElementById('root');\n\nif (rootElement) {\n  // 2. \u5728 #root \u5185\u90E8\u521B\u5EFA\u4E00\u4E2A ".concat(rootElementType, "\n  const containerElement = document.createElement('").concat(rootElementType, "');\n\n  // 3. \u5C06\u8FD9\u4E2A div \u7684 id \u8BBE\u7F6E\u4E3A 'container'\uFF0C\u4EE5\u6EE1\u8DB3\u7528\u6237\u4EE3\u7801\u7684\u9700\u6C42\n  containerElement.id = 'container';\n\n  // 4. \u5C06\u5B83\u6DFB\u52A0\u5230 #root \u4E2D\n  rootElement.appendChild(containerElement);\n\n  // 5. \u73B0\u5728 DOM \u4E2D\u5DF2\u7ECF\u5B58\u5728 #container\uFF0C\u5B89\u5168\u5730\u5BFC\u5165\u5E76\u6267\u884C\u7528\u6237\u7684\u4EE3\u7801\n  import('./App.").concat(ext, "');\n\n}\n      ")
+      code: mainFileCode
     }), appFile, {
-      fpath: [appFile],
+      fpath: appFile,
       code: codeBlock
     })
   };

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

@@ -14,7 +14,7 @@ function TaskBox() {
   var _useAntVConfig = useAntVConfig(),
     _useAntVConfig$data = _useAntVConfig.data,
     _useAntVConfig$data2 = _useAntVConfig$data === void 0 ? {
-      VisionSnapVersion: '3.4.6'
+      VisionSnapVersion: '3.4.11'
     } : _useAntVConfig$data,
     version = _useAntVConfig$data2.VisionSnapVersion;
   var snap = useSnapshot(AIChatStore);
@@ -65,11 +65,11 @@ function TaskBox() {
       FallbackComponent: ErrorFallback
     }, /*#__PURE__*/React.createElement(sdk.VisionPreview, {
       id: "visionIframe",
-      bizCode: "vision-preview-demo",
+      bizCode: "antv",
       style: {
         height: '100vh'
       },
-      userId: "263347",
+      userId: "antv",
       displayMode: "code-and-preview",
       initialView: "preview",
       theme: "light",
@@ -79,7 +79,7 @@ function TaskBox() {
       proxyOptions: {
         isWAN: true
       },
-      src: "https://www.weavefox.cn/_visionsnap_render/index.html?version=".concat(version, "&enableInspector=1"),
+      src: "https://www.weavefox.cn/_visionsnap_render".concat(wrappedVisionSnapCode.modules["/package.json"].code.includes("vue") ? '_vue' : '', "/index.html?version=").concat(version, "&enableInspector=1"),
       onEsmLoadFailed: handleEsmLoadFailed
     }));
   } else {

package/dist/slots/CodeEditor/Toolbar.js

@@ -10,10 +10,9 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-import { CodeSandboxOutlined, PlayCircleOutlined, ReloadOutlined, ThunderboltOutlined } from '@ant-design/icons';
+import { PlayCircleOutlined, ReloadOutlined, ThunderboltOutlined } from '@ant-design/icons';
 import stackblitzSdk from '@stackblitz/sdk';
 import { Tooltip, Typography } from 'antd';
-import { getParameters } from 'codesandbox/lib/api/define';
 import { FormattedMessage, useLocale } from 'dumi';
 import React, { useEffect, useState } from 'react';
 import { ping } from "../utils";
@@ -119,26 +118,7 @@ export var Toolbar = function Toolbar(_ref) {
     onClick: function onClick() {
       stackblitzSdk.openProject(stackblitzPrefillConfig);
     }
-  })), /*#__PURE__*/React.createElement(Tooltip, {
-    title: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "ai.toolbar.open.codesandbox"
-    })
-  }, /*#__PURE__*/React.createElement("form", {
-    action: "https://codesandbox.io/api/v1/sandboxes/define",
-    method: "POST",
-    target: "_blank"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "hidden",
-    name: "parameters",
-    value: getParameters(codeSandboxConfig)
-  }), /*#__PURE__*/React.createElement("button", {
-    type: "submit",
-    className: styles.codesandbox
-  }, /*#__PURE__*/React.createElement(CodeSandboxOutlined, {
-    style: {
-      marginLeft: 8
-    }
-  })))), /*#__PURE__*/React.createElement(Paragraph, {
+  })), /*#__PURE__*/React.createElement(Paragraph, {
     copyable: {
       text: sourceCode
     },

package/dist/slots/CodeEditor/utils.js

@@ -75,7 +75,8 @@ export function getStackblitzConfig(title, sourceCode, fileExtension, deps, devD
   return {
     title: title || '',
     description: '',
-    template: 'create-react-app',
+    // https://developer.stackblitz.com/platform/api/javascript-sdk-options#projecttemplate
+    template: playground.template || 'typescript',
     dependencies: deps,
     files: _defineProperty(_defineProperty({}, "index.".concat(fileExtension.startsWith('ts') ? 'ts' : 'js'), sourceCode), 'index.html', playground.container || '<div id="container" />')
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/dumi-theme-antv",
-  "version": "0.8.0-beta.17",
+  "version": "0.8.0-beta.19",
   "description": "AntV website theme based on dumi2.",
   "keywords": [
     "dumi",
@@ -66,7 +66,7 @@
     "@docsearch/react": "^3.8.0",
     "@emotion/server": "^11.11.0",
     "@fingerprintjs/fingerprintjs": "^4.6.2",
-    "@monaco-editor/react": "^4.6.0",
+    "@monaco-editor/react": "4.7.0",
     "@petercatai/assistant": "^2.0.24",
     "@stackblitz/sdk": "^1.11.0",
     "@tanstack/react-query": "^5.90.2",
@@ -96,7 +96,7 @@
     "lodash.merge": "^4.6.2",
     "mini-css-extract-plugin": "^2.9.2",
     "moment": "^2.30.1",
-    "monaco-editor": "^0.25.2",
+    "monaco-editor": "0.51.0",
     "nprogress": "^0.2.0",
     "p-limit": "^3.1.0",
     "parse-github-url": "^1.0.3",