@rxflow/group-bloodline 0.0.1-alpha.0

package/README.md

@@ -0,0 +1,41 @@
+# @rxflow/group-bloodline
+
+分组血缘关系图组件，支持节点分组展示。
+
+## 安装
+
+```bash
+npm install @rxflow/group-bloodline @rxflow/base
+# or
+pnpm add @rxflow/group-bloodline @rxflow/base
+```
+
+## 使用
+
+```tsx
+import GroupBloodlineFlow from '@rxflow/group-bloodline';
+
+function App() {
+  return (
+    <GroupBloodlineFlow
+      data={groupData}
+      // ... other props
+    />
+  );
+}
+```
+
+## 特性
+
+- 节点分组
+- 版本管理
+- 自动布局
+- 主题定制
+
+## API 文档
+
+访问 [完整文档](https://tree-graph.publib.cn/group-bloodline/examples) 查看详细 API。
+
+## License
+
+MIT

package/cjs/components/Connector.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @author: yanxianliang
+ * @date: 2025-07-05 15:19
+ * @desc: 连接器
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+import { BaseGroupBloodNode, SiblingNodes, VersionProps, InnerNodeData } from "..";
+import { BloodlineDirection } from "../constants";
+export declare const Connector: ({ direction, version, source, siblings, }: {
+    direction: BloodlineDirection;
+    version: VersionProps;
+    source: BaseGroupBloodNode;
+    siblings?: SiblingNodes | undefined;
+} & InnerNodeData) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Connector.d.ts.map

package/cjs/components/Connector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Connector.d.ts","sourceRoot":"","sources":["Connector.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EACL,kBAAkB,EAKlB,YAAY,EACZ,YAAY,EACZ,aAAa,EACd,WAAgC;AAUjC,OAAO,EAAC,kBAAkB,EAAoB,MAAM,cAAc,CAAC;AAyCnE,eAAO,MAAM,SAAS;eAOP,kBAAkB;aACpB,YAAY;YACb,kBAAkB;;oEA2F7B,CAAA"}

package/cjs/components/Connector.js

@@ -0,0 +1,152 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Connector = void 0;
+var _base = require("@rxflow/base");
+var _react = require("@xyflow/react");
+var _react2 = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _constants = require("../constants");
+var _keys = require("../utils/keys");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * @author: yanxianliang
+ * @date: 2025-07-05 15:19
+ * @desc: 连接器
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+
+function collapseVersionsNode(direction, node) {
+  for (const version of node.versions) {
+    version[direction] && (version[direction].state = 'collapsed');
+  }
+}
+function collapseGroup(direction, node) {
+  const list = node.state?.list;
+  if (list) {
+    collapseSiblings(direction, list);
+  }
+}
+function collapseSiblings(direction, siblings) {
+  for (const sibling of siblings) {
+    const {
+      type
+    } = sibling;
+    switch (type) {
+      case _constants.BloodlineNodeType.Service:
+        collapseVersionsNode(direction, sibling);
+        break;
+      case _constants.BloodlineNodeType.ServiceGroup:
+        collapseGroup(direction, sibling);
+        break;
+    }
+  }
+}
+function getStateWithDefault(config) {
+  const {
+    state = 'collapsed',
+    count,
+    list,
+    ...extra
+  } = config || {};
+  return {
+    ...extra,
+    state,
+    count,
+    list
+  };
+}
+const Connector = ({
+  direction,
+  version,
+  source,
+  siblings
+}) => {
+  const update = (0, _ahooks.useUpdate)();
+  const triggerLayout = (0, _base.useForceUpdate)();
+  const getProps = (0, _base.useGetProps)();
+  const config = version[direction];
+  const connectorState = (0, _react2.useMemo)(() => {
+    return getStateWithDefault(config);
+  }, [config?.state]);
+  const {
+    count,
+    state
+  } = connectorState;
+  const notShow = !config || config.count === 0;
+  const position = direction === _constants.BloodlineDirection.upstream ? _react.Position.Left : _react.Position.Right;
+  const collapseOthers = (0, _ahooks.useMemoizedFn)(() => {
+    if (siblings) {
+      collapseSiblings(direction, siblings);
+    }
+  });
+  const onClick = (0, _ahooks.useMemoizedFn)(() => {
+    const {
+      state,
+      list
+    } = connectorState;
+    if (state === 'loading') {
+      return;
+    }
+    if (state === 'collapsed') {
+      if (list) {
+        // 数据已经缓存了，不需要再次加载
+        collapseOthers();
+        config.state = 'expanded'; // 展开状态，关联的节点需要显示，在布局函数中处理
+        triggerLayout();
+      } else {
+        config.state = 'loading';
+        update(); // 变成加载状态
+        getProps().getRelation?.(direction, source, version).then(({
+          count,
+          list
+        }) => {
+          // 执行互斥逻辑，将同级所有节点展开项全部关闭
+          if (config.state === 'loading') {
+            // 可能已经被收起来了
+            collapseOthers();
+            config.state = 'expanded';
+            config.count = count;
+            config.list = list;
+            triggerLayout();
+          } else {
+            config.count = count;
+            config.list = list;
+            update();
+          }
+        }).catch(() => {
+          // 异常兜底，
+          config.state = 'collapsed'; // 支持重试
+          update();
+        });
+      }
+    } else {
+      config.state = 'collapsed';
+      triggerLayout();
+    }
+  });
+  const handleType = direction === _constants.BloodlineDirection.upstream ? 'target' : 'source';
+  if (notShow) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_base.HiddenHandle, {
+      type: handleType,
+      position: position,
+      id: (0, _keys.getConnectorId)(direction, version.id)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.CollapseButton, {
+      direction: 'vertical',
+      collapsed: state === 'collapsed',
+      position: position,
+      loading: state === 'loading',
+      onCollapse: onClick,
+      count: count
+    })]
+  });
+};
+exports.Connector = Connector;

