strategy-panel 1.0.1 → 1.0.2

package/lib/assets/variate.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 30 30" version="1.1">
+  <title>变量</title>
+  <g id="全局样式" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.8">
+    <g id="Icons" transform="translate(-576.000000, -1449.000000)" fill="#323232" fill-rule="nonzero">
+      <g id="变量" transform="translate(576.000000, 1449.000000)">
+        <path d="M28.3875,0 L1.6125,0 C0.721875,0 0,0.721875 0,1.6125 L0,28.3875 C0,29.278125 0.721875,30 1.6125,30 L15.8625,30 C16.753125,30 17.475,29.278125 17.475,28.3875 C17.475,27.496875 16.753125,26.775 15.8625,26.775 L3.225,26.775 L3.225,3.225 L26.775,3.225 L26.775,26.775 L24.825,26.775 C23.934375,26.775 23.2125,27.496875 23.2125,28.3875 C23.2125,29.278125 23.934375,30 24.825,30 L28.3875,30 C29.278125,30 30,29.278125 30,28.3875 L30,1.6125 C30,0.721875 29.278125,0 28.3875,0 Z" id="路径"></path>
+        <path d="M10.0021391,11.5414235 C10.0021391,11.0038866 10.1369467,10.600734 10.6761771,10.4663498 C11.6198302,10.1975813 12.4286758,9.79442871 13.3723289,10.0631971 C14.1811744,10.1975813 14.7204048,10.600734 15.1248275,11.5414235 C15.2596351,12.0789603 15.3944427,12.7508813 15.6640579,13.2884182 C15.7992442,13.154034 15.7992442,13.0196498 15.9336731,12.8852656 C16.3380959,12.2133445 16.7425186,11.5414235 17.281749,10.8695024 C17.5513642,10.600734 17.8209793,10.1975813 18.2254021,10.0631971 C18.8994401,9.6600445 19.573478,9.92881292 19.9779008,10.4663498 C20.3823235,11.0038866 20.3823235,11.9445761 19.8430932,12.4821129 C19.3038628,13.154034 18.6298249,13.2884182 17.9557869,13.154034 C17.8209793,13.154034 17.5513642,13.154034 17.4165566,13.0196498 C17.1469414,12.8852656 16.8773262,13.0196498 16.607711,13.2884182 C16.4729034,13.5571866 16.2032883,13.825955 16.0684807,14.0947235 C16.0684807,14.2291077 15.9336731,14.3634919 16.0684807,14.4978761 C16.3380959,15.5729498 16.607711,16.6480235 16.8773262,17.5887129 C17.1469414,18.5294024 17.8209793,18.932555 18.7646325,18.6637866 C19.0342476,18.6637866 19.1690552,18.5294024 19.4386704,18.5294024 C19.4386704,19.2013235 19.3038628,19.3357077 18.7646325,19.6044761 C17.9557869,20.0076287 17.0121338,20.2763972 16.0684807,20.1420129 C15.2596351,20.0076287 14.5855972,19.6044761 14.315982,18.6637866 C14.1811744,18.1262498 14.0463668,17.4543287 13.7767517,16.7824077 C13.6419441,16.9167919 13.6419441,17.0511761 13.5071365,17.1855603 C13.1027137,17.8574814 12.6982909,18.6637866 12.1590606,19.3357077 C11.8894454,19.7388603 11.4850226,20.0076287 11.0805999,20.1420129 C10.4065619,20.4107814 9.73252397,20.1420129 9.46290879,19.6044761 C9.19329361,19.0669393 9.19329361,18.1262498 9.59771638,17.5887129 C10.1369467,16.9167919 10.8109847,16.7824077 11.6198302,16.9167919 C11.7546378,16.9167919 11.8894454,16.9167919 12.024253,17.0511761 C12.4286758,17.3199445 12.6982909,17.1855603 12.8330985,16.7824077 C12.9679061,16.5136393 13.2375213,16.2448708 13.3723289,15.9761024 C13.5071365,15.8417182 13.5071365,15.707334 13.3723289,15.5729498 C13.1027137,14.6322603 12.9679061,13.6915708 12.6982909,12.8852656 C12.2938682,11.6758077 11.7546378,11.272655 10.6761771,11.6758077 C10.4065619,11.5414235 10.2717543,11.5414235 10.0021391,11.5414235 L10.0021391,11.5414235 Z M20.8382458,21.6202393 C21.9167066,19.4700919 22.5907445,17.3199445 22.5907445,14.9010287 C22.5907445,12.4821129 22.1863217,10.3319656 21.107861,8.18181818 L22.7255521,8.18181818 C22.8603597,8.18181818 22.8603597,8.31620239 22.8603597,8.31620239 C24.2084356,10.600734 24.7476659,13.154034 24.4780508,15.9757249 C24.2084356,17.9914881 23.39959,19.7384828 22.4559369,21.3514708 C22.4559369,21.4858551 22.3211293,21.4858551 22.1863217,21.4858551 C21.781899,21.6202393 21.3774762,21.6202393 20.8382458,21.6202393 L20.8382458,21.6202393 Z M7.92852578,8.18181818 C5.90641193,12.7508813 6.04121952,17.1855603 8.33294855,21.6202393 L6.85006506,21.6202393 C6.85006506,21.6202393 6.71525747,21.6202393 6.71525747,21.4858551 C5.77160435,19.8732445 4.96275881,18.260634 4.69314363,16.379255 C4.28872086,13.5571866 4.69314363,10.8695024 6.17602711,8.4505866 C6.3108347,8.31620239 6.44564229,8.18181818 6.58044988,8.18181818 L7.92852578,8.18181818 L7.92852578,8.18181818 Z M18.2727362,28.3768207 C18.2726458,28.9567602 18.5830195,29.4926678 19.0868832,29.7825701 C19.5906916,30.0724766 20.2113687,30.0724766 20.7151771,29.7825701 C21.218915,29.4925424 21.5292426,28.9567143 21.5293241,28.3768207 C21.5293241,27.7966282 21.2191909,27.2609788 20.7151771,26.9710713 C20.2113687,26.6811648 19.5906916,26.6811648 19.0868832,26.9710713 C18.5830195,27.2609735 18.2726458,27.7968812 18.2727362,28.3768207 L18.2727362,28.3768207 Z" id="形状"></path>
+      </g>
+    </g>
+  </g>
+</svg>

