@antv/dumi-theme-antv 0.7.10 → 0.8.0-alpha.3

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

@@ -0,0 +1,230 @@
+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); }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+/**
+ * 从代码字符串中提取依赖，并生成 package.json 的 dependencies 对象。
+ *
+ * @param {string} codeString 包含代码的字符串。
+ * @returns {object} 一个符合 package.json dependencies 格式的对象。
+ */
+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 = {};
+
+  // 2. 定义正则表达式来匹配 import 语句的来源
+  // 这个正则表达式可以处理以下情况:
+  // - import defaultExport from 'package-name';
+  // - import { namedExport } from 'package-name';
+  // - import * as name from 'package-name';
+  // - import 'package-name'; (用于副作用)
+  // - import defaultExport from '@scoped/package-name/sub-path';
+  //
+  // 解析:
+  // - `import(?:.*from)?` : 匹配 "import" 关键字，以及可选的 "... from" 部分。
+  // - `\s+` : 匹配一个或多个空格。
+  // - `['"]` : 匹配单引号或双引号。
+  // - `([^'"]+)` : 核心捕获组。匹配引号内的所有字符，这就是我们需要的包路径。
+  // - `['"]` : 匹配结束的引号。
+  // - `/g` : 全局匹配，查找所有符合条件的导入。
+  var importRegex = /import(?:.*from)?\s+['"]([^'"]+)['"]/g;
+
+  // 使用 Set 来存储找到的包，可以自动去重
+  var foundPackages = new Set();
+
+  // 3. 遍历所有匹配项
+  var match;
+  while ((match = importRegex.exec(codeString)) !== null) {
+    // 捕获组 match[1] 包含了完整的导入路径，例如 '@antv/g2' 或 'react-dom/client'
+    var importPath = match[1];
+
+    // 4. 过滤掉相对路径和绝对路径
+    if (importPath.startsWith('.') || importPath.startsWith('/')) {
+      continue;
+    }
+
+    // 5. 提取根包名
+    // 这可以处理像 'react-dom/client' 这样的深层导入，我们只需要 'react-dom'
+    // 或者像 '@antv/g2/es/chart'，我们只需要 '@antv/g2'
+    var rootPackage = void 0;
+    var pathParts = importPath.split('/');
+    if (importPath.startsWith('@')) {
+      // 对于作用域包 (scoped package)，例如 @antv/g2，根包名是前两部分
+      rootPackage = "".concat(pathParts[0], "/").concat(pathParts[1]);
+    } else {
+      // 对于普通包，根包名是第一部分
+      rootPackage = pathParts[0];
+    }
+    foundPackages.add(rootPackage);
+  }
+
+  // 6. 将找到的包添加到最终的依赖对象中
+  var _iterator = _createForOfIteratorHelper(foundPackages),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var pkg = _step.value;
+      // 如果不是固定的依赖，就添加并设置为 'latest'
+      if (!Object.prototype.hasOwnProperty.call(dependencies, pkg)) {
+        dependencies[pkg] = "latest";
+      }
+    }
+
+    // VisionSnap限制只要是jsx就必须装React。
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  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 {'vue' | 'tsx' | 'jsx' | 'ts' | 'js'} - 推断出的文件扩展名（不含点）。
+ */
+export function getLanguageExtension(code) {
+  // --- 特征检测函数 ---
+
+  /**
+   * 检查代码是否包含 Vue 单文件组件 (SFC) 的特征。
+   * 这是最优先的检查，因为Vue的SFC结构非常独特。
+   */
+  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;
+    }
+
+    // 检查点 2: 顶层 <template> 块（非常强的信号）
+    // 使用 'm' (multiline) 标志，'^' 匹配每行的开头。
+    var templateRegex = /^\s*<template.*>/m;
+    if (templateRegex.test(text)) {
+      return true;
+    }
+
+    // 检查点 3: 导入 Vue 核心库（通用信号）
+    // 匹配 import ... from 'vue'
+    var vueImportRegex = /import\s+.*?\s+from\s*['"]vue['"]/;
+    if (vueImportRegex.test(text)) {
+      return true;
+    }
+
+    // 检查点 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';
+    }
+    return 'jsx';
+  } else {
+    if (containsTypeScript(code)) {
+      return 'ts';
+    }
+    return 'js';
+  }
+}
+export function wrap2VisionSnap() {
+  var codeBlock = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var ext = getLanguageExtension(codeBlock);
+  var mainFile = ext === 'vue' ? "/src/index.js" : "/src/index.".concat(ext);
+  var appFile = "/src/App.".concat(ext);
+  var dependencies = generateDependencies(codeBlock, ext);
+  var rootElementType = dependencies['@antv/f2'] ? 'canvas' : 'div';
+  var dependenciesJSON = {
+    "name": "AntV-adapted-project",
+    "version": "1.0.0",
+    "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': {
+        fpath: '/package.json',
+        code: JSON.stringify(dependenciesJSON, null, 2)
+      }
+    }, mainFile, {
+      fpath: mainFile,
+      code: mainFileCode
+    }), appFile, {
+      fpath: appFile,
+      code: codeBlock
+    })
+  };
+}
+export function wrap2Sandpack() {
+  var codeBlock = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  // const regex = /^```[\w-]*\n([\s\S]*?)\n?```$/m;
+  // const match = codeBlock.match(regex);
+  // if (match) {
+  return {
+    "/package.json": {
+      code: "{\n      \"name\": \"AntV-AI-Code\",\n      \"version\": \"1.0.0\",\n      \"main\": \"/index.tsx\",\n      \"dependencies\": ".concat(JSON.stringify(generateDependencies(codeBlock), null, 2), "\n    }")
+    },
+    "/index.tsx": {
+      code: codeBlock
+    },
+    "/index.html": {
+      code: "<!DOCTYPE html>\n<html>\n<head>\n  <title>Vanilla JS Example</title>\n</head>\n<body>\n  <div id=\"root\"></div>\n  <div id=\"container\"></div>\n  <script src=\"index.tsx\"></script>\n</body>\n</html>"
+    }
+  };
+}

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