package/cjs/components/Version.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @author: yanxianliang
+ * @date: 2025-07-05 15:18
+ * @desc: 版本 Item
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+import { VersionProps } from "..";
+import "../style/index.less";
+export declare const Version: (props: VersionProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Version.d.ts.map

package/cjs/components/Version.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Version.d.ts","sourceRoot":"","sources":["Version.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAC,YAAY,EAAC,WAAgC;AAErD,OAAO,qBAAqB,CAAC;AAM7B,eAAO,MAAM,OAAO,UAAW,YAAY,4CAe1C,CAAA"}

package/cjs/components/Version.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Version = void 0;
+var _classcat = _interopRequireDefault(require("classcat"));
+require("../style/index.less");
+var _getVersion = require("../utils/getVersion");
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * @author: yanxianliang
+ * @date: 2025-07-05 15:18
+ * @desc: 版本 Item
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+
+const prefixCls = 'rxflow-group-bloodline';
+const Version = props => {
+  const {
+    version,
+    bloodlineVersion,
+    status = '-',
+    hasChanged,
+    hit
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classcat.default)([`${prefixCls}-version`, {
+      [`${prefixCls}-hit`]: hit,
+      [`${prefixCls}-changed-version`]: hasChanged
+    }]),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: `${prefixCls}-node-sub_title`,
+      children: ["\u7248\u672C\u53F7\uFF1A", (0, _getVersion.getVersion)(version), "(", status, ")"]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: `${prefixCls}-node-desc`,
+      children: ["\u8840\u7F18\u7248\u672C\u53F7\uFF1A", (0, _getVersion.isEmpty)(bloodlineVersion) ? '-' : bloodlineVersion]
+    })]
+  });
+};
+exports.Version = Version;

