@agentscope-ai/flow 0.0.1

package/README.zh-CN.md

@@ -0,0 +1,67 @@
+# 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`
++ 进行测试 & 验证；

package/dist/components/base-node/index.d.ts

@@ -0,0 +1,27 @@
+import { IWorkFlowNode, IWorkFlowStatus } from "../../types/work-flow";
+import { NodeProps } from '@xyflow/react';
+import React from 'react';
+import './index.less';
+interface IProps extends NodeProps<IWorkFlowNode> {
+    children?: React.ReactNode;
+    disableShowSourceHandle?: boolean;
+    disableShowTargetHandle?: boolean;
+    disableShowDebug?: boolean;
+    disableAction?: boolean;
+    className?: string;
+    hasFailBranch?: boolean;
+}
+export declare const NodeStatusIcon: React.MemoExoticComponent<({ status }: {
+    status: IWorkFlowStatus;
+}) => React.ReactNode>;
+declare function BaseNode(props: IProps): React.JSX.Element;
+export interface IGroupNodeProps extends NodeProps<IWorkFlowNode> {
+    children?: React.ReactNode;
+    disableShowSourceHandle?: boolean;
+    disableShowTargetHandle?: boolean;
+    disableShowDebug?: boolean;
+    disableAction?: boolean;
+}
+export declare const GroupNode: React.MemoExoticComponent<(props: IGroupNodeProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<typeof BaseNode>;
+export default _default;

package/dist/components/base-node/index.js

@@ -0,0 +1,320 @@
+var _excluded = ["children"];
+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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+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; }
+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); }
+import { useStore } from "../../flow/context";
+import { useNodesInteraction, useNodesReadOnly } from "../../hooks";
+import $i18n from "../../i18n";
+import { copy, Dropdown, Tag, Tooltip } from '@agentscope-ai/design';
+import { SparkCheckCircleFill, SparkCirclePlayLine, SparkCopyLine, SparkDeleteLine, SparkIdLine, SparkLoadingLine, SparkMoreLine, SparkPauseCircleFill, SparkStopCircleLine, SparkWarningCircleFill } from '@agentscope-ai/icons';
+import { Background } from '@xyflow/react';
+import { ConfigProvider, message, Typography } from 'antd';
+import classNames from 'classnames';
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import SourceHandle from "../custom-handle/source-handle";
+import TargetHandle from "../custom-handle/target-handle";
+import FlowIcon from "../flow-icon";
+import NodeResizer from "../node-resizer";
+import NodeResultPanel from "../node-result-panel";
+import "./index.less";
+export var NodeStatusIcon = /*#__PURE__*/memo(function (_ref) {
+  var status = _ref.status;
+  var IconType = function IconType() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  };
+  switch (status) {
+    case 'success':
+      IconType = function IconType(props) {
+        return /*#__PURE__*/React.createElement(SparkCheckCircleFill, props);
+      };
+      break;
+    case 'fail':
+      IconType = function IconType(props) {
+        return /*#__PURE__*/React.createElement(SparkWarningCircleFill, props);
+      };
+      break;
+    case 'executing':
+      IconType = function IconType(props) {
+        return /*#__PURE__*/React.createElement(SparkLoadingLine, props);
+      };
+      break;
+    case 'stop':
+      IconType = function IconType(props) {
+        return /*#__PURE__*/React.createElement(SparkStopCircleLine, props);
+      };
+      break;
+    case 'wait':
+      IconType = function IconType(props) {
+        return /*#__PURE__*/React.createElement(SparkPauseCircleFill, props);
+      };
+      break;
+  }
+  return IconType({
+    className: classNames('spark-flow-status-icon', "spark-flow-status-icon-".concat(status))
+  });
+});
+function BaseNode(props) {
+  var containerRef = useRef(null);
+  var taskStore = useStore(function (store) {
+    return store.taskStore;
+  });
+  var showResults = useStore(function (store) {
+    return store.showResults;
+  });
+  var setShowSingleTest = useStore(function (store) {
+    return store.setShowSingleTest;
+  });
+  var setSelectedNode = useStore(function (store) {
+    return store.setSelectedNode;
+  });
+  var nodeSchemaMap = useStore(function (store) {
+    return store.nodeSchemaMap;
+  });
+  var _useNodesInteraction = useNodesInteraction(),
+    onNodeDelete = _useNodesInteraction.onNodeDelete,
+    onNodeCopy = _useNodesInteraction.onNodeCopy,
+    updateParentNodeSize = _useNodesInteraction.updateParentNodeSize,
+    handleNodeClickByNodeId = _useNodesInteraction.handleNodeClickByNodeId;
+  var _useNodesReadOnly = useNodesReadOnly(),
+    nodesReadOnly = _useNodesReadOnly.nodesReadOnly;
+  var handleClickOperation = useCallback(function (_ref2) {
+    var key = _ref2.key;
+    switch (key) {
+      case 'copy':
+        onNodeCopy(props.id);
+        break;
+      case 'delete':
+        onNodeDelete(props.id);
+        break;
+      case 'id':
+        copy(props.id);
+        message.success($i18n.get({
+          id: 'spark-flow.components.BaseNode.index.copySuccess',
+          dm: '复制成功'
+        }));
+        break;
+    }
+  }, [props.id]);
+  var nodeResult = useMemo(function () {
+    var _taskStore$node_resul;
+    if (!taskStore) return null;
+    return ((_taskStore$node_resul = taskStore.node_results) === null || _taskStore$node_resul === void 0 ? void 0 : _taskStore$node_resul.find(function (item) {
+      return item.node_id === props.id;
+    })) || null;
+  }, [props.id, taskStore]);
+  var actionMenus = useMemo(function () {
+    return [{
+      label: /*#__PURE__*/React.createElement("div", {
+        className: "flex items-center gap-[8px]"
+      }, /*#__PURE__*/React.createElement(SparkCopyLine, null), /*#__PURE__*/React.createElement("span", null, $i18n.get({
+        id: 'spark-flow.components.BaseNode.index.copy',
+        dm: '复制'
+      }))),
+      key: 'copy'
+    }, {
+      label: /*#__PURE__*/React.createElement("div", {
+        className: "flex items-center gap-[8px]"
+      }, /*#__PURE__*/React.createElement(SparkDeleteLine, null), /*#__PURE__*/React.createElement("span", null, $i18n.get({
+        id: 'spark-flow.components.BaseNode.index.delete',
+        dm: '删除'
+      }))),
+      key: 'delete',
+      danger: true
+    }, {
+      type: 'divider'
+    }, {
+      label: /*#__PURE__*/React.createElement("div", {
+        className: "flex items-center spark-flow-node-copy-btn gap-[4px]"
+      }, /*#__PURE__*/React.createElement(Tag, {
+        className: "spark-flow-node-copy-btn-tag",
+        icon: /*#__PURE__*/React.createElement(SparkIdLine, null)
+      }, props.id), /*#__PURE__*/React.createElement(SparkCopyLine, {
+        className: "spark-flow-node-copy-btn-icon"
+      })),
+      key: 'id'
+    }].filter(function (item) {
+      if (nodeSchemaMap[props.type].isSystem || nodesReadOnly) return !['copy', 'delete'].includes(item.key) && item.type !== 'divider';
+      return true;
+    });
+  }, [nodeSchemaMap, props.type, nodesReadOnly]);
+  var nodeSchemaInfo = useMemo(function () {
+    return nodeSchemaMap[props.type];
+  }, [nodeSchemaMap, props.type]);
+  useEffect(function () {
+    if (containerRef.current && !!props.parentId) {
+      var resizeObserver = new ResizeObserver(function () {
+        updateParentNodeSize(props.parentId);
+      });
+      resizeObserver.observe(containerRef.current);
+      return function () {
+        resizeObserver.disconnect();
+      };
+    }
+  }, [props.parentId, updateParentNodeSize]);
+  return /*#__PURE__*/React.createElement(ConfigProvider, {
+    getPopupContainer: function getPopupContainer() {
+      return containerRef.current || document.body;
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: classNames('spark-flow-node-container', props.className, _defineProperty({}, "spark-flow-node-container-".concat(nodeResult === null || nodeResult === void 0 ? void 0 : nodeResult.node_status), !!nodeResult && showResults))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex-justify-between"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-[8px] items-center flex-1"
+  }, /*#__PURE__*/React.createElement(FlowIcon, {
+    nodeType: props.type
+  }), /*#__PURE__*/React.createElement(Typography.Text, {
+    ellipsis: {
+      tooltip: true
+    },
+    className: "spark-flow-node-label flex-1 w-1"
+  }, props.data.label)), !!nodeResult && showResults ? /*#__PURE__*/React.createElement(NodeStatusIcon, {
+    status: nodeResult.node_status
+  }) : props.disableAction ? null : /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+    },
+    className: "flex gap-[4px] items-center nodrag"
+  }, nodeSchemaInfo.allowSingleTest && !nodesReadOnly && /*#__PURE__*/React.createElement(Tooltip, {
+    title: $i18n.get({
+      id: 'spark-flow.components.BaseNode.index.debug',
+      dm: '调试'
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick() {
+      setSelectedNode({
+        id: props.id,
+        data: props.data,
+        type: props.type,
+        position: {
+          x: 0,
+          y: 0
+        }
+      });
+      setShowSingleTest(true);
+    },
+    className: "spark-flow-operator-icon-with-bg rounded-[6px] size-[24px] cursor-pointer flex-center"
+  }, /*#__PURE__*/React.createElement(SparkCirclePlayLine, {
+    className: "spark-flow-node-action-btn text-[20px]"
+  }))), !!actionMenus.length && /*#__PURE__*/React.createElement(ConfigProvider, {
+    theme: {
+      components: {
+        Dropdown: {
+          zIndexPopup: 2005
+        }
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    placement: "bottomRight",
+    trigger: ['click'],
+    overlayClassName: "spark-flow-node-dropdown",
+    menu: {
+      onClick: handleClickOperation,
+      items: actionMenus
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "spark-flow-operator-icon-with-bg rounded-[6px] size-[24px] flex-center cursor-pointer"
+  }, /*#__PURE__*/React.createElement(SparkMoreLine, {
+    className: "spark-flow-node-action-btn text-[20px]"
+  })))))), !!props.data.desc && /*#__PURE__*/React.createElement(Typography.Paragraph, {
+    ellipsis: {
+      tooltip: props.data.desc,
+      rows: 2
+    },
+    className: "spark-flow-node-desc"
+  }, props.data.desc), !props.disableShowSourceHandle && /*#__PURE__*/React.createElement(SourceHandle, {
+    nodeType: props.type,
+    nodeId: props.id,
+    handleId: props.id,
+    parentId: props.parentId
+  }), !props.disableShowTargetHandle && /*#__PURE__*/React.createElement(TargetHandle, {
+    handleId: props.id
+  }), props.children, props.hasFailBranch && /*#__PURE__*/React.createElement("div", {
+    className: 'spark-flow-judge-branch flex-justify-between items-center'
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "spark-flow-fail-branch-label"
+  }, $i18n.get({
+    id: 'spark-flow.components.BaseNode.index.whenError',
+    dm: '当异常时'
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "spark-flow-fail-branch-label-right"
+  }, $i18n.get({
+    id: 'spark-flow.components.BaseNode.index.errorBranch',
+    dm: '异常分支'
+  })), /*#__PURE__*/React.createElement(SourceHandle, {
+    className: "spark-flow-fail-branch-handle spark-flow-judge-branch-handle",
+    nodeType: props.type,
+    nodeId: props.id,
+    parentId: props.parentId,
+    handleId: "".concat(props.id, "_fail")
+  })), nodeResult && showResults && /*#__PURE__*/React.createElement(NodeResultPanel, {
+    data: nodeResult,
+    onNodeClick: handleNodeClickByNodeId
+  })));
+}
+export var GroupNode = /*#__PURE__*/memo(function (props) {
+  var isDragging = useStore(function (state) {
+    return state.isDragging;
+  });
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hovered = _useState2[0],
+    setHovered = _useState2[1];
+  var setIsDragging = useStore(function (store) {
+    return store.setIsDragging;
+  });
+  var _useNodesInteraction2 = useNodesInteraction(),
+    onAddNewNode = _useNodesInteraction2.onAddNewNode;
+  var onDrop = function onDrop(event) {
+    setHovered(false);
+    setIsDragging(false);
+    event.preventDefault();
+    event.stopPropagation();
+    var type = event.dataTransfer.getData('application/reactflow');
+    if (typeof type === 'undefined' || !type) {
+      return;
+    }
+    onAddNewNode({
+      type: type,
+      parentId: props.id,
+      parentNodeType: props.type
+    }, {
+      x: event.clientX,
+      y: event.clientY
+    });
+  };
+  var children = props.children,
+    extraProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(BaseNode, _extends({
+    className: classNames('spark-flow-node-container-group', {
+      'spark-flow-node-container-dragging': isDragging,
+      'spark-flow-node-container-hovered': hovered
+    })
+  }, extraProps), props.children, /*#__PURE__*/React.createElement("div", {
+    onDrop: onDrop,
+    onDragLeave: function onDragLeave(event) {
+      event.preventDefault();
+      setHovered(false);
+    },
+    onDragEnter: function onDragEnter(event) {
+      event.preventDefault();
+      setHovered(true);
+    },
+    className: 'spark-flow-group-node-sub-flow relative'
+  }, /*#__PURE__*/React.createElement(Background, null)), /*#__PURE__*/React.createElement(NodeResizer, {
+    nodeId: props.id
+  }));
+});
+export default /*#__PURE__*/memo(BaseNode);

