@nokecy/qc-ui 0.0.1

package/dist/esm/dashboard/widget/selector/index.less

@@ -0,0 +1,434 @@
+.react-dashboard-widget-selector{
+  position:fixed;
+  top:50%;
+  left:50%;
+  transform:translate(-50%, -50%);
+  z-index:1006;
+  width:60%;
+  height:60%;
+  max-width:800px;
+  max-height:600px;
+  background:var(--component-background);
+}
+
+.react-dashboard-widget-wrap {
+  display: flex;
+  height:100%;
+  
+  .react-dashboard-widget-leftBar {
+    padding: 10px;
+    width: 180px;
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+    background: var(--component-background);
+    .react-dashboard-widget-searchIcon {
+      color: var(--text-color);
+    }
+
+    .react-dashboard-widget-item {
+      display: flex;
+      justify-content: space-between;
+      padding: 10px;
+
+      .react-dashboard-widget-Badge {
+
+          .ant-badge-count {
+            color: var(--text-color);
+            background-color: var(--component-background-1) !important;
+          }
+        
+      }
+
+      cursor: pointer;
+
+      &:hover {
+        background: var(--component-background-3);
+        font-weight: bold;
+      }
+    }
+
+    .react-dashboard-widget-active {
+      background: rgba(0, 0, 0, 0.03);
+      font-weight: bold;
+    }
+  }
+
+  .react-dashboard-widget-Layer {
+    flex: 1 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 10px;
+    background: rgba(0, 0, 0, 0.01);
+    &::-webkit-scrollbar {
+      width: 1px;
+      height: 1px;
+      overflow: auto;
+    }
+  
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--primary-color);
+      min-height: 25px;
+      min-width: 25px;
+  
+      &:hover {
+        background-color: #a8a8a8;
+      }
+  
+      &:active {
+        background-color: #787878;
+      }
+    }
+  
+    &::-webkit-scrollbar-track {
+      background-color: #f7f7f7;
+      border: 1px solid #efefef;
+    }
+
+      .react-dashboard-widget-waterfall {
+        width: 100%;
+      }
+
+      .ant-popover-inner-content {
+        background: rgba(0, 0, 0, 0.01);
+      }
+    
+
+    .react-dashboard-widget-item {
+      cursor: pointer;
+      height: auto;
+      margin-bottom: 10px;
+      width: 100%;
+      height: auto;
+      border-radius: 5px;
+      overflow: hidden;
+      // box-shadow: 0 0 0px rgba(255, 255, 255, 1);
+      transition: all 0.3s;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      -webkit-column-break-inside: avoid;
+      position: relative;
+      background: var(--component-background);
+      .react-dashboard-widget-shortcut {
+        width: 100%;
+        height: auto;
+      }
+
+      .react-dashboard-widget-mask {
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.5);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transition: all 0.3s;
+      }
+
+      &:hover {
+        transition: all 0.3s;
+
+        border: 1px solid var(--component-background-3);
+
+        .react-dashboard-widget-mask {
+          opacity: 1;
+          transition: all 0.3s;
+        }
+      }
+
+      .react-dashboard-widget-bottombar {
+        border-top: 1px solid rgba(0, 0, 0, 0.1);
+        width: 100%;
+
+        padding: 5px;
+
+        .react-dashboard-widget-iconWrap {
+          display: inline-block;
+          width: 28px;
+          height: 28px;
+          line-height: 28px;
+          text-align: center;
+          border-radius: 7px;
+          color: #fff;
+          margin-right: 5px;
+          font-size: 16px;
+        }
+
+        .react-dashboard-widget-name {
+          font-size: 16px;
+          flex: 1;
+          color: var(--text-color);
+          line-height: 28px;
+          font-weight: bold;
+          display: inline;
+        }
+
+        .react-dashboard-widget-description {
+          margin-top: 5px;
+        }
+      }
+    }
+  }
+}
+
+
+
+
+
+
+
+
+
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+.ant-modal {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  pointer-events: none;
+  position: relative;
+  top: 100px;
+  width: auto;
+  max-width: calc(100vw - 32px);
+  margin: 0 auto;
+  padding-bottom: 24px;
+}
+.ant-modal.ant-zoom-enter,
+.ant-modal.antzoom-appear {
+  transform: none;
+  opacity: 0;
+  -webkit-animation-duration: 0.3s;
+          animation-duration: 0.3s;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.ant-modal-mask {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.45);
+}
+.ant-modal-mask-hidden {
+  display: none;
+}
+.ant-modal-wrap {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  outline: 0;
+  -webkit-overflow-scrolling: touch;
+}
+.ant-modal-wrap {
+  z-index: 1000;
+}
+.ant-modal-title {
+  margin: 0;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 22px;
+  word-wrap: break-word;
+}
+.ant-modal-content {
+  position: relative;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 0;
+  border-radius: 2px;
+  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  pointer-events: auto;
+}
+.ant-modal-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 10;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.45);
+  font-weight: 700;
+  line-height: 1;
+  text-decoration: none;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+.ant-modal-close-x {
+  display: block;
+  width: 56px;
+  height: 56px;
+  font-size: 16px;
+  font-style: normal;
+  line-height: 56px;
+  text-align: center;
+  text-transform: none;
+  text-rendering: auto;
+}
+.ant-modal-close:focus,
+.ant-modal-close:hover {
+  color: rgba(0, 0, 0, 0.75);
+  text-decoration: none;
+}
+.ant-modal-header {
+  padding: 16px 24px;
+  color: rgba(0, 0, 0, 0.85);
+  background: #fff;
+  border-bottom: 1px solid #f0f0f0;
+  border-radius: 2px 2px 0 0;
+}
+.ant-modal-body {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5715;
+  word-wrap: break-word;
+}
+.ant-modal-footer {
+  padding: 10px 16px;
+  text-align: right;
+  background: transparent;
+  border-top: 1px solid #f0f0f0;
+  border-radius: 0 0 2px 2px;
+}
+.ant-modal-footer .ant-btn + .ant-btn:not(.ant-dropdown-trigger) {
+  margin-bottom: 0;
+  margin-left: 8px;
+}
+.ant-modal-open {
+  overflow: hidden;
+}
+.ant-modal-centered {
+  text-align: center;
+}
+.ant-modal-centered::before {
+  display: inline-block;
+  width: 0;
+  height: 100%;
+  vertical-align: middle;
+  content: '';
+}
+.ant-modal-centered .ant-modal {
+  top: 0;
+  display: inline-block;
+  text-align: left;
+  vertical-align: middle;
+}
+@media (max-width: 767px) {
+  .ant-modal {
+    max-width: calc(100vw - 16px);
+    margin: 8px auto;
+  }
+  .ant-modal-centered .ant-modal {
+    flex: 1;
+  }
+}
+.ant-modal-confirm .ant-modal-header {
+  display: none;
+}
+.ant-modal-confirm .ant-modal-body {
+  padding: 32px 32px 24px;
+}
+.ant-modal-confirm-body-wrapper::before {
+  display: table;
+  content: '';
+}
+.ant-modal-confirm-body-wrapper::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+.ant-modal-confirm-body .ant-modal-confirm-title {
+  display: block;
+  overflow: hidden;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 1.4;
+}
+.ant-modal-confirm-body .ant-modal-confirm-content {
+  margin-top: 8px;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+}
+.ant-modal-confirm-body > .anticon {
+  float: left;
+  margin-right: 16px;
+  font-size: 22px;
+}
+.ant-modal-confirm-body > .anticon + .ant-modal-confirm-title + .ant-modal-confirm-content {
+  margin-left: 38px;
+}
+.ant-modal-confirm .ant-modal-confirm-btns {
+  float: right;
+  margin-top: 24px;
+}
+.ant-modal-confirm .ant-modal-confirm-btns .ant-btn + .ant-btn {
+  margin-bottom: 0;
+  margin-left: 8px;
+}
+.ant-modal-confirm-error .ant-modal-confirm-body > .anticon {
+  color: #ff4d4f;
+}
+.ant-modal-confirm-warning .ant-modal-confirm-body > .anticon,
+.ant-modal-confirm-confirm .ant-modal-confirm-body > .anticon {
+  color: #faad14;
+}
+.ant-modal-confirm-info .ant-modal-confirm-body > .anticon {
+  color: #1890ff;
+}
+.ant-modal-confirm-success .ant-modal-confirm-body > .anticon {
+  color: #52c41a;
+}
+.ant-modal-wrap-rtl {
+  direction: rtl;
+}
+.ant-modal-wrap-rtl .ant-modal-close {
+  right: initial;
+  left: 0;
+}
+.ant-modal-wrap-rtl .ant-modal-footer {
+  text-align: left;
+}
+.ant-modal-wrap-rtl .ant-modal-footer .ant-btn + .ant-btn {
+  margin-right: 8px;
+  margin-left: 0;
+}
+.ant-modal-wrap-rtl .ant-modal-confirm-body {
+  direction: rtl;
+}
+.ant-modal-wrap-rtl .ant-modal-confirm-body > .anticon {
+  float: right;
+  margin-right: 0;
+  margin-left: 16px;
+}
+.ant-modal-wrap-rtl .ant-modal-confirm-body > .anticon + .ant-modal-confirm-title + .ant-modal-confirm-content {
+  margin-right: 38px;
+  margin-left: 0;
+}
+.ant-modal-wrap-rtl .ant-modal-confirm-btns {
+  float: left;
+}
+.ant-modal-wrap-rtl .ant-modal-confirm-btns .ant-btn + .ant-btn {
+  margin-right: 8px;
+  margin-left: 0;
+}
+.ant-modal-wrap-rtl.ant-modal-centered .ant-modal {
+  text-align: right;
+}