package/cjs/constants.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @author: yanxianliang
+ * @date: 2025-07-05 15:48
+ * @desc: 常量
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+export declare enum BloodlineDirection {
+    upstream = "upstream",
+    downstream = "downstream"
+}
+export declare enum BloodlineNodeType {
+    Service = "service",// 服务节点，支持单版本和多版本。
+    ServiceGroup = "service-group",
+    Toolbar = "toolbar"
+}
+export declare const groupPageSize = 5;
+export declare enum Align {
+    center = "center",
+    top = "top"
+}
+//# sourceMappingURL=constants.d.ts.map

package/cjs/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["constants.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,oBAAY,kBAAkB;IAC5B,QAAQ,aAAa;IACrB,UAAU,eAAe;CAC1B;AAGD,oBAAY,iBAAiB;IAC3B,OAAO,YAAY,CAAE,kBAAkB;IACvC,YAAY,kBAAkB;IAC9B,OAAO,YAAY;CACpB;AAGD,eAAO,MAAM,aAAa,IAAI,CAAC;AAG/B,oBAAY,KAAK;IACf,MAAM,WAAW;IACjB,GAAG,QAAQ;CACZ"}

package/cjs/constants.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.groupPageSize = exports.BloodlineNodeType = exports.BloodlineDirection = exports.Align = void 0;
+/**
+ * @author: yanxianliang
+ * @date: 2025-07-05 15:48
+ * @desc: 常量
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+let BloodlineDirection = exports.BloodlineDirection = /*#__PURE__*/function (BloodlineDirection) {
+  BloodlineDirection["upstream"] = "upstream";
+  BloodlineDirection["downstream"] = "downstream";
+  return BloodlineDirection;
+}({});
+let BloodlineNodeType = exports.BloodlineNodeType = /*#__PURE__*/function (BloodlineNodeType) {
+  BloodlineNodeType["Service"] = "service";
+  BloodlineNodeType["ServiceGroup"] = "service-group";
+  BloodlineNodeType["Toolbar"] = "toolbar";
+  return BloodlineNodeType;
+}({});
+const groupPageSize = exports.groupPageSize = 5;
+let Align = exports.Align = /*#__PURE__*/function (Align) {
+  Align["center"] = "center";
+  Align["top"] = "top";
+  return Align;
+}({});

package/cjs/index.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from "react";
+import { IGroupBloodlineFlowProps } from "./types";
+declare const GroupBloodlineFlow: (props: PropsWithChildren<IGroupBloodlineFlowProps>) => import("react/jsx-runtime").JSX.Element;
+export default GroupBloodlineFlow;
+export * from "./types";
+export * from "./constants";
+//# sourceMappingURL=index.d.ts.map

package/cjs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAC,iBAAiB,EAAU,MAAM,OAAO,CAAC;AAGjD,OAAO,EAA4B,wBAAwB,EAAC,MAAM,SAAS,CAAC;AAkC5E,QAAA,MAAM,kBAAkB,iGAA6F,CAAC;AAEtH,eAAe,kBAAkB,CAAC;AAElC,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC"}