package/lib/components/canvas/component-tree-panel/category-tree/category-type.d.ts

@@ -0,0 +1 @@
+export declare const componentsData: any[];

package/lib/components/canvas/component-tree-panel/category-tree/category-type.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.componentsData = void 0;
+
+var _nodeTypes = require("../../../../packages/graph-canvas/node-types");
+
+var _variate = _interopRequireDefault(require("../../../../assets/variate.svg"));
+
+var _lock = _interopRequireDefault(require("../../../../assets/lock.svg"));
+
+var _decive = _interopRequireDefault(require("../../../../assets/decive.svg"));
+
+var _time = _interopRequireDefault(require("../../../../assets/time.svg"));
+
+var _hand = _interopRequireDefault(require("../../../../assets/hand.svg"));
+
+var _relation = _interopRequireDefault(require("../../../../assets/relation.svg"));
+
+var _logical = _interopRequireDefault(require("../../../../assets/logical.svg"));
+
+var _condition = _interopRequireDefault(require("../../../../assets/condition.svg"));
+
+var _alarm = _interopRequireDefault(require("../../../../assets/alarm.svg"));
+
+var _notice = _interopRequireDefault(require("../../../../assets/notice.svg"));
+
+var _order = _interopRequireDefault(require("../../../../assets/order.svg"));
+
+var _control = _interopRequireDefault(require("../../../../assets/control.svg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var componentsData = [{
+  id: _nodeTypes.COMPONENTS_TYPE.COMMONLY_USED,
+  name: '通用组件',
+  isDir: true,
+  children: [{
+    id: _nodeTypes.COMMONLY_USED.VARIATE,
+    name: '变量',
+    imgUrl: _variate.default
+  }, {
+    id: _nodeTypes.COMMONLY_USED.LOCKED,
+    name: '服务锁定',
+    imgUrl: _lock.default
+  }]
+}, {
+  id: _nodeTypes.COMPONENTS_TYPE.SCENE_DISPLAY,
+  name: '场景触发',
+  isDir: true,
+  children: [{
+    id: _nodeTypes.SCENE_DISPLAY.EQUIPMENT,
+    name: '设备触发',
+    imgUrl: _decive.default,
+    number: 1
+  }, {
+    id: _nodeTypes.SCENE_DISPLAY.TIME,
+    name: '时间触发',
+    imgUrl: _time.default
+  }, {
+    id: _nodeTypes.SCENE_DISPLAY.MANUAL,
+    name: '手动按钮',
+    imgUrl: _hand.default
+  }]
+}, {
+  id: _nodeTypes.COMPONENTS_TYPE.SIGN_OPERATION,
+  name: '运算符号',
+  isDir: true,
+  children: [{
+    id: _nodeTypes.SIGN_OPERATION.RELATION,
+    name: '关系运算',
+    imgUrl: _relation.default
+  }, {
+    id: _nodeTypes.SIGN_OPERATION.LOGICAL,
+    name: '逻辑运算',
+    imgUrl: _logical.default
+  }, {
+    id: _nodeTypes.SIGN_OPERATION.CONDITION,
+    name: '条件判断',
+    imgUrl: _condition.default
+  }]
+}, {
+  id: _nodeTypes.COMPONENTS_TYPE.MOTION_OPERATION,
+  name: '运动符号',
+  isDir: true,
+  children: [{
+    id: _nodeTypes.MOTION_OPERATION.ALARM,
+    name: '报警',
+    imgUrl: _alarm.default
+  }, {
+    id: _nodeTypes.MOTION_OPERATION.NOTICE,
+    name: '通知',
+    imgUrl: _notice.default
+  }, {
+    id: _nodeTypes.MOTION_OPERATION.ORDER,
+    name: '派发工单',
+    imgUrl: _order.default
+  }, {
+    id: _nodeTypes.MOTION_OPERATION.CONTROL,
+    name: '远程控制',
+    imgUrl: _control.default
+  }]
+}, {
+  id: _nodeTypes.COMPONENTS_TYPE.APPLICATION,
+  name: '应用组件',
+  isDir: true,
+  children: []
+}];
+exports.componentsData = componentsData;

