@agentscope-ai/flow 0.0.2 → 0.0.4

package/dist/components/condition-item/index.js

@@ -8,7 +8,7 @@ import { filterVarItemsByType } from "../../hooks";
 import { Divider, Flex, Select } from 'antd';
 import React, { useMemo } from 'react';
 import { OPERATOR_OPTS_MAP } from "../../constant";
-import { valueFrom_OPTIONS, variableFromLabelRender, VariableSelector } from "../custom-inputs-control";
+import { VALUE_FROM_OPTIONS, variableFromLabelRender, VariableSelector } from "../custom-inputs-control";
 import { VariableBaseInput } from "../variable-input";
 import "./index.less";
 var getRightType = function getRightType(type) {
@@ -80,7 +80,7 @@ export default function ConditionItem(props) {
           style: {
             width: 60
           },
-          options: valueFrom_OPTIONS,
+          options: VALUE_FROM_OPTIONS,
           value: props.value.right.valueFrom,
           onChange: function onChange(val) {
             return props.onChange({

package/dist/components/custom-inputs-control/index.d.ts

@@ -48,7 +48,7 @@ export declare const VariableSelector: React.MemoExoticComponent<(props: {
 }) => React.JSX.Element>;
 export declare const VariableFormComp: React.MemoExoticComponent<(props: IVariableFormCompProps) => React.JSX.Element | undefined>;
 export declare const variableFromLabelRender: (value: string) => React.JSX.Element | null;
-export declare const valueFrom_OPTIONS: {
+export declare const VALUE_FROM_OPTIONS: {
     label: React.JSX.Element;
     value: string;
 }[];

package/dist/components/custom-inputs-control/index.js

@@ -2,6 +2,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+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 _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _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); }
@@ -15,11 +17,11 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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); }
 import $i18n from "../../i18n";
 import { extractVariables, matchVariableFromVarItem } from "../../utils";
-import { Button, getCommonConfig, Input, Select } from '@agentscope-ai/design';
+import { Button, Form, getCommonConfig, Input, Select } from '@agentscope-ai/design';
 import { SparkClearLine, SparkDeleteLine, SparkEditLine, SparkPlusLine, SparkQuotationLine } from '@agentscope-ai/icons';
 import { theme, Typography } from 'antd';
 import classNames from 'classnames';
-import React, { memo, useCallback, useMemo } from 'react';
+import React, { memo, useCallback, useEffect, useMemo } from 'react';
 import FlowIcon from "../flow-icon";
 import VariableInput, { VariableBaseInput } from "../variable-input";
 import VariableTreeSelect from "../variable-tree-select";
@@ -215,7 +217,7 @@ export var variableFromLabelRender = function variableFromLabelRender(value) {
   });
   return null;
 };