package/dist/esm/dashboard/widget/utils.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const getWidgetType: (i: string, widgets: any) => string;
+export declare const ConfigBar: (props: any) => JSX.Element;
+export declare const ConfigWrap: (props: any, widgets: any) => JSX.Element;

package/dist/esm/dashboard/widget/utils.js

@@ -0,0 +1,88 @@
+import { Drawer } from 'antd';
+import _ from 'lodash';
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { AiOutlineDelete } from 'react-icons/ai';
+import { FaCog } from 'react-icons/fa'; // import allWidgets from '../../widgets';
+//获取widget的类型
+
+export var getWidgetType = function getWidgetType(i, widgets) {
+  var allWidgets = widgets;
+  var widgetType = '';
+  Object.keys(allWidgets).map(function (key) {
+    if (i.indexOf(key) >= 0) {
+      widgetType = key;
+    }
+  });
+  return widgetType;
+}; //widget配置和删除按钮
+
+export var ConfigBar = function ConfigBar(props) {
+  var widgetKey = props.widgetKey,
+      editMode = props.editMode,
+      onDeleteWidget = props.onDeleteWidget,
+      _props$setConfigShow = props.setConfigShow,
+      setConfigShow = _props$setConfigShow === void 0 ? function () {} : _props$setConfigShow,
+      widgets = props.widgets;
+  var widgetType = getWidgetType(widgetKey, widgets);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, editMode && /*#__PURE__*/React.createElement("div", {
+    className: 'react-dashboard-mask'
+  }), editMode && _.get('widgets', widgetType + '.configComponent') && /*#__PURE__*/React.createElement("div", {
+    className: 'react-dashboard-configicon',
+    onClick: function onClick() {
+      return setConfigShow(true);
+    }
+  }, /*#__PURE__*/React.createElement(FaCog, null)), editMode && /*#__PURE__*/React.createElement("div", {
+    className: 'react-dashboard-deleteicon',
+    onClick: function onClick() {
+      return onDeleteWidget();
+    }
+  }, /*#__PURE__*/React.createElement(AiOutlineDelete, null)));
+}; //config的容器
+
+export var ConfigWrap = function ConfigWrap(props, widgets) {
+  var widgetKey = props.widgetKey,
+      visible = props.visible,
+      setVisible = props.setVisible,
+      width = props.width,
+      children = props.children;
+  var afterVisibleChange = useCallback(function (visible) {
+    if (visible) {
+      var widgetConfigPanel = document.getElementsByClassName('widgetConfigPanel')[0];
+      widgetConfigPanel && widgetConfigPanel.addEventListener('mousedown', function (e) {
+        e.stopPropagation();
+      });
+    } else {
+      var _widgetConfigPanel = document.getElementsByClassName('widgetConfigPanel')[0];
+      _widgetConfigPanel && _widgetConfigPanel.removeEventListener('mousedown', function (e) {
+        e.stopPropagation();
+      });
+    }
+  }, [visible]);
+  var title = useMemo(function () {
+    if (!widgetKey) {
+      return;
+    }
+
+    var widgetType = getWidgetType(widgetKey, widgets);
+    return _.get(widgets, widgetType + '.name') + '设置';
+  }, [widgetKey, widgets, getWidgetType]);
+  useEffect(function () {
+    afterVisibleChange(visible);
+  }, [visible]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, visible && /*#__PURE__*/React.createElement(Drawer, {
+    className: "react-dashboard-widgetConfigPanel",
+    title: title,
+    placement: "right",
+    closable: true,
+    onClose: function onClose() {
+      return setVisible(false);
+    },
+    visible: visible,
+    width: width,
+    bodyStyle: {
+      padding: '0px'
+    },
+    afterVisibleChange: afterVisibleChange,
+    zIndex: 1005
+  }, children));
+};