package/cjs/index.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+var _react = require("react");
+var _base = require("@rxflow/base");
+var _nodes = require("./nodes");
+var _bloodLayout = require("./utils/bloodLayout");
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+var _constants = require("./constants");
+Object.keys(_constants).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _constants[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _constants[key];
+    }
+  });
+});
+/*
+ * @author: yanxianliang
+ * @date: 2025-06-01 18:36
+ * @desc: 血缘视图
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+
+const fitViewOptions = {
+  padding: 2,
+  minZoom: 1,
+  maxZoom: 1
+};
+const omitProps = ['root', 'PropertyPopover', 'getRelation', 'getChildren'];
+const usePropsTransformer = props => {
+  const {
+    root
+  } = props;
+  const nodes = (0, _react.useMemo)(() => {
+    return root ? [root] : [];
+  }, [root]);
+  return {
+    ...props,
+    nodes,
+    nodeTypes: _nodes.nodeTypes,
+    edgesFocusable: false,
+    fitViewOptions,
+    autoCenter: true,
+    layout: _bloodLayout.bloodLayout,
+    omitProps,
+    selectionOnDrag: false,
+    nodesDraggable: false
+  };
+};
+const GroupBloodlineFlow = (0, _base.createFlow)(_base.Flow, usePropsTransformer);
+var _default = exports.default = GroupBloodlineFlow;

package/cjs/nodes/DepthToolNode/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { NodeProps, Node } from "@xyflow/react";
+import { DepthToolbarData } from "../../types";
+import "./index.less";
+declare const ToolbarNode: import("react").MemoExoticComponent<(props: NodeProps<Node<DepthToolbarData>>) => import("react/jsx-runtime").JSX.Element | null>;
+export default ToolbarNode;
+//# sourceMappingURL=index.d.ts.map

package/cjs/nodes/DepthToolNode/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAC,gBAAgB,EAA2B,MAAM,aAAa,CAAC;AAGvE,OAAO,cAAc,CAAC;AAuBtB,QAAA,MAAM,WAAW,8CAAgB,UAAU,KAAK,gBAAgB,CAAC,CAAC,oDA+FG,CAAC;AAEtE,eAAe,WAAW,CAAC"}

package/cjs/nodes/DepthToolNode/index.js

@@ -0,0 +1,152 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _QuestionCircleOutlined = _interopRequireDefault(require("@ant-design/icons/QuestionCircleOutlined"));
+var _antd = require("antd");
+require("./index.less");
+var _react = require("react");
+var _lodash = require("lodash");
+var _ = require("../..");
+var _base = require("@rxflow/base");
+var _ahooks = require("ahooks");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/*
+ * @author: yanxianliang
+ * @date: 2025-06-04 13:10
+ * @desc: DepthToolNode
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+
+function numberToChinese(num) {
+  const chars = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
+  const absNum = Math.abs(num);
+  if (absNum === 0) return chars[0];
+  if (absNum < 10) return chars[absNum];
+  if (absNum < 20) return '十' + (absNum % 10 === 0 ? '' : chars[absNum % 10]);
+  if (absNum < 100) {
+    const ten = Math.floor(absNum / 10);
+    const unit = absNum % 10;
+    return chars[ten] + '十' + (unit === 0 ? '' : chars[unit]);
+  }
+  // 超过99可自行扩展
+  return String(num);
+}
+const ToolbarNode = /*#__PURE__*/(0, _react.memo)(props => {
+  const {
+    data
+  } = props;
+  const {
+    depth,
+    count,
+    direction,
+    siblings = []
+  } = data || {};
+  const triggerLayout = (0, _base.useForceUpdate)();
+  const getProps = (0, _base.useGetProps)();
+  const {
+    run: doLayout
+  } = (0, _ahooks.useDebounceFn)(() => {
+    triggerLayout();
+  }, {
+    wait: 200
+  });
+  const onExpandAll = (0, _ahooks.useMemoizedFn)(async () => {
+    // 隐藏的节点怎么处理
+    let waitRelayout = false;
+    let syncTasks = [];
+    for (const sibling of siblings) {
+      if (sibling.type === _.BloodlineNodeType.ServiceGroup) {
+        const expanded = (0, _lodash.get)(sibling, ['state', 'expanded'], false);
+        if (!expanded) {
+          if (sibling.state?.list) {
+            (0, _lodash.set)(sibling, ['state', 'expanded'], true);
+            waitRelayout = true;
+          } else {
+            // 发起请求
+            (0, _lodash.set)(sibling, ['state', 'expanded'], true);
+            (0, _lodash.set)(sibling, ['state', 'loading'], true);
+            waitRelayout = true;
+            syncTasks.push((async () => {
+              try {
+                const getChildren = getProps().getChildren;
+                const {
+                  total,
+                  list
+                } = await getChildren?.(sibling, _.groupPageSize, 1, direction);
+                (0, _lodash.set)(sibling, ['state', 'loading'], false);
+                (0, _lodash.set)(sibling, ['state', 'current'], 1);
+                (0, _lodash.set)(sibling, ['state', 'total'], total);
+                (0, _lodash.set)(sibling, ['state', 'list'], list);
+                doLayout();
+              } catch (e) {
+                (0, _lodash.set)(sibling, ['state', 'loading'], false);
+                doLayout();
+              }
+            })());
+          }
+        }
+      }
+    }
+    waitRelayout && doLayout();
+    await Promise.all(syncTasks);
+  });
+  const onCollapseAll = (0, _ahooks.useMemoizedFn)(() => {
+    let waitRelayout = false;
+    for (const sibling of siblings) {
+      if (sibling.type === _.BloodlineNodeType.ServiceGroup) {
+        const expanded = (0, _lodash.get)(sibling, ['state', 'expanded'], false);
+        if (expanded) {
+          (0, _lodash.set)(sibling, ['state', 'expanded'], false);
+          waitRelayout = true;
+        }
+      }
+    }
+    if (waitRelayout) {
+      triggerLayout();
+    }
+  });
+  if (!count || !depth) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: 'rxflow-dt-toolbar',
+    children: [direction === _.BloodlineDirection.upstream ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: 'rxflow-dt-label',
+        children: "\u4F9D\u8D56\u4E0A\u6E38"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
+        title: '表示 查询对象的产出或执行依赖这些上游业务对象',
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_QuestionCircleOutlined.default, {})
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: 'rxflow-dt-label',
+        children: "\u5F71\u54CD\u4E0B\u6E38"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
+        title: '表示 查询对象如果下线或修改逻辑，将影响这些下游业务对象的产出或执行',
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_QuestionCircleOutlined.default, {})
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      className: 'rxflow-dt-depth',
+      children: [numberToChinese(depth), "\u7EA7 \uFF08", count, "\uFF09"]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.LoadingButton, {
+      className: 'rxflow-dt-action',
+      type: 'link',
+      size: 'small',
+      onClick: onExpandAll,
+      children: "\u5168\u90E8\u5C55\u5F00"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
+      className: 'rxflow-dt-action',
+      type: 'link',
+      size: 'small',
+      onClick: onCollapseAll,
+      children: "\u5168\u90E8\u6536\u8D77"
+    })]
+  });
+}, (prevProps, nextProps) => (0, _lodash.isEqual)(prevProps.data, nextProps.data));
+var _default = exports.default = ToolbarNode;