@@ -0,0 +1,101 @@
+import { useSiteData } from 'dumi';
+import React, { useMemo } from 'react';
+import { useSnapshot } from 'valtio';
+import { AIChatStore } from "../../../../model/AIChat";
+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";
+import { useAntVConfig } from "../../../../hooks/useProducts";
+function TaskBox() {
+  var _themeConfig$ai, _themeConfig$ai2;
+  var _useAntVConfig = useAntVConfig(),
+    _useAntVConfig$data = _useAntVConfig.data,
+    _useAntVConfig$data2 = _useAntVConfig$data === void 0 ? {
+      VisionSnapVersion: '3.5.12'
+    } : _useAntVConfig$data,
+    version = _useAntVConfig$data2.VisionSnapVersion;
+  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]);
+  var _useVisionsnapSdk = useVisionsnapSdk(version),
+    sdk = _useVisionsnapSdk.sdk,
+    loading = _useVisionsnapSdk.loading;
+  if (loading) {
+    return /*#__PURE__*/React.createElement(Loading, null);
+  }
+  var wrappedVisionSnapCode = wrap2VisionSnap(snap.codeBlock);
+  var handleEsmLoadFailed = function handleEsmLoadFailed(err) {
+    var _err$data;
+    AIChatStore.errorMsg = ((_err$data = err.data) === null || _err$data === void 0 || (_err$data = _err$data.error) === null || _err$data === void 0 || (_err$data = _err$data.split('\n')) === null || _err$data === void 0 ? void 0 : _err$data[0]) || JSON.stringify(err) || err.message;
+  };
+  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) || !wrappedVisionSnapCode.modules["/package.json"].code.includes("@antv/f2")) {
+    return /*#__PURE__*/React.createElement(ErrorBoundary, {
+      FallbackComponent: ErrorFallback
+    }, /*#__PURE__*/React.createElement(sdk.VisionPreview, {
+      id: "visionIframe",
+      bizCode: "antv",
+      style: {
+        height: '100vh'
+      },
+      userId: "antv",
+      displayMode: "code-and-preview",
+      initialView: "preview",
+      theme: "light",
+      code: wrappedVisionSnapCode,
+      requestProxy: requestProxy,
+      isStreaming: false,
+      proxyOptions: {
+        isWAN: true
+      },
+      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,
+      previewZoomConfig: {
+        defaultZoomMode: 100
+      }
+    }));
+  } else {
+    return /*#__PURE__*/React.createElement(CodeRunner, {
+      isPlayground: true,
+      showAI: false,
+      showEditor: 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

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

package/dist/pages/AIPlayground/demo.js

@@ -0,0 +1,34 @@
+export var projectFiles = {
+  "/package.json": {
+    code: "{\n      \"name\": \"antv-g2-example\",\n      \"version\": \"1.0.0\",\n      \"main\": \"/index.js\",\n      \"dependencies\": {\n        \"@antv/g2\": \"^5\"\n      }\n    }"
+  },
+  "/index.js": {
+    // 入口文件是纯 JS
+    code: "import { Chart } from '@antv/g2';\n\n    const chart = new Chart({\n      container: 'root',\n    });\n\n    chart.options({\n      type: 'interval',\n      autoFit: true,\n      data: [\n        { grade: '\u4E00\u5E74\u7EA7', count: 200 },\n        { grade: '\u4E8C\u5E74\u7EA7', count: 250 },\n        { grade: '\u4E09\u5E74\u7EA7', count: 300 },\n        { grade: '\u56DB\u5E74\u7EA7', count: 350 },\n      ],\n      encode: { x: 'grade', y: 'count' },\n    });\n\n    chart.render();\n    "
+  },
+  "/index.html": {
+    code: "<!DOCTYPE html>\n<html>\n<head>\n  <title>Vanilla JS Example</title>\n</head>\n<body>\n  <div id=\"root\"></div>\n  <div id=\"container\"></div>\n  <script src=\"index.js\"></script>\n</body>\n</html>"
+  }
+};
+export var code = {
+  modules: {
+    // package.json 文件是必须要的，其中 name, version, main, dependencies 必填
+    '/package.json': {
+      fpath: '/package.json',
+      code: "{\n  \"name\": \"dark-card-app\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@ant-design/icons\": \"^5.2.6\",\n    \"@alipay/bigfish\": \"^4.3.0\"\n  },\n\"main\": \"src/index.jsx\"\n}\n"
+    },
+    // 入口文件默认是 /src/index.tsx，也可以配合 package.json main 字段指定其他入口
+    '/src/index.jsx': {
+      fpath: '/src/index.jsx',
+      code: "import React from '@alipay/bigfish/react';\n      import ReactDOM from '@alipay/bigfish/react-dom';\nimport { ConfigProvider, theme } from '@alipay/bigfish/antd';\nimport App from './App';\nReactDOM.createRoot(document.getElementById('root')).render(\n  <React.StrictMode>\n    <ConfigProvider\n      theme={{\n        algorithm: theme.darkAlgorithm,\n        token: {\n          colorBgContainer: '#141414',\n          colorBorderSecondary: '#303030',\n        }\n      }}\n    >\n      <App />\n    </ConfigProvider>\n  </React.StrictMode>\n);\n"
+    },
+    '/src/App.jsx': {
+      fpath: '/src/App.jsx',
+      code: "import React from '@alipay/bigfish/react';\nimport { Card, Avatar, Typography, Space } from '@alipay/bigfish/antd';\nimport { UserOutlined, ClockCircleOutlined, HeartOutlined, MessageOutlined } from '@ant-design/icons';\nimport './App.less';\nimport {styled} from '@alipay/bigfish';\nconst Title = styled.div`\n  color: palevioletred;\n`;\n\nconst { Text } = Typography;\n\nconst DarkCard = () => {\n  return (\n    <div className=\"dark-card-container\">\n      <Card\n        className=\"dark-card\"\n        cover={\n          <div className=\"card-cover\">\n            <div className=\"cover-image-placeholder\" />\n          </div>\n        }\n        actions={[\n          <Space key=\"time\">\n            <ClockCircleOutlined />\n            <Text className=\"action-text\">2 hours ago</Text>\n          </Space>,\n          <Space key=\"likes\">\n            <HeartOutlined />\n            <Text className=\"action-text\">128</Text>\n          </Space>,\n          <Space key=\"comments\">\n            <MessageOutlined />\n            <Text className=\"action-text\">24</Text>\n          </Space>\n        ]}\n      >\n        <Card.Meta\n          avatar={<Avatar size={40} icon={<UserOutlined />} />}\n          title={<Title>Dark Theme Card</Title>}\n          description={\n            <Text className=\"card-description\">\n              This is a dark themed card with modern design elements.\n              Perfect for displaying content in low-light interfaces.\n            </Text>\n          }\n        />\n      </Card>\n    </div>\n  );\n};\n\nexport default DarkCard;\n"
+    },
+    '/src/App.less': {
+      fpath: '/src/App.less',
+      code: ".dark-card-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n  background-color: #0a0a0a;\n  padding: 20px;\n}\n\n.dark-card {\n  width: 100%;\n  max-width: 400px;\n  border-radius: 12px;\n  overflow: hidden;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);\n\n  .ant-card-head {\n    border-bottom: 1px solid #303030;\n  }\n\n  .ant-card-actions {\n    background: #1a1a1a;\n    border-top: 1px solid #303030;\n\n    > li {\n      border-right: 1px solid #303030 !important;\n    }\n  }\n}\n\n.card-cover {\n  height: 200px;\n  background: linear-gradient(135deg, #2c2c2c, #1a1a1a);\n  position: relative;\n  overflow: hidden;\n\n  .cover-image-placeholder {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background:\n      radial-gradient(circle at center, #3a3a3a 0%, #1f1f1f 100%);\n  }\n}\n\n.card-description {\n  color: rgba(255, 255, 255, 0.65) !important;\n}\n\n.action-text {\n  color: rgba(255, 255, 255, 0.45) !important;\n  font-size: 12px;\n}\n"
+    }
+  }
+};

package/dist/pages/AIPlayground/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SessionLayout } from "./components/SessionLayout";
+import MsgBox from "./components/MsgBox";
+import TaskBox from "./components/TaskBox";
+import Header from "dumi/theme/slots/Header";
+import styles from "./index.module.less";
+function AIPlayground() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.aiPlayground
+  }, /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(SessionLayout, null, /*#__PURE__*/React.createElement(MsgBox, null), /*#__PURE__*/React.createElement(TaskBox, null)));
+}
+export default AIPlayground;

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

@@ -0,0 +1,5 @@
+.aiPlayground {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}

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;
             }
           }
         }