package/dist/components/base-node/index.less

@@ -0,0 +1,258 @@
+@import '../../index.less';
+
+.spark-flow-node-container {
+  --angle: 0deg;
+  border: 1px solid e('var(--@{ant-prefix}-color-border-secondary)');
+  background: e('var(--@{ant-prefix}-color-bg-base)');
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  gap: 12px;
+  border-radius: 12px;
+  position: relative;
+  transition: 0.4s ease-in-out;
+  width: auto;
+  height: auto;
+  min-height: 58px;
+
+  &.spark-flow-node-container-group {
+    min-width: 320px;
+    width: 100%;
+    height: 100%;
+    padding: 16px;
+
+    .spark-flow-group-node-sub-flow {
+      flex: 1;
+
+      .react-flow__background {
+        border-radius: 6px;
+        z-index: 1;
+        border: 1px solid e('var(--@{ant-prefix}-color-border-secondary)');
+      }
+    }
+
+    &.spark-flow-node-container-hovered {
+      box-shadow: 0px 2px 8px 0px rgba(38, 36, 76, 0.3);
+      border-color: e('var(--@{ant-prefix}-color-primary)');
+    }
+  }
+
+  &-success {
+    border-color: e('var(--@{ant-prefix}-color-success)');
+  }
+
+  &-fail {
+    border-color: e('var(--@{ant-prefix}-color-error)');
+  }
+
+  @keyframes rotate {
+    to {
+      --angle: 360deg;
+    }
+  }
+
+  &.spark-flow-node-container-executing {
+    border: 2px solid transparent;
+    background:
+      linear-gradient(
+          e('var(--@{ant-prefix}-color-bg-base)'),
+          e('var(--@{ant-prefix}-color-bg-base)')
+        )
+        padding-box,
+      conic-gradient(
+          from var(--angle),
+          e('var(--@{ant-prefix}-color-primary)') 0deg,
+          transparent 90deg,
+          transparent 270deg,
+          e('var(--@{ant-prefix}-color-primary)') 360deg
+        )
+        border-box;
+    animation: rotate 2s linear infinite;
+  }
+
+  .spark-flow-node-label {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+  }
+
+  .spark-flow-source-handle,
+  .spark-flow-target-handle {
+    width: 10px;
+    height: 10px;
+    background: e('var(--@{ant-prefix}-color-bg-base)');
+    border: 1px solid e('var(--@{ant-prefix}-color-primary)');
+    border-radius: 50%;
+    transition-duration: 0.2s;
+
+    &-add-btn {
+      color: e('var(--@{ant-prefix}-color-bg-base)');
+      font-size: 16px;
+      height: 16px;
+      display: none;
+      pointer-events: none;
+    }
+  }
+
+  .spark-flow-fail-branch-handle {
+    border-color: e('var(--@{ant-prefix}-color-orange)');
+  }
+
+  &:hover {
+    box-shadow: 0px 4px 36px 0px rgba(60, 52, 197, 0.08);
+    .spark-flow-target-handle {
+      box-shadow: 0 0 0 2px rgb(105 83 245 / 15%);
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  .spark-flow-target-handle-full {
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    transform: none;
+    background: transparent;
+    border-radius: 0;
+    z-index: 100;
+    border: none;
+  }
+
+  .spark-flow-source-handle.spark-flow-source-handle-open,
+  &:hover .spark-flow-source-handle {
+    background: e('var(--@{ant-prefix}-color-primary)');
+    width: 16px;
+    height: 16px;
+    border-width: 0;
+
+    .spark-flow-source-handle-add-btn {
+      display: block;
+    }
+  }
+
+  &:hover .spark-flow-fail-branch-handle,
+  .spark-flow-fail-branch-handle.spark-flow-source-handle-open {
+    background: e('var(--@{ant-prefix}-color-orange-hover)');
+    width: 16px;
+    height: 16px;
+    border-width: 0;
+
+    .spark-flow-source-handle-add-btn {
+      display: block;
+    }
+  }
+}
+
+.react-flow__node.selected
+  .spark-flow-node-container:not(
+    .spark-flow-node-container-success,
+    .spark-flow-node-container-fail,
+    .spark-flow-node-container-executing,
+    .spark-flow-node-container-stop,
+    .spark-flow-node-container-wait
+  ) {
+  border-color: e('var(--@{ant-prefix}-color-primary)');
+  box-shadow:
+    0 0 0 2px rgb(105 83 245 / 15%),
+    0 4px 36px 0 rgb(60 52 197 / 8%);
+}
+
+.react-flow__node:has(div.isDraggingAdd) {
+  pointer-events: none !important;
+}
+
+.spark-flow-judge-branch {
+  color: e('var(--@{ant-prefix}-color-text-secondary)');
+  background: e('var(--@{ant-prefix}-color-fill-tertiary)');
+  border-radius: 6px;
+  padding: 0 8px;
+  font-size: 12px;
+  line-height: 24px;
+  height: 24px;
+  position: relative;
+
+  .spark-flow-judge-branch-handle {
+    right: -16px;
+  }
+
+  .spark-flow-fail-branch-label,
+  .spark-flow-fail-branch-label-right {
+    font-size: 12px;
+    line-height: 20px;
+  }
+
+  .spark-flow-fail-branch-label {
+    color: e('var(--@{ant-prefix}-color-text-tertiary)');
+  }
+
+  .spark-flow-fail-branch-label-right {
+    font-weight: 500;
+    color: e('var(--@{ant-prefix}-color-text-secondary)');
+  }
+}
+
+.spark-flow-node-copy-btn {
+  &-icon {
+    color: e('var(--@{ant-prefix}-color-text-tertiary)');
+    opacity: 0;
+    transition: 0.4s ease-in-out;
+  }
+
+  &-tag {
+    line-height: 20px;
+    font-size: 12px;
+    font-weight: 500;
+    background: e('var(--@{ant-prefix}-color-mauve-bg)');
+    color: e('var(--@{ant-prefix}-color-mauve)');
+    padding: 0 4px;
+    border-radius: 4px;
+    margin: 0;
+    align-items: center;
+    display: flex;
+
+    > .anticon + span {
+      margin-inline-start: 4px;
+    }
+  }
+}
+
+.spark-flow-node-dropdown {
+  .@{ant-prefix}-dropdown-menu-item:hover {
+    .spark-flow-node-copy-btn-icon {
+      opacity: 1;
+    }
+  }
+}
+
+.spark-flow-status-icon {
+  font-size: 20px;
+  &-success {
+    color: e('var(--@{ant-prefix}-color-success)');
+  }
+
+  &-fail {
+    color: e('var(--@{ant-prefix}-color-error)');
+  }
+
+  &-executing {
+    color: e('var(--@{ant-prefix}-color-primary)');
+    animation: executing-animation 3s linear infinite;
+  }
+}
+
+@keyframes executing-animation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spark-flow-node-desc {
+  font-size: 14px;
+  line-height: 24px;
+  color: e('var(--@{ant-prefix}-color-text-secondary)');
+  margin: 0 !important;
+}

package/dist/components/branch-title-header/index.d.ts

@@ -0,0 +1,12 @@
+import { IBranchItem } from "../../types/work-flow";
+import React from 'react';
+import './index.less';
+export interface IBranchTitleHeaderProps {
+    data: IBranchItem;
+    onChange: (data: Partial<IBranchItem>) => void;
+    deleteBranchItem: () => void;
+    branches: IBranchItem[];
+    disabled?: boolean;
+}
+declare const _default: React.NamedExoticComponent<IBranchTitleHeaderProps>;
+export default _default;