-export var valueFrom_OPTIONS = [{
+export var VALUE_FROM_OPTIONS = [{
   label: /*#__PURE__*/React.createElement("div", {
     className: "flex items-center gap-[8px]"
   }, /*#__PURE__*/React.createElement(SparkQuotationLine, {
@@ -236,11 +238,66 @@ export var valueFrom_OPTIONS = [{
   })),
   value: 'input'
 }];
+
+/**
+ * 创建变量名验证规则
+ * @param allValues 所有变量的值数组，用于检查重复
+ * @param currentIndex 当前编辑的变量索引
+ */
+var createVariableNameRules = function createVariableNameRules(allValues, currentIndex) {
+  return [{
+    validator: function validator(_, value) {
+      if (!value || value.trim() === '') {
+        return Promise.resolve();
+      }
+
+      // 检查是否以数字开头
+      if (/^\d/.test(value)) {
+        return Promise.reject(new Error($i18n.get({
+          id: 'spark-flow.components.CustomInputsControl.index.variableNameCannotStartWithNumber',
+          dm: '变量名不能以数字开头'
+        })));
+      }
+
+      // 检查是否包含非法字符
+      if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(value)) {
+        return Promise.reject(new Error($i18n.get({
+          id: 'spark-flow.components.CustomInputsControl.index.variableNameOnlyAllowLettersNumbersUnderscores',
+          dm: '变量名只能包含字母、数字和下划线'
+        })));
+      }
+
+      // 检查是否重复
+      var isDuplicate = allValues.some(function (item, index) {
+        return index !== currentIndex && item.key === value && item.key !== '';
+      });
+      if (isDuplicate) {
+        return Promise.reject(new Error($i18n.get({
+          id: 'spark-flow.components.CustomInputsControl.index.variableNameDuplicate',
+          dm: '变量名不能重复'
+        })));
+      }
+      return Promise.resolve();
+    }
+  }];
+};
 export default /*#__PURE__*/memo(function CustomInputsControl(props) {
   var _props$value = props.value,
     value = _props$value === void 0 ? [] : _props$value;
   var _theme$useToken = theme.useToken(),
     token = _theme$useToken.token;
+  var _Form$useForm = Form.useForm(),
+    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+    form = _Form$useForm2[0];
+
+  // 同步 value 到 form
+  useEffect(function () {
+    var formValues = {};
+    value.forEach(function (item, index) {
+      formValues["var_".concat(index)] = item.key;
+    });
+    form.setFieldsValue(formValues);
+  }, [value, form]);
   var changeRowValue = useCallback(function (ind, payload) {
     var newVal = value.map(function (item, index) {
       if (index === ind) {
@@ -267,7 +324,10 @@ export default /*#__PURE__*/memo(function CustomInputsControl(props) {
   }, [props.onChange, value]);
   var _getCommonConfig = getCommonConfig(),
     antPrefix = _getCommonConfig.antPrefix;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Form, {
+    form: form,
+    component: false
+  }, /*#__PURE__*/React.createElement("div", {
     className: "spark-flow-inputs-form-label flex gap-[8px]"
   }, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -290,12 +350,16 @@ export default /*#__PURE__*/memo(function CustomInputsControl(props) {
     return /*#__PURE__*/React.createElement("div", {
       key: index,
       className: "spark-flow-inputs-form-item flex gap-[8px] items-stretch w-full"
-    }, /*#__PURE__*/React.createElement(Input, {
+    }, /*#__PURE__*/React.createElement(Form.Item, {
+      name: "var_".concat(index),
       style: {
-        width: props.disabledValueFrom ? 146 : 84
+        width: props.disabledValueFrom ? 146 : 84,
+        marginBottom: 0,
+        flexShrink: 0
       },
-      className: "flex-shrink-0",
-      value: item.key,
+      validateTrigger: ['onChange', 'onBlur'],
+      rules: createVariableNameRules(value, index)
+    }, /*#__PURE__*/React.createElement(Input, {
       placeholder: $i18n.get({
         id: 'spark-flow.components.CustomInputsControl.index.enterVariableName',
         dm: '请输入变量名'
@@ -312,7 +376,7 @@ export default /*#__PURE__*/memo(function CustomInputsControl(props) {
           color: token.colorError
         }
       }, "*") : null
-    }), !props.disabledValueFrom && /*#__PURE__*/React.createElement(Select, {
+    })), !props.disabledValueFrom && /*#__PURE__*/React.createElement(Select, {
       style: {
         width: 60
       },
@@ -325,7 +389,7 @@ export default /*#__PURE__*/memo(function CustomInputsControl(props) {
         });
       },
       disabled: props.disabled,
-      options: valueFrom_OPTIONS,
+      options: VALUE_FROM_OPTIONS,
       labelRender: function labelRender(props) {
         return variableFromLabelRender(props.value);
       },

package/dist/components/custom-inputs-control/index.less

@@ -6,8 +6,6 @@
   }
 }
 .spark-flow-variable-from-select {
-  height: auto !important;
-
   .@{ant-prefix}-select-selection-item {
     height: 30px;
   }

package/dist/components/flow-base-edge/index.js

@@ -63,8 +63,8 @@ export default /*#__PURE__*/memo(function FlowBaseEdge(_ref) {
   var _getCommonConfig = getCommonConfig(),
     antPrefix = _getCommonConfig.antPrefix;
   var colorList = useMemo(function () {
-    if (edgeData._source_nodeStatus && edgeData._target_nodeStatus) {
-      if (edgeData._source_nodeStatus === 'success' && edgeData._target_nodeStatus === 'success') {
+    if (edgeData._sourceNodeStatus && edgeData._targetNodeStatus) {
+      if (edgeData._sourceNodeStatus === 'success' && edgeData._targetNodeStatus === 'success') {
         return [{
           color: '#30A46C',
           opacity: 0.5,
@@ -75,7 +75,7 @@ export default /*#__PURE__*/memo(function FlowBaseEdge(_ref) {
           offset: 100
         }];
       }
-      if (edgeData._source_nodeStatus === 'success' && edgeData._target_nodeStatus === 'fail') {
+      if (edgeData._sourceNodeStatus === 'success' && edgeData._targetNodeStatus === 'fail') {
         return [{
           color: '#30A46C',
           opacity: 1,
@@ -90,7 +90,7 @@ export default /*#__PURE__*/memo(function FlowBaseEdge(_ref) {
           offset: 100
         }];
       }
-      if (edgeData._source_nodeStatus === 'success' || edgeData._source_nodeStatus === 'executing' && edgeData._target_nodeStatus === 'executing') {
+      if (edgeData._sourceNodeStatus === 'success' || edgeData._sourceNodeStatus === 'executing' && edgeData._targetNodeStatus === 'executing') {
         return [{
           color: '#30A46C',
           opacity: 1,
@@ -135,22 +135,22 @@ export default /*#__PURE__*/memo(function FlowBaseEdge(_ref) {
   }, [edgeData, selected]);
   var isAnimated = useMemo(function () {
     var _ref2;
-    if (edgeData._source_nodeStatus === 'executing' && edgeData._target_nodeStatus === 'executing') return true;
-    return edgeData._source_nodeStatus === 'success' && !((_ref2 = ['fail', 'success']) !== null && _ref2 !== void 0 && _ref2.includes(edgeData._target_nodeStatus || ''));
+    if (edgeData._sourceNodeStatus === 'executing' && edgeData._targetNodeStatus === 'executing') return true;
+    return edgeData._sourceNodeStatus === 'success' && !((_ref2 = ['fail', 'success']) !== null && _ref2 !== void 0 && _ref2.includes(edgeData._targetNodeStatus || ''));
   }, [edgeData]);
   var markerEndColor = useMemo(function () {
-    if (edgeData._source_nodeStatus && edgeData._target_nodeStatus) {
-      if (edgeData._source_nodeStatus === 'success' && edgeData._target_nodeStatus === 'success') {
+    if (edgeData._sourceNodeStatus && edgeData._targetNodeStatus) {
+      if (edgeData._sourceNodeStatus === 'success' && edgeData._targetNodeStatus === 'success') {
         return {
           stroke: '#30A46C'
         };
       }
-      if (edgeData._source_nodeStatus === 'success' && edgeData._target_nodeStatus === 'fail') {
+      if (edgeData._sourceNodeStatus === 'success' && edgeData._targetNodeStatus === 'fail') {
         return {
           stroke: '#F23139'
         };
       }
-      if (edgeData._source_nodeStatus === 'success') {
+      if (edgeData._sourceNodeStatus === 'success') {
         return {
           stroke: '#615CED'
         };
@@ -168,7 +168,7 @@ export default /*#__PURE__*/memo(function FlowBaseEdge(_ref) {
     return {
       stroke: "var(--".concat(antPrefix, "-color-mauve)")
     };
-  }, [edgeData._hover, selected, getCommonConfig, edgeData._source_nodeStatus, edgeData._target_nodeStatus, antPrefix]);
+  }, [edgeData._hover, selected, getCommonConfig, edgeData._sourceNodeStatus, edgeData._targetNodeStatus, antPrefix]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, !animated && /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("marker", {
     id: "".concat(id, "-arrow"),
     markerWidth: "20",

package/dist/components/node-result-panel/index.js

@@ -74,7 +74,7 @@ var NodeResultPanel = function NodeResultPanel(props) {
     _useState2 = _slicedToArray(_useState, 2),
     expand = _useState2[0],
     setExpand = _useState2[1];
-  var isBatch = props.data.is_batch && !!props.data.batches;
+  var isBatch = props.data.isBatch && !!props.data.batches;
   var _useState3 = useState(1),
     _useState4 = _slicedToArray(_useState3, 2),
     batchIndex = _useState4[0],

package/dist/components/script-code-mirror/index.js

@@ -62,10 +62,6 @@ var createCompletionSource = function createCompletionSource(inputParams) {
       console.log('IME composing, blocking autocomplete');
       return null;
     }
-
-    // 恢复原来的匹配逻辑：匹配任意单词字符
-    var word = context.matchBefore(/\w*/);
-    if (!word) return null;
     var completions = _toConsumableArray(inputParams.map(function (param) {
       return {
         label: "params.".concat(param.key),
@@ -73,6 +69,20 @@ var createCompletionSource = function createCompletionSource(inputParams) {
         info: "Params parameter: ".concat(param.key, " (").concat(param.type, ")")
       };
     }));
+
+    // 检查是否是 / 触发的补全
+    var slashMatch = context.matchBefore(/\/\w*/);
+    if (slashMatch) {
+      return {
+        from: slashMatch.from + 1,
+        // 从 / 后面开始替换，保留 /
+        options: completions
+      };
+    }
+
+    // 正常的单词补全：使用 \w+ 确保至少有一个字符，避免特殊字符触发
+    var word = context.matchBefore(/\w+/);
+    if (!word) return null;
     return {
       from: word.from,
       options: completions

package/dist/hooks/use-edges-interaction.js

@@ -34,15 +34,15 @@ export var useEdgesInteraction = function useEdgesInteraction() {
       if (!!sourceNodeResult && !!targetNodeResult) return _objectSpread(_objectSpread({}, item), {}, {
         animated: targetNodeResult.nodeStatus === 'executing',
         data: _objectSpread(_objectSpread({}, item.data), {}, {
-          _source_nodeStatus: sourceNodeResult.nodeStatus,
-          _target_nodeStatus: targetNodeResult.nodeStatus
+          _sourceNodeStatus: sourceNodeResult.nodeStatus,
+          _targetNodeStatus: targetNodeResult.nodeStatus
         })
       });
       return _objectSpread(_objectSpread({}, item), {}, {
         animated: false,
         data: _objectSpread(_objectSpread({}, item.data), {}, {
-          _source_nodeStatus: undefined,
-          _target_nodeStatus: undefined
+          _sourceNodeStatus: undefined,
+          _targetNodeStatus: undefined
         })
       });
     });
@@ -56,8 +56,8 @@ export var useEdgesInteraction = function useEdgesInteraction() {
       return _objectSpread(_objectSpread({}, item), {}, {
         animated: false,
         data: _objectSpread(_objectSpread({}, item.data), {}, {
-          _source_nodeStatus: undefined,
-          _target_nodeStatus: undefined
+          _sourceNodeStatus: undefined,
+          _targetNodeStatus: undefined
         })
       });
     });

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export { default as CodeInput } from './components/code-input';
 export { operatorLabelRender } from './components/condition-item';
 export { default as SourceHandle } from './components/custom-handle/source-handle';
 export { default as TargetHandle } from './components/custom-handle/target-handle';
-export { default as CustomInputsControl, valueFrom_OPTIONS, VariableFormComp, VariableSelector, variableFromLabelRender, } from './components/custom-inputs-control';
+export { default as CustomInputsControl, VALUE_FROM_OPTIONS, VariableFormComp, VariableSelector, variableFromLabelRender, } from './components/custom-inputs-control';
 export * from './components/custom-outputs-form';
 export { default as DraggableWithHandle } from './components/draggable-with-handle';
 export { default as DragPanel } from './components/drag-panel';

package/dist/index.js

@@ -6,7 +6,7 @@ export { default as CodeInput } from "./components/code-input";
 export { operatorLabelRender } from "./components/condition-item";
 export { default as SourceHandle } from "./components/custom-handle/source-handle";
 export { default as TargetHandle } from "./components/custom-handle/target-handle";
-export { default as CustomInputsControl, valueFrom_OPTIONS, VariableFormComp, VariableSelector, variableFromLabelRender } from "./components/custom-inputs-control";
+export { default as CustomInputsControl, VALUE_FROM_OPTIONS, VariableFormComp, VariableSelector, variableFromLabelRender } from "./components/custom-inputs-control";
 export * from "./components/custom-outputs-form";
 export { default as DraggableWithHandle } from "./components/draggable-with-handle";
 export { default as DragPanel } from "./components/drag-panel";

package/dist/types/work-flow.d.ts

@@ -45,8 +45,8 @@ export interface IPointItem {
 }
 export interface IEdgeData {
     _hover?: boolean;
-    _source_nodeStatus?: IWorkFlowStatus;
-    _target_nodeStatus?: IWorkFlowStatus;
+    _sourceNodeStatus?: IWorkFlowStatus;
+    _targetNodeStatus?: IWorkFlowStatus;
 }
 export interface INodeDataOutputParamItem {
     id?: string;
@@ -115,26 +115,26 @@ export interface IWorkFlowTaskResultItem {
     nodeType: string;
     nodeName: string;
     nodeId: string;
-    node_content: string | IUserInputItem[];
+    nodeContent: string | IUserInputItem[];
     nodeStatus: IWorkFlowStatus;
-    parent_nodeId?: string;
+    parentNodeId?: string;
 }
 export interface IWorkFlowNodeResultItem {
-    is_batch: boolean;
+    isBatch: boolean;
     retry?: {
         happened: boolean;
-        retry_times: number;
+        retryTimes: number;
     };
     input?: string;
     output?: string;
     usages?: {
         promptTokens: number;
         completionTokens: number;
-        total_tokens: number;
+        totalTokens: number;
     }[];
     batches: IWorkFlowNodeResultItem[];
-    is_multi_branch: boolean;
-    multi_branch_results?: {
+    isMultiBranch: boolean;
+    multiBranchResults?: {
         conditionId: string;
         targetIds: string[];
     }[];
@@ -142,20 +142,20 @@ export interface IWorkFlowNodeResultItem {
     nodeName: string;
     nodeType: string;
     nodeStatus: IWorkFlowStatus;
-    parent_nodeId?: string;
-    output_type: 'json' | 'text';
+    parentNodeId?: string;
+    outputType: 'json' | 'text';
     nodeExecTime: string;
-    try_catch?: {
+    tryCatch?: {
         happened: boolean;
         strategy: string;
     };
-    short_memory?: {
+    shortMemory?: {
         round: number;
-        current_self_chat_messages: {
+        currentSelfChatMessages: {
             role?: string;
             content?: any;
             name?: string;
-            tool_calls?: Array<{
+            toolCalls?: Array<{
                 id: string;
                 type: string;
                 index: number;
@@ -168,7 +168,7 @@ export interface IWorkFlowNodeResultItem {
             audio?: {
                 id: string;
                 data: string;
-                expires_at: number;
+                expiresAt: number;
                 transcript: string;
             };
         }[];
@@ -176,12 +176,12 @@ export interface IWorkFlowNodeResultItem {
     errorInfo?: string;
 }
 export interface IWorkFlowTaskProcess {
-    task_id: string;
-    conversation_id?: string;
+    taskId: string;
+    conversationId?: string;
     requestId: string;
     taskStatus: IWorkFlowStatus;
-    task_results: IWorkFlowTaskResultItem[];
-    error_code?: string;
+    taskResults: IWorkFlowTaskResultItem[];
+    errorCode?: string;
     errorInfo?: string;
     taskExecTime: string;
     nodeResults: IWorkFlowNodeResultItem[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentscope-ai/flow",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "A powerful and flexible flow canvas rendering engine designed for AI applications. Provides comprehensive workflow visualization and interaction capabilities for platforms like Bailian and AgentScope, enabling seamless creation and management of complex AI agent workflows with an intuitive drag-and-drop interface.",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

package/README.zh-CN.md

@@ -1,67 +0,0 @@
-# Spark Flow
-## 项目介绍
-Spark Flow是供给主包`packages/main`的画布编辑基础业务组件，主要技术栈包含React、React Flow、Antd、zustand等。
-
-### 主要功能
-+ 节点检查清单列表；
-+ 节点管理器；
-+ 画布执行状态管理；
-+ 支持回退、撤销；
-+ 支持全生命周期快速定制业务节点；
-+ 支持复杂节点交互；
-
-### 项目主要结构
-```plain
-spark-flow/
-├── docs/
-├── public/                # 静态资源文件
-├── src/               
-│   ├── components/        # 基础组件
-│   ├── constant/          # 可视化工作流编辑器
-│   ├── demos/             # 国际化支持
-│   ├── flow/              # 画布组件主入口
-│   ├── hooks/             # 画布类操作工具库
-│   ├── i18n/              # 国际化
-│   ├── store/             # 全局状态管理
-│   ├── types/             # 类型定义
-|		├── utils/             # 函数工具库 
-|		├── index.less/        # less变量定义
-|		└── index.ts/          # 项目主入口文件
-└── package.json           # 项目配置
-```
-
-#### 节点结构
-```plain
-[业务节点名]
-├── node                 # 画布节点渲染
-├── panel                # 节点配置面板
-└── schema               # 节点Schema协议配置
-```
-
-#### 自定义
-+ 通过覆盖 `packages/spark-flow/src/index.less` 中的 `@ant-prefix` 可以修改样式文件中的自定义类名和 CSS 变量名前缀；
-+ 同时需要在项目中通过 `ConfigProvider` 设置自定义类名和 CSS 变量名前缀：
-```
-import { ConfigProvider } from '@agentscope-ai/design';
-
-<ConfigProvider prefix="efm" prefixCls="efm_ant>
-  ...
-</ConfigProvider>
-```
-
-## 如何开发
-### 快速启动
-```shell
-npm run re-install && cd packages/spark-flow && npm start
-```
-
-+ **安装依赖** 在根目录执行`npm run re-install`
-+ **运行** cd`packages/spark-flow`且执行`npm start`
-
-### 开发
-> [!NOTE]  
-> **注意：** 前提是你完成了快速启动的 **安装依赖** 操作
-
-+ 开发完之后根目录下执行`npm run fresh:flow`能够快速清除主包`packages/main`的依赖；
-+ 进入主包`packages/main`执行`npm start`
-+ 进行测试 & 验证；