@lingxiteam/ebe-utils 0.2.4 → 0.2.6

package/lib/pcpublic/src/components/pcfactory/src/WebComponent/useWebComponent.ts

@@ -0,0 +1,162 @@
+import type { EngineBaseProps } from '@lingxiteam/types';
+import { isFunction, isPlainObject } from 'lodash';
+import { useEffect, useMemo, useRef } from 'react';
+import { useDeepCompareEffect } from '../utils/ahooks';
+import { appendUrlParams, getEventName, getURLOrigin, isLikeEvent, parseEventByKey } from './utils';
+
+/**
+ *
+ * exposeProps: 暴露给web组件的内部属性
+ * exposeStyle: 暴漏给web组件的内部样式
+ */
+export interface WebComponentProps
+  extends EngineBaseProps,
+    Omit<React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>, 'className'> {
+  visible: boolean;
+  // 暴漏的属性
+  exposeProps: Record<string, any>;
+
+  style: React.CSSProperties & {
+    // 暴漏的样式
+    exposeStyle: Record<string, any>;
+  };
+
+  // 暴露的方法
+  [key: string]: any;
+}
+
+const useWebComponent = (props: WebComponentProps) => {
+  const { exposeProps, $$componentItem } = props;
+  const { exposeStyle, ...style } = props.style || {};
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const messageKey = useMemo(() => `_$${$$componentItem.uid ?? $$componentItem.id}_${Math.random().toString(36).substring(2)}_$`, []);
+  const iframeDidFinishRef = useRef(false);
+
+  // src先解析后，追加isWebComponent
+  const src = useMemo(
+    () =>
+      appendUrlParams(
+        props.src,
+        {
+          __isWebComponent__: JSON.stringify({
+            is: true,
+            key: messageKey,
+            url: window.location.href,
+          }),
+        },
+        { force: true }
+      ),
+    [props.src]
+  );
+
+  // 给iframe发送消息
+  const sendMessageIframe = (type: 'props' | 'style' | 'initial', data: unknown) => {
+    if (iframeDidFinishRef.current) {
+      const contentWindowData = {
+        type,
+        data,
+        key: messageKey,
+      };
+
+      iframeRef.current?.contentWindow?.postMessage(contentWindowData, {
+        targetOrigin: getURLOrigin(src),
+      });
+    }
+  };
+
+  // 获取开发字段的关系
+  const getOpenFieldsMap = () => {
+    const openFieldsMap: Record<string, string[]> = {};
+    Object.keys(exposeProps || {}).forEach(id => {
+      const value = exposeProps[id];
+      if (isPlainObject(value)) {
+        openFieldsMap[id] = Object.keys(value).map(valueKey => valueKey);
+      }
+    });
+    return openFieldsMap;
+  };
+
+  // 获取事件的对象
+  const getEventsMap = () => {
+    const events: Record<string, string[]> = {};
+    Object.keys(props).forEach(key => {
+      if (isLikeEvent(key, props[key])) {
+        const [compId, eventName] = parseEventByKey(key);
+        events[compId] ??= [];
+        events[compId].push(eventName);
+      }
+    });
+    return events;
+  };
+
+  const sendInitialMessage = () => {
+    // 初始化
+    sendMessageIframe('initial', {
+      openFieldsMap: getOpenFieldsMap(),
+      props: exposeProps,
+      style: exposeStyle,
+      events: getEventsMap(),
+    });
+  };
+
+  // 每次变更后发送属性消息
+  useDeepCompareEffect(() => {
+    sendMessageIframe('props', exposeProps);
+  }, [exposeProps]);
+
+  // 每次变更后发送样式消息
+  useDeepCompareEffect(() => {
+    sendMessageIframe('style', exposeStyle);
+  }, [exposeStyle]);
+
+  // 初始化监听
+  const initialOnceListener = (e: MessageEvent) => {
+    if (isPlainObject(e.data) && e.data.key === messageKey) {
+      // iframe页面加载完成，可以发送消息了
+      iframeDidFinishRef.current = true;
+      sendInitialMessage();
+      window.removeEventListener('message', initialOnceListener);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('message', initialOnceListener);
+
+    return () => {
+      window.removeEventListener('message', initialOnceListener);
+    };
+  }, []);
+
+  // 处理事件逻辑
+  useEffect(() => {
+    const callMethod = (e: MessageEvent) => {
+      const { data } = e;
+
+      // 检查是否建立关系，没建立就不做任何处理
+      if (data.key !== messageKey) return;
+
+      if (isPlainObject(data)) {
+        const { type, methodName, id, params = [] } = data;
+        if (type === 'callMethod' && id && methodName) {
+          if (isFunction(props[getEventName(id, methodName)])) {
+            props[getEventName(id, methodName)](...params);
+          }
+        }
+      }
+    };
+
+    window.addEventListener('message', callMethod);
+
+    return () => {
+      window.removeEventListener('message', callMethod);
+    };
+  });
+
+  return {
+    iframeRef,
+    src,
+    style,
+  };
+};
+
+export default useWebComponent;