package/lib/components/canvas/component-tree-panel/category-tree/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import './index.less';
+export interface paneDataItem {
+    id: string;
+    name: string;
+    isDir?: boolean;
+    imgUrl?: string;
+    number?: number;
+    applicationImgUrl?: string;
+    children?: paneDataItem[];
+}
+interface Props {
+    sortNum?: number;
+    panelData?: paneDataItem[];
+}
+declare const CategoryTree: React.FC<Props>;
+export default CategoryTree;

package/lib/components/canvas/component-tree-panel/category-tree/index.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _antd = require("antd");
+
+var _categoryType = require("./category-type");
+
+var _nodeTitle = require("./node-title");
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var Panel = _antd.Collapse.Panel;
+
+var getComponentsData = function getComponentsData(data) {
+  return data === null || data === void 0 ? void 0 : data.reduce(function (pre, next) {
+    var existentIndex = pre.findIndex(function (child) {
+      return child.id === next.id;
+    });
+
+    if (existentIndex > -1) {
+      var _pre$existentIndex;
+
+      var existentChildren = pre === null || pre === void 0 ? void 0 : (_pre$existentIndex = pre[existentIndex]) === null || _pre$existentIndex === void 0 ? void 0 : _pre$existentIndex.children;
+
+      if (existentChildren && next.children) {
+        var _next$children;
+
+        pre[existentIndex] = _objectSpread(_objectSpread({}, pre[existentIndex]), next);
+        (_next$children = next.children) === null || _next$children === void 0 ? void 0 : _next$children.forEach(function (item) {
+          var childIndex = existentChildren === null || existentChildren === void 0 ? void 0 : existentChildren.findIndex(function (child) {
+            return child.id === item.id;
+          });
+
+          if (childIndex > -1) {
+            existentChildren[childIndex] = item;
+          } else {
+            existentChildren.push(item);
+          }
+        });
+        pre[existentIndex].children = existentChildren;
+      } else {
+        pre[existentIndex] = _objectSpread(_objectSpread({}, pre[existentIndex]), next);
+      }
+    } else {
+      pre.push(next);
+    }
+
+    return pre;
+  }, _categoryType.componentsData);
+};
+
+var CategoryTree = function CategoryTree(props) {
+  var _props$sortNum = props.sortNum,
+      sortNum = _props$sortNum === void 0 ? 3 : _props$sortNum,
+      _props$panelData = props.panelData,
+      panelData = _props$panelData === void 0 ? [] : _props$panelData;
+
+  var isRowFirst = function isRowFirst(index) {
+    return (index + 1) % sortNum === 1;
+  };
+
+  var sortIndex = function sortIndex(index) {
+    return index % sortNum;
+  };
+
+  var currentPanelData = getComponentsData(panelData);
+  var omitEmptyData = currentPanelData === null || currentPanelData === void 0 ? void 0 : currentPanelData.filter(function (item) {
+    var _item$children;
+
+    return (item === null || item === void 0 ? void 0 : (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) > 0;
+  });
+  var defaultActiveKey = currentPanelData === null || currentPanelData === void 0 ? void 0 : currentPanelData.map(function (item) {
+    return item === null || item === void 0 ? void 0 : item.id;
+  });
+  console.log('xxxxcurrentPanelData', currentPanelData, _categoryType.componentsData);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "category-tree-list"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Collapse, {
+    className: "category-tree-collapse",
+    defaultActiveKey: defaultActiveKey
+  }, omitEmptyData === null || omitEmptyData === void 0 ? void 0 : omitEmptyData.map(function (item) {
+    var _item$children2, _item$children3;
+
+    return /*#__PURE__*/_react.default.createElement(Panel, {
+      header: item.name,
+      key: item.id
+    }, /*#__PURE__*/_react.default.createElement(_antd.Row, null, item !== null && item !== void 0 && (_item$children2 = item.children) !== null && _item$children2 !== void 0 && _item$children2.length ? item === null || item === void 0 ? void 0 : (_item$children3 = item.children) === null || _item$children3 === void 0 ? void 0 : _item$children3.map(function (child, index) {
+      return /*#__PURE__*/_react.default.createElement(_antd.Col, {
+        key: child.id,
+        span: 8
+      }, /*#__PURE__*/_react.default.createElement(_nodeTitle.NodeTitle, {
+        node: child,
+        isRowFirst: isRowFirst(index),
+        sortIndex: sortIndex(index)
+      }));
+    }) : /*#__PURE__*/_react.default.createElement("div", null)));
+  })));
+};
+
+var _default = CategoryTree;
+exports.default = _default;

