@antv/dumi-theme-antv 0.8.0-beta.2 → 0.8.0-beta.21

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

@@ -1,33 +1,62 @@
-import React from 'react';
-import styles from "./index.module.less";
-import { ConversationsMenu } from "../ConversationsMenu";
-import { AIChatStore } from "../../../../model/AIChat";
-import { useSnapshot } from 'valtio';
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+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; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import classnames from 'classnames';
+import React, { useState } from 'react';
 import SplitPane from 'react-split-pane';
+import { useSnapshot } from 'valtio';
+import { AIChatStore } from "../../../../model/AIChat";
+import { ConversationsMenu } from "../ConversationsMenu";
+import styles from "./index.module.less";
 function SessionLayout(props) {
   var children = props.children;
   var snap = useSnapshot(AIChatStore);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
   if (!Array.isArray(children)) {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
     className: styles.container
-  }, /*#__PURE__*/React.createElement(ConversationsMenu, null),
+  }, /*#__PURE__*/React.createElement(ConversationsMenu, null), snap.codeBlock ?
+  /*#__PURE__*/
   // @ts-ignore
-  snap.codeBlock ? /*#__PURE__*/React.createElement(SplitPane, {
+  React.createElement(SplitPane, {
     split: "vertical",
-    defaultSize: "50vw",
+    defaultSize: '50vw',
+    onDragStarted: function onDragStarted() {
+      return setIsDragging(true);
+    },
+    onDragFinished: function onDragFinished() {
+      return setIsDragging(false);
+    },
     primary: "second",
     style: {
-      position: "unset"
-    }
+      position: 'unset'
+    },
+    minSize: 100
   }, /*#__PURE__*/React.createElement("div", {
     className: classnames(styles.msgBox)
   }, children[0]), /*#__PURE__*/React.createElement("div", {
     className: styles.taskBox
   }, children[1])) : /*#__PURE__*/React.createElement("div", {
-    className: classnames(styles.msgBox, styles.msgBoxFull)
-  }, children[0]));
+    className: classnames(styles.msgBox, styles.msgBoxFull),
+    key: snap.codeBlock
+  }, children[0]), isDragging && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: 9999,
+      cursor: 'col-resize' // 或 'row-resize' 用于水平分割
+    }
+  }));
 }
 export { SessionLayout };

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

@@ -2,8 +2,9 @@
   display: flex;
   gap: 12px;
   background: #f6f7fb;
-  height: calc(100vh - 64px);
   padding: 0;
+  flex-grow: 1;
+  overflow-y: auto;
 }
 
 .msgBox, .taskBox{
@@ -21,7 +22,7 @@
 }
 
 .msgBoxHalf {
-  max-width: 30vw;
+  max-width: 40vw;
 }
 
 .msgBoxFull {
@@ -31,7 +32,6 @@
 .taskBox {
   height: calc(100% - 32px);
   margin: 16px;
-  padding: 16px;
   flex-grow: 1;
-  background: #ffffff;
+  background: transparent;
 }

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

@@ -1,3 +1,9 @@
+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; }
@@ -7,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 = {};
 
@@ -68,26 +76,139 @@ export function generateDependencies(codeString) {
         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: {
+    modules: _defineProperty(_defineProperty({
       '/package.json': {
         fpath: '/package.json',
-        code: "{\n  \"name\": \"AntV-master\",\n  \"version\": \"1.0.0\",\n  \"main\": \"/src/index.jsx\",\n  \"dependencies\": ".concat(JSON.stringify(generateDependencies(codeBlock), null, 2), "\n}")
-      },
-      '/src/index.jsx': {
-        fpath: '/src/index.jsx',
-        code: codeBlock
+        code: JSON.stringify(dependenciesJSON, null, 2)
       }
-    }
+    }, mainFile, {
+      fpath: mainFile,
+      code: mainFileCode
+    }), appFile, {
+      fpath: appFile,
+      code: codeBlock
+    })
   };
 }
 export function wrap2Sandpack() {

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

@@ -1,61 +1,98 @@
-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";
+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.4.11'
+    } : _useAntVConfig$data,
+    version = _useAntVConfig$data2.VisionSnapVersion;
   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(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
+    }));
+  } 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

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

package/dist/pages/AIPlayground/index.js

@@ -3,7 +3,10 @@ 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(React.Fragment, null, /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(SessionLayout, null, /*#__PURE__*/React.createElement(MsgBox, null), /*#__PURE__*/React.createElement(TaskBox, null)));
+  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 {