package/cjs/nodes/DepthToolNode/index.less

@@ -0,0 +1,19 @@
+.rxflow-dt{
+  &-toolbar {
+    font-size: 12px;
+  }
+
+  &-label {
+    margin-right: 4px;
+  }
+
+  &-depth {
+    margin-left: 4px;
+  }
+
+  &-action {
+    font-size: 12px;
+    padding-left: 2px;
+    padding-right: 2px;
+  }
+}

package/cjs/nodes/Service/MultipleVersionService.d.ts

@@ -0,0 +1,6 @@
+import { InnerNodeData, MultipleVersionsNodeData } from "../..";
+import '../../style/index.less';
+export declare const MultipleVersionRender: (props: MultipleVersionsNodeData & InnerNodeData & {
+    measure?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MultipleVersionService.d.ts.map

package/cjs/nodes/Service/MultipleVersionService.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultipleVersionService.d.ts","sourceRoot":"","sources":["MultipleVersionService.tsx"],"names":[],"mappings":"AAQA,OAAO,EAGL,aAAa,EACb,wBAAwB,EACzB,cAAgC;AACjC,OAAO,wBAAwB,CAAC;AAQhC,eAAO,MAAM,qBAAqB,UAAW,wBAAwB,GAAG,aAAa,GAAG;IACtF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,4CAqDA,CAAA"}