package/lib/components/canvas/component-tree-panel/category-tree/index.less

@@ -0,0 +1,36 @@
+@import (reference) '../../../../style/theme-light';
+
+.category-tree-list {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: #fff;
+
+  .category-tree-collapse {
+    border-color: #DCDCDC;
+
+    .ant-collapse-header {
+      height: 36px;
+      font-size: 14px;
+      line-height: 1 !important;
+      background: @light-gray-bg;
+
+    }
+    .ant-collapse-header > div {
+      position: absolute;
+      right: 0;
+    }
+    .ant-collapse-header > div > span {
+      color: rgba(142, 142, 142, 0.52);
+    }
+    .ant-collapse-content > .ant-collapse-content-box {
+      padding-bottom: 5px;
+    }
+    .ant-collapse-content {
+      border-top: 1px solid #DCDCDC;
+    }
+    .ant-collapse-item {
+      border-bottom: 1px solid #DCDCDC;
+    }
+  }
+}

package/lib/components/canvas/component-tree-panel/category-tree/node-title.d.ts

@@ -0,0 +1,12 @@
+import type { ConnectDragPreview, ConnectDragSource } from 'react-dnd';
+import './node-title.less';
+interface Props {
+    node: any;
+    isRowFirst: boolean;
+    sortIndex: number;
+    isDragging: boolean;
+    connectDragSource: ConnectDragSource;
+    connectDragPreview: ConnectDragPreview;
+}
+export declare const NodeTitle: import("react-dnd").DndComponentClass<(props: Props) => JSX.Element, import("react-dnd").Omit<Props, "connectDragSource" | "connectDragPreview" | "isDragging">>;
+export {};

