@lingxiteam/ebe-utils 0.5.0 → 0.5.2

package/lib/public/src/styles/common.less

@@ -0,0 +1,41 @@
+// 容器内容为空占位box
+.ued-empty-box {
+  width: 100%;
+  min-height: 60px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 auto;
+  font-size: 16px;
+  color: rgba(28, 36, 46, 0.45);
+  background: #f2f3f5;
+  border: 1px dotted rgba(0, 0, 0, 0.15);
+}
+
+.ued-m-empty-box {
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  top: 12px;
+  bottom: 12px;
+  min-height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  font-size: 16px;
+  color: rgba(28, 36, 46, 0.45);
+  background: #f2f3f5;
+  border: 1px dotted rgba(0, 0, 0, 0.15);
+}
+
+.TEXT_ELLIPSIS {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.@{ant-prefix}-spin-nested-loading > div > .@{ant-prefix}-spin {
+  min-height: 50px;
+}

package/lib/public/src/styles/index.less

@@ -0,0 +1,4 @@
+@prefix: engine;
+@import (reference) '~antd/es/style/themes/default.less';
+@import url('./theme/variables.less');
+@import url('./common.less');

package/lib/public/src/styles/index.ts

@@ -0,0 +1 @@
+export const prefix = 'engine';

package/lib/public/src/styles/theme/variables.less

@@ -0,0 +1,130 @@
+// 基准灰色
+@gray-base: #000;
+@gray-1: mix(@gray-base, #fff, 100%);
+@gray-2: mix(@gray-base, #fff, 85%);
+@gray-3: mix(@gray-base, #fff, 65%);
+@gray-4: mix(@gray-base, #fff, 45%);
+@gray-5: mix(@gray-base, #fff, 25%);
+@gray-6: mix(@gray-base, #fff, 15%);
+@gray-7: mix(@gray-base, #fff, 10%);
+@gray-8: mix(@gray-base, #fff, 5%);
+@gray-9: mix(@gray-base, #fff, 2%);
+@gray-10: mix(@gray-base, #fff, 0%);
+
+// 主题色
+@primary-color: #2a71eb;
+@success-color: #2cb82c;
+@danger-color: #f52230;
+@warning-color: #f47a1d;
+
+// 背景
+@bg-default: #fff;
+@bg-gray: #f5f7f9;
+@bg-hover: rgba(65, 105, 225, 0.08);
+@box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
+@box-hover-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.08);
+@bg-sider: #0f121f;
+
+// 间距
+@padding: 4px;
+@padding-xs: 6px; // 6px
+@padding-s: @padding*2; // 8px
+@padding-m: @padding*3; // 12px
+@padding-l: @padding*4; // 16px
+@padding-xl: @padding*10; // 40px
+@padding-xxl: @padding-xl*2; // 72px
+
+// 文字大小
+@font-size-sm: 12px;
+@font-size-base: 14px;
+@font-size-md: 16px;
+@font-size-lg: 18px;
+@font-size-xl: 20px;
+@font-size-heading: 24px;
+@font-size-strong: 32px;
+@font-weight: 500;
+
+// 文字颜色
+@base-color: #fff;
+@color-text-title: #1c242e; // 标题
+@color-text-base: rgba(28, 36, 46, 0.85); // 基本
+@color-text-paragraph: rgba(28, 36, 46, 0.65); // 段落
+@color-text-secondary: rgba(28, 36, 46, 0.45); // 辅助色
+@color-text-sub: rgba(28, 36, 46, 0.45); // 副标题色
+@color-text-base-inverse: #fff; // 基本 - 反色
+@color-text-strong: @danger-color; //价格、强调的数值，包含单位
+@color-link: @primary-color; // 链接
+@color-link-inverse: #f3af61; // 链接
+
+// 线条
+@border-color: rgba(28, 36, 46, 0.15);
+@dividing-color: rgba(28, 36, 46, 0.1);
+
+// 圆角
+@border-radius-base: 4px;
+@border-radius-sm: 2px;
+
+// 侧边栏
+@sidebar-selected-color: @color-text-title;
+@sidebar-selected-bg: rgba(68, 119, 238, 0.1);
+
+// 事件树
+@event-head-panel: #fff;
+@event-body-panel: #fff;
+@event-foot-panel: #fff;
+@event-btn-color: @color-text-base-inverse;
+@event-color: #47e;
+@action-color: #11c9ac;
+@cycle-color: #e8b339;
+@condition-color: #f759ab;
+@elseIf-color: #45d7ef;
+@callback-color: #a25fff;
+@shielding-color: rgba(28, 36, 46, 0.25);
+@event-line-color: #e5e5e5;
+@action-line-height: 28px;
+@action-table-line-height: 24px;
+
+@input-border-color: @gray-7;
+
+// 清除浮动
+.clearfix {
+  &::before,
+  &::after {
+    content: ' ';
+    display: table;
+  }
+
+  &::after {
+    clear: both;
+  }
+}
+
+.textEllipsis {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.HeightOverflowY {
+  flex: 1 1 auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.flexModal {
+  top: 40px;
+  padding-bottom: @padding-l;
+
+  .@{ant-prefix}-modal-content {
+    min-height: 320px;
+    max-height: calc(100vh - 80px);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .@{ant-prefix}-modal-body {
+    flex: 1 1 auto;
+    overflow-y: auto;
+  }
+}

package/lib/public/src/utils/LcdpSpin/index.less

@@ -0,0 +1,13 @@
+@import (reference) '../../styles/index.less';
+
+.@{prefix}-dynamicPage-spinning-mask {
+  position: fixed !important;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+}

package/lib/public/src/utils/LcdpSpin/index.tsx

@@ -0,0 +1,12 @@
+import { Spin } from 'antd';
+import { prefix } from '../../styles/index';
+import './index.less';
+
+const LcdpSpin = (props: { spinning: boolean }) => (
+  <Spin
+    spinning={props.spinning}
+    className={`${prefix}-dynamicPage-spinning-mask`}
+  />
+);
+
+export default LcdpSpin;

package/lib/public/src/utils/ModalManager/Drawer/index.less

@@ -0,0 +1,30 @@
+@import (reference) '../../../styles/index.less';
+
+.ued-drawer-wrap {
+  .pcfactory-drawer-header {
+    height: 48px;
+    padding: 16px 20px;
+
+    .pcfactory-drawer-title {
+      color: #1c242e;
+    }
+  }
+
+  .pcfactory-drawer-header-title > button {
+    position: absolute;
+    right: 0;
+  }
+  .pcfactory-drawer-body {
+    padding: 0;
+  }
+  .pcfactory-drawer-footer {
+    padding: 0 20px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    height: 56px;
+    button {
+      margin-left: 8px;
+    }
+  }
+}

package/lib/public/src/utils/ModalManager/Drawer/index.tsx

@@ -0,0 +1,109 @@
+import { PageComent, RootProps } from '@/components/common/Pageview';
+import { Button, Drawer } from 'antd';
+import classnames from 'classnames';
+import { forwardRef, useEffect, useRef } from 'react';
+import { useSetState } from '../../hooks';
+import './index.less';
+
+const DM = forwardRef((props: any, ref) => {
+  const {
+    pagePath,
+    modalInstId,
+    setStatue,
+    managerRef,
+    params,
+    onCancel,
+    className = '',
+    lcdpParentRenderId,
+    getLocale,
+    onOk,
+    ...restProp
+  } = props;
+  const [mProps, setMDProps] = useSetState<any>({ title: '' });
+  const mRef = useRef<any>();
+  const handleOk = () => {
+    if (mRef.current && typeof mRef.current.onOk === 'function') {
+      mRef.current.onOk();
+    }
+  };
+  const handleClose = () => {
+    let cancelResult;
+    if (mRef.current && typeof mRef.current.onCancel === 'function') {
+      // 返回false阻止默认推拉门关闭动作
+      cancelResult = mRef.current.onCancel();
+    } else {
+      // onCancel为内置取消处理函数，用于关闭推拉门
+      if (cancelResult !== false && onCancel) {
+        onCancel();
+      }
+    }
+  };
+
+  const renderFooter = () => {
+    if (mProps.footer !== null || mProps.footer === 1) {
+      return (
+        <div className="ant-drawer-footer-button">
+          <Button onClick={handleClose}>
+            {mProps.cancelText || getLocale('cancelText', '取消')}
+          </Button>
+          <Button onClick={handleOk} type="primary">
+            {mProps.okText || getLocale('confirm', '确定')}
+          </Button>
+        </div>
+      );
+    }
+    return mProps.footer;
+  };
+  // 设置弹窗抽屉属性
+  useEffect(() => {
+    const pageInst = RootProps[pagePath || ''] || {};
+    const mdProps: any = {
+      title: pageInst.drawerTitle || pageInst.pageName,
+      width:
+        pageInst.width === 'custom'
+          ? pageInst.customWidth || 624
+          : pageInst.width,
+      height:
+        pageInst.width === 'custom'
+          ? pageInst.customHeight || 'auto'
+          : pageInst.height,
+      okText: pageInst.okText || '确定',
+      cancelText: pageInst.cancelText || '取消',
+      placement: pageInst.placement || 'right',
+      maskClosable: pageInst.closeOnClickOverlay !== false,
+    };
+    if (pageInst.footer === 0) {
+      mdProps.footer = null;
+    }
+    setMDProps(mdProps);
+  }, [pagePath]);
+  return (
+    <>
+      <Drawer
+        {...mProps}
+        {...restProp}
+        destroyOnClose
+        className={classnames(className, 'ued-drawer-wrap')}
+        key={modalInstId}
+        footer={renderFooter()}
+        onOk={handleOk}
+        onClose={handleClose}
+      >
+        <PageComent
+          pageSrc={pagePath}
+          state={params}
+          ref={mRef}
+          onOk={onOk}
+          lcdpParentRenderId={lcdpParentRenderId}
+          closeModal={onCancel}
+        />
+      </Drawer>
+    </>
+  );
+});
+
+DM.defaultProps = {
+  getLocale: (k?: string, p?: string) => p ?? '',
+};
+
+export default DM;

package/lib/public/src/utils/ModalManager/Modal/index.less

@@ -0,0 +1,7 @@
+@import (reference) '../../../styles/index.less';
+
+.ued-modal-wrap {
+  .pcfactory-modal-body {
+    padding: 0;
+  }
+}

package/lib/public/src/utils/ModalManager/Modal/index.tsx

@@ -0,0 +1,96 @@
+import { PageComent, RootProps } from '@/components/common/Pageview';
+import { Modal } from 'antd';
+import classnames from 'classnames';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import './index.less';
+const DM = forwardRef((props: any) => {
+  const {
+    pagePath,
+    onCancel,
+    onOk,
+    params,
+    className,
+    lcdpParentRenderId,
+    ...restProp
+  } = props;
+  const [mProps, setMDProps] = useState<any>({
+    title: '',
+  });
+  const mRef = useRef<any>();
+  // 设置弹窗抽屉属性
+  useEffect(() => {
+    const pageInst = RootProps[pagePath || ''] || {};
+    const mdProps: any = {
+      title: pageInst.modalTitle || pageInst.pageName,
+      width:
+        pageInst.width === 'custom'
+          ? pageInst.customWidth || 624
+          : pageInst.width,
+      height:
+        pageInst.width === 'custom'
+          ? pageInst.customHeight || 'auto'
+          : pageInst.height,
+      okText: pageInst.okText,
+      cancelText: pageInst.cancelText,
+      placement: pageInst.placement || 'right',
+      maskClosable: pageInst.closeOnClickOverlay !== false,
+    };
+    if (pageInst.footer === 0) {
+      mdProps.footer = null;
+    }
+    setMDProps(mdProps);
+  }, [pagePath]);
+  return (
+    <>
+      <Modal
+        {...mProps}
+        {...restProp}
+        maskClosable={mProps?.maskClosable}
+        destroyOnClose
+        className={classnames(className, 'ued-modal-wrap')}
+        onOk={() => {
+          console.log('里面会回调 props.onOK');
+          console.log(mRef);
+          if (mRef.current && typeof mRef.current.onOk === 'function') {
+            mRef.current.onOk(); // 这里面会回调 props.onOK
+          }
+        }}
+        onCancel={() => {
+          let cancelResult;
+          if (mRef.current && typeof mRef.current.onCancel === 'function') {
+            // 返回false阻止默认窗口关闭动作
+            cancelResult = mRef.current.onCancel();
+          }
+
+          // onCancel为内置取消处理函数，用于关闭弹窗
+          if (cancelResult !== false && onCancel) {
+            onCancel();
+          }
+        }}
+      >
+        <div
+          style={
+            mProps.height
+              ? {
+                  height: mProps.height,
+                  overflow: 'auto',
+                }
+              : {
+                  overflowX: 'auto',
+                }
+          }
+        >
+          <PageComent
+            pageSrc={pagePath}
+            state={params}
+            ref={mRef}
+            onOk={onOk}
+            lcdpParentRenderId={lcdpParentRenderId}
+            closeModal={onCancel}
+          />
+        </div>
+      </Modal>
+    </>
+  );
+});
+export default DM;