package/lib/pcpublic/src/components/pcfactory/src/WebComponent/utils.ts

@@ -0,0 +1,67 @@
+import { isPlainObject } from 'lodash';
+
+/**
+ * 追加地址参数
+ * @param url
+ * @param params
+ * @returns
+ */
+export const appendUrlParams = (url?: string, params?: Record<string, any>, options?: { force?: boolean }) => {
+  const { force = false } = options || {};
+  if (!url || !params || !isPlainObject(params)) return url;
+
+  const [host, paramsStr] = url.split('?');
+  const urlParams = new URLSearchParams(paramsStr);
+  Object.keys(params).forEach(key => {
+    if (force || !urlParams.has(key)) {
+      urlParams.append(key, params[key]);
+    }
+  });
+  return `${host}?${urlParams.toString()}`;
+};
+
+export const getURLOrigin = (url?: string) => {
+  if (typeof url !== 'string') return '*';
+  if (!/^http[s]{0,1}:\/\//.test(url)) return '*';
+  try {
+    return new URL(url).origin;
+  } catch (error) {
+    return '*';
+  }
+};
+
+export const getURLHash = (url?: string) => {
+  if (!url) return url;
+  try {
+    const parsedUrl = new URL(url);
+    return parsedUrl.hash;
+  } catch (error) {
+    return '';
+  }
+};
+
+/**
+ * 像事件类型
+ * @param key
+ * @param value
+ */
+export const isLikeEvent = (key: string, value: any) => {
+  return key.includes('@@') && typeof value === 'function';
+};
+
+export const getEventName = (id: string, eventName: string) => `${id}@@${eventName}`;
+
+export const parseEventByKey = (key: string) => {
+  return key.split('@@');
+};
+
+// 创建虚拟的webComponent 事件
+export const createVirtualEvents = (eventName: string) => {
+  const value: any = [];
+  value.params = [];
+
+  return {
+    id: eventName,
+    value,
+  };
+};

package/lib/pcpublic/src/components/pcfactory/src/Webview/index.tsx

@@ -1,24 +1,11 @@
 import { LingxiForwardRef } from '@lingxiteam/types';
-import {
-  addEventListenerMessage,
-  postMessageToContentWindow,
-  removeEventListenerMessage,
-} from 'lcdp-message';
-import React, {
-  CSSProperties,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
+import { addEventListenerMessage, postMessageToContentWindow, removeEventListenerMessage } from 'lcdp-message';
+import React, { CSSProperties, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { useHiddenStyle, useListenProps } from '../utils';
 
 export interface MyWebviewProps {
   __compId?: string;
-  getWebviewApis?: (
-    e: MyWebviewProps['__compId'],
-    opts: Record<string, any>,
-  ) => void;
+  getWebviewApis?: (e: MyWebviewProps['__compId'], opts: Record<string, any>) => void;
   onMessage?: React.FC<any>;
   title?: string;
   src?: string;
@@ -29,15 +16,7 @@ export interface MyWebviewProps {
 // const prefixCls = 'webview';
 
 const Webview = LingxiForwardRef<any, MyWebviewProps>((props, ref) => {
-  const {
-    __compId,
-    getWebviewApis,
-    onMessage = () => {},
-    style,
-    visible,
-    title,
-    ...restProps
-  } = props;
+  const { __compId, getWebviewApis, onMessage = () => {}, style, visible, title, ...restProps } = props;
   const hiddenStyle = useHiddenStyle(visible, style);
   const webViewRef = useRef<HTMLIFrameElement | null>(null);
   const getContentWindow = () => webViewRef?.current?.contentWindow;
@@ -49,6 +28,7 @@ const Webview = LingxiForwardRef<any, MyWebviewProps>((props, ref) => {
   const postMessage = (data: unknown) => {
     if (webViewRef.current) {
       const contentWindow = getContentWindow();
+      // @ts-ignore
       postMessageToContentWindow(contentWindow, data, src);
     }
   };
@@ -89,16 +69,7 @@ const Webview = LingxiForwardRef<any, MyWebviewProps>((props, ref) => {
     };
   }, []);
 
-  return (
-    <iframe
-      title="title"
-      ref={webViewRef}
-      {...restProps}
-      src={src}
-      key={update}
-      style={hiddenStyle}
-    />
-  );
+  return <iframe title="title" ref={webViewRef} {...restProps} src={src} key={update} style={hiddenStyle} />;
 });
 
 export default Webview;

package/lib/pcpublic/src/components/pcfactory/src/index.component.ts

@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
-/// <reference path="../typings.d.ts" />
+// / <reference path="../typings.d.ts" />
 // 该文件请勿手动修改，执行yarn add:pc + compName + (-c[是否是容器组件]) 命令自动生成该文件。
 import Alert from './Alert';
 import Animation from './Animation';
@@ -83,6 +83,7 @@ import VerticalView from './VerticalView';
 import VideoPlayer from './VideoPlayer';
 import View from './View';
 import VirtualGroup from './VirtualGroup';
+import WebComponent from './WebComponent';
 import Webview from './Webview';
 
 export default {
@@ -165,6 +166,7 @@ export default {
   VideoPlayer,
   View,
   VirtualGroup,
+  WebComponent,
   Webview,
   getUseRemoteComponent,
   WithSyncValue,
@@ -250,6 +252,7 @@ export {
   VideoPlayer,
   View,
   VirtualGroup,
+  WebComponent,
   Webview,
   getUseRemoteComponent,
   WithSyncValue,

package/lib/pcpublic/src/components/pcfactory/src/styles/components/Card.less

@@ -18,6 +18,12 @@
     display: flex;
     align-items: center;
 
+    .main {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      min-width: 10px;
+    }
     &::before {
       position: absolute;
       top: 50%;
@@ -52,6 +58,24 @@
       }
     }
   }
+
+  .ued-card-style-less-title {
+    display: flex;
+    align-items: center;
+  }
+
+  .ued-card-sub-title {
+    flex: 1;
+    margin-left: 4px;
+    overflow: hidden;
+    min-width: 20px;
+    .sub {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+
   .ued-card-children-skeleton {
     position: absolute;
     top: 0;

package/lib/pcpublic/src/components/pcfactory/src/styles/components/Collapse.less

@@ -4,9 +4,21 @@
 .ued-collapse-wrap {
   .@{collapse-prefix-cls} {
     border-color: @border-color-collapse;
+    background-color: transparent;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    border-left: none;
     // 默认边框型
     > .@{collapse-prefix-cls}-item {
       border-color: @border-color-collapse;
+      flex: 0;
+      display: flex;
+      flex-direction: column;
+      border-left: 1px solid @border-color-collapse;
+      &.@{collapse-prefix-cls}-item-active {
+        flex: 1;
+      }
 
       > .@{collapse-prefix-cls}-header {
         position: relative;
@@ -36,11 +48,25 @@
       }
 
       > .@{collapse-prefix-cls}-content {
+        flex: 0;
+        background-color: @component-background;
+        &.@{collapse-prefix-cls}-content-active {
+          flex: 1;
+        }
+        &.@{collapse-prefix-cls}-content-inactive {
+          display: none;
+        }
+        // 去除动画效果
+        &.ant-motion-collapse {
+          transition: none!important;
+        }
         > .@{collapse-prefix-cls}-content-box {
           padding: 0;
+          height: 100%;
 
           .ued-collapse-pane-content {
             padding: @padding-20;
+            height: 100%;
           }
         }
 
@@ -74,7 +100,7 @@
 
     // 默认分割线
     &.@{collapse-prefix-cls}-borderless:not(.ued-collapse-simple) {
-      background-color: @component-background;
+      background-color: transparent;
       border: 0;
 
       > .@{collapse-prefix-cls}-item {
@@ -158,7 +184,13 @@
       }
     }
   }
-
+  .@{collapse-prefix-cls}-header-text {
+    overflow: hidden;
+  }
+  .ued-collapse-panel-header-default {
+    display: flex;
+    align-items: center;
+  }
   .ued-collapse-panel-header {
     display: flex;
     align-items: center;
@@ -176,6 +208,13 @@
       content: '';
     }
 
+    .main {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      min-width: 10px;
+    }
+
     &-icon-left {
       &::before {
         left: 0;
@@ -198,6 +237,18 @@
     }
   }
 
+  .ued-collapse-panel-header-sub {
+    flex: 1;
+    margin-left: 8px;
+    overflow: hidden;
+    min-width: 20px;
+    .sub {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+
   .ued-collapse-expand-icon-arrow {
     svg {
       transform: rotate(-90deg);

package/lib/pcpublic/src/components/pcfactory/src/styles/components/DynamicTabs.less

@@ -5,6 +5,32 @@
 .ued-dynamic-tabs-wrap {
   height: 100%;
 
+  .ued-tabs-customTabbar {
+    display: flex;
+    align-items: center;
+    background-color: #fff;
+    width: 100%;
+  
+    .@{tab-prefix-cls}-nav {
+      flex: 1 !important;
+      // margin-bottom: 0;
+      overflow: hidden;
+    }
+    .ued-tabs-closeAll {
+      flex-shrink: 0;
+      margin: 8px 12px;
+
+      .ued-tabs-closeAll-context {
+        padding: 3px 8px;
+        color: #292B33;
+        line-height: 18px;
+        font-size: 12px;
+        border-radius: 2px;
+        background-color: #F2F3F5;
+      }
+    }
+  }
+
   .@{tab-prefix-cls} {
     height: 100%;
 
@@ -38,6 +64,13 @@
           content: '';
           pointer-events: none;
         }
+
+        &-ping-left::before {
+          opacity: 1 !important;
+        }
+        &-ping-right::after {
+          opacity: 1 !important;
+        }
       }
   
       .@{tab-prefix-cls}-nav-list {
@@ -148,6 +181,7 @@
         flex: none;
         margin-right: -@margin-xss;
         margin-left: @margin-xs;
+        padding: 0;
         color: @text-color-secondary;
         font-size: @font-size-sm;
         background: transparent;
@@ -251,4 +285,19 @@
   }
 
 }
+.ued-dynamic-tabs-more {
+  .@{tab-prefix-cls}-dropdown-menu {
+    max-width: 216px;
+    max-height: 216px;
+
+    .@{tab-prefix-cls}-dropdown-menu-item {
+      padding: 6px 8px;
+      line-height: 16px;
+      font-size: 12px;
+    }
+    .@{tab-prefix-cls}-dropdown-menu-item:hover {
+      background: rgba(144, 146, 163, 0.08);
+    }
+  }
+}
 

package/lib/pcpublic/src/components/pcfactory/src/styles/components/Form.less

@@ -3,6 +3,7 @@
 @form-item-prefix-cls: ~'@{form-prefix-cls}-item';
 
 .ued-legacy-form-wrap {
+
   background-color: white;
 
   .form-tips .@{form-prefix-cls}-item-with-help {
@@ -46,6 +47,7 @@
           left: 0;
         }
       }
+
       &.has-error {
         .@{form-prefix-cls}-explain {
           position: absolute;
@@ -280,3 +282,4 @@
   //   display: block;
   // }
 }
+

package/lib/pcpublic/src/components/pcfactory/src/styles/components/Input.less

@@ -1,11 +1,10 @@
-@import (reference) '../theme/variables/antdVariables.less';
-@input-prefix-cls: ~'@{ant-prefix}-input';
+@import (reference) "../theme/variables/antdVariables.less";
+@input-prefix-cls: ~"@{ant-prefix}-input";
 
 .ued-input-wrap {
   &.@{input-prefix-cls} {
     line-height: 22px;
   }
-
   &.greyStyle {
     .@{input-prefix-cls}-group-addon:first-child {
       background: #f7f7f7;
@@ -42,7 +41,6 @@
         border-color: @border-color-base !important;
       }
     }
-
   }
 
   &.postfixBlueStyle {
@@ -114,6 +112,17 @@
     }
   }
 
+  &.postfixGreyStyle,
+  &.postfixBlueStyle,
+  &.postfixWhiteStyle,
+  &.postfixNoBorderStyle {
+    .@{input-prefix-cls}-group-addon:first-child:hover {
+      & ~ .@{input-prefix-cls}-group-addon:last-child {
+        border-color: @border-color-base !important;
+      }
+    }
+  }
+
   &.greyStyle,
   &.blueStyle,
   &.whiteStyle {
@@ -131,13 +140,16 @@
     .@{input-prefix-cls}-group-addon:last-child {
       border-top-right-radius: 2px;
       border-bottom-right-radius: 2px;
+      border-left-width: 1px;
+      border-left-style: solid;
+      border-left-color: @border-color-base;
     }
   }
 
   .disabled {
     cursor: not-allowed;
   }
-  
+
   .@{input-prefix-cls}-wrapper.@{input-prefix-cls}-group {
     display: flex;
     .@{input-prefix-cls}-group-addon {
@@ -156,12 +168,15 @@
   .@{input-prefix-cls}:not(:first-child) {
     padding-left: @input-affix-padding;
   }
-
   .@{input-prefix-cls}:not(:last-child) {
     padding-right: @input-affix-padding;
   }
 }
-
+.@{input-prefix-cls}-after-border-right-width {
+  .@{input-prefix-cls}-affix-wrapper {
+    border-right-width: 0px !important;
+  }
+}
 .@{input-prefix-cls}-affix-wrapper-sm {
   padding: 0 @padding-xs !important;
 }

package/lib/pcpublic/src/components/pcfactory/src/styles/components/LoopList.less

@@ -24,6 +24,7 @@
   &-content {
     flex: 1 1 auto;
     width: auto;
+    min-width: 0; /* fix shrink-to-fit计算容器宽度内容溢出 (循环列表里放内容滚动表格) */
   }
 
   &-content-lass {