package/lib/components/canvas/component-tree-panel/category-tree/node-title.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NodeTitle = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDnd = require("react-dnd");
+
+var _marked = _interopRequireDefault(require("marked"));
+
+var _graph = require("../../../../packages/graph-common/graph");
+
+var _application = _interopRequireDefault(require("../../../../assets/application.svg"));
+
+require("./node-title.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_marked.default.setOptions({
+  gfm: true,
+  breaks: true
+});
+
+var InnerNodeTitle = function InnerNodeTitle(props) {
+  var _props$node = props.node,
+      node = _props$node === void 0 ? {} : _props$node,
+      isRowFirst = props.isRowFirst,
+      sortIndex = props.sortIndex,
+      connectDragPreview = props.connectDragPreview,
+      connectDragSource = props.connectDragSource;
+  var _node$name = node.name,
+      name = _node$name === void 0 ? '' : _node$name,
+      isDir = node.isDir,
+      imgUrl = node.imgUrl;
+  console.log('InnerNodeTitlexxxx', node); // 文件夹
+
+  if (isDir) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "folder"
+    }, name);
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "node-title-wrapper"
+  }, connectDragPreview(connectDragSource( /*#__PURE__*/_react.default.createElement("div", {
+    className: "node",
+    style: {
+      marginLeft: !isRowFirst ? -sortIndex : 0
+    }
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    alt: name,
+    className: "node-icon",
+    src: imgUrl || _application.default
+  })))), /*#__PURE__*/_react.default.createElement("span", {
+    className: "label"
+  }, name));
+};
+
+var NodeTitle = (0, _reactDnd.DragSource)(_graph.DRAGGABLE_ALGO_COMPONENT, {
+  beginDrag: function beginDrag(props) {
+    return {
+      component: props.node
+    };
+  }
+}, function (connect, monitor) {
+  return {
+    connectDragSource: connect.dragSource(),
+    connectDragPreview: connect.dragPreview(),
+    isDragging: monitor.isDragging()
+  };
+})(InnerNodeTitle);
+exports.NodeTitle = NodeTitle;

package/lib/components/canvas/component-tree-panel/category-tree/node-title.less