package/dist/esm/elsaFlow/config-graph.d.ts

@@ -0,0 +1 @@
+export declare const useGraphConfig: any;

package/dist/esm/elsaFlow/config-graph.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { createGraphConfig } from '@antv/xflow';
+/** 自定义React节点/边 */
+
+import Node1 from "./react-node/node1";
+import Node2 from "./react-node/node2";
+import Edge1 from "./react-edge/edge1";
+import Edge2 from "./react-edge/edge2";
+export var useGraphConfig = createGraphConfig(function (config) {
+  /** 设置XFlow画布配置项 */
+  config.setX6Config({
+    /** 画布网格 */
+    grid: true,
+
+    /** 画布缩放等级 */
+    scaling: {
+      min: 0.2,
+      max: 3
+    }
+    /** 画布滚轮缩放 */
+    // mousewheel: {
+    //   enabled: true,
+    //   /** 将鼠标位置作为中心缩放 */
+    //   zoomAtMousePosition: true,
+    // },
+
+  });
+  /** 设置XFlow画布需要渲染的React节点/边 */
+
+  config.setNodeRender('NODE1', function (props) {
+    return /*#__PURE__*/React.createElement(Node1, props);
+  });
+  config.setEdgeRender('EDGE1', function (props) {
+    return /*#__PURE__*/React.createElement(Edge1, props);
+  });
+  config.setNodeRender('NODE2', function (props) {
+    return /*#__PURE__*/React.createElement(Node2, props);
+  });
+  config.setEdgeRender('EDGE2', function (props) {
+    return /*#__PURE__*/React.createElement(Edge2, props);
+  });
+});

package/dist/esm/elsaFlow/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import '@antv/xflow/dist/index.css';
+export interface IProps {
+}
+declare const ElsaFlow: React.FC<IProps>;
+export default ElsaFlow;