@@ -0,0 +1,113 @@
+.node-title-wrapper {
+  //&:hover .node {
+  //  transform: scale(1.1);
+  //}
+  .node {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 76px;
+    font-size: 12px;
+    background: #f2f2f2;
+    border: 1px dashed #a7a7a7;
+    cursor: move;
+    transition: all ease-in 0.3s;
+    .node-icon {
+      width: 23px;
+      height: 23px;
+    }
+  }
+  .label {
+    display: inline-block;
+    width: 100%;
+    margin-top: 5px;
+    overflow: hidden;
+    font-size: 12px;
+    white-space: nowrap;
+    text-align: center;
+    text-overflow: ellipsis;
+  }
+}
+
+.keyword {
+  color: #f50;
+}
+
+.folder {
+  display: flex;
+  justify-content: space-between;
+  padding-right: 8px;
+  padding-left: 15px;
+
+  .label {
+    display: inline-block;
+    width: 184px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .team {
+    float: right;
+  }
+}
+
+.ant-tree-title {
+  :local {
+    .doc {
+      position: absolute;
+      top: 0;
+      right: 5px;
+      color: transparent; // 防止拖拽时文档两个字被带进去
+      font-size: 10px;
+      line-height: 30px;
+    }
+  }
+}
+
+.popover {
+  width: 360px;
+  overflow: hidden;
+  .monitor {
+    margin: 8px 0;
+    b {
+      display: block;
+      line-height: 24px;
+    }
+  }
+  .doclink {
+    padding: 8px 0 0;
+  }
+  .description {
+    max-height: 600px;
+    padding: 8px 4px;
+    overflow: auto;
+    word-break: break-all;
+    background: #fbfbfb;
+    border-radius: 4px;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    a,
+    img,
+    p,
+    pre {
+      max-width: 100%;
+      margin: 0;
+      font-size: 12px !important;
+      line-height: 1.5em;
+      word-break: break-all !important;
+    }
+  }
+}
+
+.tag {
+  margin: 4px 0;
+  .label {
+    padding-right: 4px;
+  }
+}

package/lib/components/canvas/component-tree-panel/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { paneDataItem } from './category-tree';
+import './index.less';
+interface Props {
+    /**
+     * @description       classname
+     * @description.zh-CN classname
+     */
+    className?: string;
+    /**
+     * @description       available
+     * @description.zh-CN 菜单数据源头
+     */
+    panelData?: paneDataItem[];
+}
+declare const ComponentTreePanel: React.FC<Props>;
+export default ComponentTreePanel;

package/lib/components/canvas/component-tree-panel/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _categoryTree = _interopRequireDefault(require("./category-tree"));
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ComponentTreePanel = function ComponentTreePanel(props) {
+  var className = props.className,
+      _props$panelData = props.panelData,
+      panelData = _props$panelData === void 0 ? [] : _props$panelData;
+  console.log('ComponentTreePanelxxxxxxxx', panelData);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(className, 'node-source-tree-container', 'node-source-tree-shadow')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "tab-content-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_categoryTree.default, {
+    panelData: panelData
+  })));
+};
+
+var _default = ComponentTreePanel;
+exports.default = _default;

package/lib/components/canvas/component-tree-panel/index.less

@@ -0,0 +1,52 @@
+.node-source-tree-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  margin-top: -1px;
+
+  .tab-wrapper {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    height: 36px;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    background-color: #fff;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+
+    .tab {
+      display: flex;
+      flex-grow: 1;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      padding: 0 8px;
+      text-align: center;
+      cursor: pointer;
+
+      &:first-of-type {
+        border-right: 1px solid #f0f0f0;
+      }
+
+      &:hover {
+        color: #1890ff;
+      }
+
+      &.active {
+        color: #1890ff;
+        background-color: #f7f9fb;
+        cursor: default;
+      }
+    }
+  }
+
+  .tab-content-wrapper {
+    flex-grow: 1;
+    max-height: 100%;
+    overflow-y: auto;
+  }
+}
+
+.node-source-tree-shadow {
+  box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.3);
+}

package/lib/components/canvas/config-panel/components/condition-configuration/configure-modal/data-origin.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+declare type sourceType = 'device_attr' | 'device_event' | 'model_attr' | 'model_event';
+declare type relationItem = {
+    /**
+     * @description       type
+     * @description.zh-CN 类型：设备属性、设备事件、模式属性、模型事件
+     */
+    type: 'device' | 'model';
+    /**
+     * @description       type
+     * @description.zh-CN 类型：设备属性、设备事件、模式属性、模型事件
+     */
+    source: sourceType;
+    /**
+     * @description       targetId
+     * @description.zh-CN 设备id/模型id
+     */
+    targetId: number | string;
+    /**
+     * @description       targetName
+     * @description.zh-CN 设备名称/模型名称
+     */
+    targetName: string;
+    /**
+     * @description       modelId
+     * @description.zh-CN 属性id/事件id
+     */
+    modelId: number | string;
+    /**
+     * @description       modelName
+     * @description.zh-CN 属性名称/事件名称
+     */
+    modelName: string;
+};
+interface Props {
+    defaultValue?: 'fixed' | 'variable';
+    relationData: {
+        [key: string]: {
+            meterAttrList?: relationItem[];
+            meterEventList?: relationItem[];
+            meterModelAttrs?: relationItem[];
+            meterModelEvents?: relationItem[];
+        };
+    };
+    value?: any;
+    onChange?: (value: any) => void;
+}
+declare const DataOrigin: React.FC<Props>;
+export default DataOrigin;