@lingxiteam/ebe-utils 0.0.9 → 0.0.10

package/lib/h5public/src/components/factory/src/ProgressBar/index.less

@@ -0,0 +1,44 @@
+@prefixCls: lcdp-adm-progressbar;
+
+
+.@{prefixCls}-wrapper {
+  display: flex;
+  align-items: center;
+
+  .@{prefixCls}-title {
+    max-width: 25%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding-right: 7px;
+  }
+
+  .@{prefixCls}-value {
+    padding-left: 7px;
+  }
+
+  .adm-progress-bar {
+    flex: 1;
+  }
+}
+
+.@{prefixCls}-wrapper-vertical {
+  display: block;
+
+  .@{prefixCls}-context {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+		padding-bottom: 4px;
+
+    .@{prefixCls}-title {
+      flex: 12;
+      max-width: initial;
+    }
+
+    .@{prefixCls}-value {
+      flex: 1;
+      text-align: right;
+    }
+  }
+}

package/lib/h5public/src/components/factory/src/ProgressBar/index.tsx

@@ -0,0 +1,160 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { ProgressBar } from 'antd-mobile-5';
+import classNames from 'classnames';
+import { useMemo } from 'react';
+import './index.less';
+
+export interface MyProgressBarProps {
+  visible: boolean;
+  title?: string;
+  style?: any;
+  placement?: any;
+  text?: boolean;
+  percent?: any;
+  showTitle?: boolean;
+  color?: any;
+  fontSize?: any;
+  lineHeight?: any;
+  fontWeight?: any;
+  valueColor?: any;
+  valueFontSize?: any;
+  valueLineHeight?: any;
+  valueFontWeight?: any;
+  fillColor?: any;
+  trackColor?: any;
+  trackWidth?: any;
+  extendProps: any;
+}
+
+const prefixCls = 'lcdp-adm-progressbar';
+
+const MyProgressBar = LingxiForwardRef<any, MyProgressBarProps>(
+  (props, ref) => {
+    const {
+      visible,
+      fillColor,
+      trackColor,
+      title,
+      style,
+      placement,
+      showTitle,
+      color,
+      fontSize,
+      lineHeight,
+      fontWeight,
+      text,
+      valueColor,
+      valueFontSize,
+      valueLineHeight,
+      valueFontWeight,
+      percent,
+      trackWidth,
+      extendProps,
+      $$componentItem,
+      getEngineApis,
+      ...restProps
+    } = props;
+    const { width, height, ...restStyle } = style || {};
+    // const [curPercent, setCurPercent] = useState(percent);
+    // useImperativeHandle(ref, () => ({
+    //   get value() {
+    //     return curPercent;
+    //   },
+    //   setVal: (v: any) => {
+    //     setCurPercent(v);
+    //   },
+    // }));
+    // 标题
+    const renderTitle = useMemo(
+      () =>
+        showTitle ? (
+          <div
+            className={`${prefixCls}-title`}
+            style={{
+              color,
+              fontSize,
+              lineHeight,
+              fontWeight,
+            }}
+          >
+            {title}
+          </div>
+        ) : null,
+      [showTitle, title, color, fontSize, lineHeight, fontWeight],
+    );
+    // 数值
+    const renderValue = useMemo(
+      () =>
+        text ? (
+          <div
+            className={`${prefixCls}-value`}
+            style={{
+              color: valueColor,
+              fontSize: restStyle?.fontSize || valueFontSize,
+              lineHeight: valueLineHeight,
+              fontWeight: valueFontWeight,
+            }}
+          >
+            {`${percent || ''}%`}
+          </div>
+        ) : null,
+      [
+        text,
+        percent,
+        valueColor,
+        valueLineHeight,
+        valueFontWeight,
+        valueFontSize,
+        restStyle?.fontSize,
+      ],
+    );
+    // 进度条
+    const renderProgress = () => (
+      <ProgressBar
+        {...restProps}
+        percent={+percent}
+        style={{
+          '--fill-color': fillColor,
+          '--track-color': trackColor,
+          '--track-width': `${trackWidth || ''}px`,
+          ...restStyle,
+        }}
+        {...extendProps}
+      />
+    );
+    if (!visible) {
+      return <></>;
+    }
+    return (
+      <div
+        className={classNames({
+          [`${prefixCls}-wrapper`]: true,
+          [`${prefixCls}-wrapper-vertical`]: placement === 'vertical',
+        })}
+        style={{ ...restStyle, width, height }}
+      >
+        {placement === 'vertical' ? (
+          <>
+            <div className={`${prefixCls}-context`}>
+              {renderTitle}
+              {renderValue}
+            </div>
+            {renderProgress()}
+          </>
+        ) : (
+          <>
+            {renderTitle}
+            {renderProgress()}
+            {renderValue}
+          </>
+        )}
+      </div>
+    );
+  },
+);
+
+MyProgressBar.defaultProps = {
+  extendProps: {},
+};
+
+export default MyProgressBar;

package/lib/h5public/src/components/factory/src/QRCode/const.ts

@@ -0,0 +1,5 @@
+export const logoSizeTrans = {
+  large: 0.25,
+  default: 0.2,
+  small: 0.15,
+};

package/lib/h5public/src/components/factory/src/QRCode/index.less

@@ -0,0 +1,33 @@
+@import '~@lingxiteam/antd-mobile-v2-theme/es/index.less';
+
+@prefixCls: lcdp-qrcode;
+
+.@{prefixCls} {
+    &-img-close {
+        position: fixed;
+        top: 10 * @hd;
+        right: 10 * @hd;
+        width: 20 * @hd;
+        height: 20 * @hd;
+        z-index: 1001;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      &-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 16 * @hd;
+        height: 16 * @hd;
+        align-self: center;
+        margin-right: 6 * @hd;
+    
+        svg {
+          width: 16 * @hd;
+          height: 16 * @hd;
+        }
+      }
+    
+}

package/lib/h5public/src/components/factory/src/QRCode/index.tsx

@@ -0,0 +1,120 @@
+/* eslint-disable jsx-a11y/alt-text */
+import { QRCode, QRCodeType } from '@lingxiteam/antd-mobile-plus';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { ImageViewer } from 'antd-mobile-5';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import closeIcon from '../DformFile/assets/closeIcon.png';
+import { setRgbTo16 } from '../utils';
+import { logoSizeTrans } from './const';
+import './index.less';
+
+export interface QRCodeProps extends QRCodeType {
+  visible: boolean;
+  customClass: string;
+  content: string;
+  isLogo?: boolean;
+  fileCode?: string;
+  src?: string;
+  srcType?: string;
+}
+const prefixCls = 'lcdp-qrcode';
+const MyQRCode = LingxiForwardRef<any, QRCodeProps>((props, ref) => {
+  // eslint-disable-next-line max-len
+  const {
+    visible = true,
+    content,
+    onClick,
+    onLongTouch,
+    className,
+    isLogo,
+    fileCode,
+    src,
+    srcType,
+    color: rbgaColor,
+    logoSize: logoSizeData,
+    getEngineApis,
+  } = props;
+  const codeRef = useRef<any>();
+  const { getAppFileUrlByFileCode } = getEngineApis();
+  const [show, setShow] = useState(false);
+  const [logoSrc, setLogoSrc] = useState<any>();
+
+  // 自定义二维码logo
+  useEffect(() => {
+    if (!isLogo) {
+      setLogoSrc(null);
+      return;
+    }
+    if (srcType === 'fileCode' && fileCode) {
+      (async () => {
+        setLogoSrc(getAppFileUrlByFileCode(fileCode));
+      })();
+    } else if (srcType === 'src' && src && src.length > 0) {
+      setLogoSrc(src);
+    }
+  }, [src, isLogo, fileCode, srcType]);
+
+  const color = useMemo(() => {
+    if (!rbgaColor) return;
+    // eslint-disable-next-line consistent-return
+    return setRgbTo16(rbgaColor);
+  }, [rbgaColor]);
+  // @ts-ignore
+  const logoSize = useMemo(
+    () => logoSizeData && logoSizeTrans[logoSizeData],
+    [logoSizeData],
+  );
+
+  // 二维码信息只传string类型
+  const qrCodeContent = useMemo(() => {
+    if (content) {
+      return typeof content === 'string' ? content : JSON.stringify(content);
+    }
+    return content;
+  }, [content]);
+
+  return visible ? (
+    <>
+      <QRCode
+        // @ts-ignore
+        ref={codeRef}
+        {...props}
+        className={`${prefixCls} ${className}`}
+        style={{ ...props.style, display: 'block' }}
+        content={qrCodeContent}
+        color={color}
+        logoSize={logoSize}
+        logoSrc={logoSrc}
+        onLongTouch={onLongTouch}
+        onClick={(url?: string, content?: string) => {
+          if (onClick) {
+            onClick(url, content);
+          } else {
+            setShow(true);
+          }
+        }}
+      />
+      {show && (
+        <div
+          className={`${prefixCls}-img-close`}
+          onClick={() => setShow(false)}
+        >
+          <img src={closeIcon} />
+        </div>
+      )}
+      {show && codeRef?.current?.url ? (
+        <ImageViewer
+          image={codeRef.current.url}
+          visible={show}
+          onClose={() => {
+            setShow(false);
+          }}
+        />
+      ) : null}
+    </>
+  ) : (
+    <></>
+  );
+});
+
+export default MyQRCode;

package/lib/h5public/src/components/factory/src/RemoteComponent/assets/iconFailComp.tsx

@@ -0,0 +1,181 @@
+const IconFailComp = (props: any) => {
+  const { style, width = '181px', height = '170px' } = props;
+  return (
+    <svg
+      width={width}
+      height={height}
+      style={style}
+      viewBox="0 0 181 170"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="Frame">
+        <g id="&#233;&#161;&#181;&#233;&#157;&#162;-1">
+          <g id="1920X1000">
+            <g id="&#230;&#173;&#164;&#233;&#161;&#181;&#233;&#157;&#162;&#230;&#156;&#170;&#230;&#137;&#190;&#229;&#136;&#176;~">
+              <g id="Group 2">
+                <path
+                  id="Stroke-1"
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M47.5789 45.7989C47.5789 42.6064 48.8474 39.5438 51.1051 37.2858C53.3629 35.0284 56.4252 33.7597 59.6182 33.7597H59.6193C59.9774 33.7597 60.3209 33.9019 60.5741 34.1552C60.8272 34.4085 60.9695 34.7522 60.9695 35.1099C60.9695 39.9093 60.9695 55.8563 60.9695 55.8563L47.5789 56.0773V45.7989Z"
+                  fill="white"
+                  stroke="#9DB9F5"
+                />
+                <path
+                  id="Stroke-2"
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M132.386 45.8145C132.386 39.1572 126.989 33.7597 120.331 33.7597H120.33C119.976 33.7597 119.636 33.9003 119.386 34.1508C119.136 34.4013 118.995 34.7405 118.995 35.0943C118.995 39.8741 118.995 55.8563 118.995 55.8563L132.386 56.0773V45.8145Z"
+                  fill="white"
+                  stroke="#9DB9F5"
+                />
+                <path
+                  id="Fill-4"
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M145.776 80.8136C145.776 57.3996 126.767 38.3906 103.353 38.3906H76.6114C53.1975 38.3906 34.1884 57.3996 34.1884 80.8136V85.238C34.1884 108.652 46.4826 125.429 69.8965 125.429H110.068C133.482 125.429 145.776 108.652 145.776 85.238V80.8136Z"
+                  fill="white"
+                />
+                <path
+                  id="&#229;&#189;&#162;&#231;&#138;&#182;&#231;&#187;&#147;&#229;&#144;&#136;"
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M116.64 40.0003C133.598 45.5561 145.861 61.52 145.861 80.3254V84.7498C145.861 108.164 133.566 124.941 110.153 124.941H69.9808C63.4458 124.941 57.7771 123.634 53.0001 121.241C56.5982 122.352 60.5944 122.941 64.9808 122.941H105.153C128.566 122.941 140.861 106.164 140.861 82.7498V78.3254C140.861 61.4673 131.006 46.8928 116.749 40.0527L116.64 40.0003Z"
+                  fill="#DCE7FA"
+                />
+                <path
+                  id="Stroke-5"
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M145.776 80.8136C145.776 57.3996 126.767 38.3906 103.353 38.3906H76.6114C53.1975 38.3906 34.1884 57.3996 34.1884 80.8136V85.238C34.1884 108.652 46.4826 125.429 69.8965 125.429H110.068C133.482 125.429 145.776 108.652 145.776 85.238V80.8136Z"
+                  stroke="#9DB9F5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+                <path
+                  id="Fill-10"
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M96.9342 38.863C96.9342 42.1561 93.3046 43 90.2136 43C87.1227 43 83.4931 42.1561 83.4931 38.863C83.4931 34.9214 86.767 29.1802 88.9891 25.6778C89.2536 25.2563 89.7158 25.0005 90.2136 25C90.7114 25 91.1742 25.2563 91.4387 25.6778C93.6603 29.1802 96.9342 34.9214 96.9342 38.863Z"
+                  fill="#E0E8FA"
+                  stroke="#9DB9F5"
+                />
+                <path
+                  id="Fill-6"
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M132.386 81.9099C132.386 66.513 119.886 54.0129 104.489 54.0129H75.476C60.0792 54.0129 47.5789 66.513 47.5789 81.9099C47.5789 97.3067 52.268 107.575 67.6648 107.575H112.3C127.697 107.575 132.386 97.3067 132.386 81.9099Z"
+                  fill="white"
+                />
+                <path
+                  id="Stroke-7"
+                  d="M104.489 50.6653H75.476C58.2303 50.6653 44.2313 64.6642 44.2313 81.9099C44.2313 90.7375 45.7017 97.4992 49.092 102.417C52.9783 108.053 59.1903 110.923 67.6648 110.923H112.3C120.775 110.923 126.987 108.053 130.873 102.417C134.263 97.4992 135.734 90.7375 135.734 81.9099C135.734 64.6641 121.735 50.6653 104.489 50.6653Z"
+                  fill="#9DB9F5"
+                />
+                <g id="&#232;&#183;&#175;&#229;&#190;&#132;-2">
+                  <path
+                    id="&#232;&#183;&#175;&#229;&#190;&#132;"
+                    d="M75.476 57.3605H104.489C118.037 57.3605 129.038 68.3618 129.038 81.9099C129.038 97.3996 124.331 104.228 112.3 104.228H67.6648C55.6342 104.228 50.9266 97.3996 50.9266 81.9099C50.9266 68.3619 61.928 57.3605 75.476 57.3605Z"
+                    fill="#E0E8FA"
+                  />
+                </g>
+                <path
+                  id="Fill-8"
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M84.1137 95.9463C85.4031 95.6201 86.6775 95.4603 87.9468 95.3546C88.7982 95.2837 89.6435 95.2645 90.4899 95.2639C91.1254 95.2634 91.7597 95.2636 92.3969 95.297C93.876 95.3745 95.3613 95.5534 96.8638 95.9458C97.3955 96.1229 97.9702 95.8352 98.1476 95.3038C98.3245 94.7723 98.0366 94.1972 97.5054 94.0202C95.903 93.3659 94.2973 92.8946 92.6647 92.6492C91.9422 92.5406 91.2158 92.4767 90.4888 92.4767C89.5219 92.4766 88.5549 92.5743 87.5953 92.7544C86.2043 93.0155 84.8402 93.454 83.4746 94.0198C82.9429 94.1961 82.6544 94.7709 82.8308 95.3025C83.0071 95.8341 83.5819 96.1226 84.1137 95.9463Z"
+                  fill="#9DB9F5"
+                />
+                <path
+                  id="Fill-9"
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M117.27 77.4622C117.27 74.9977 115.272 73 112.808 73H112.806C110.341 73 108.343 74.9977 108.343 77.4622C108.343 80.1433 108.343 83.5432 108.343 86.2243C108.343 88.6888 110.341 90.6867 112.806 90.6867H112.808C115.272 90.6867 117.27 88.6888 117.27 86.2243C117.27 83.5432 117.27 80.1433 117.27 77.4622Z"
+                  fill="#9DB9F5"
+                />
+                <path
+                  id="Fill-9_2"
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M72.927 77.6596C72.927 75.1951 70.9291 73.1974 68.4646 73.1974H68.4624C65.998 73.1974 64 75.1951 64 77.6596C64 80.3407 64 83.7406 64 86.4217C64 88.8862 65.998 90.8841 68.4624 90.8841H68.4646C70.9291 90.8841 72.927 88.8862 72.927 86.4217C72.927 83.7406 72.927 80.3407 72.927 77.6596Z"
+                  fill="#9DB9F5"
+                />
+                <path
+                  id="&#229;&#189;&#162;&#231;&#138;&#182;&#231;&#187;&#147;&#229;&#144;&#136;_2"
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M68.5 76.1974C69.88 76.1974 71 77.3176 71 78.6974C71 80.0772 69.88 81.1974 68.5 81.1974C67.12 81.1974 66 80.0772 66 78.6974C66 77.3176 67.12 76.1974 68.5 76.1974ZM112.843 76C114.223 76 115.343 77.1202 115.343 78.5C115.343 79.8798 114.223 81 112.843 81C111.463 81 110.343 79.8798 110.343 78.5C110.343 77.1202 111.463 76 112.843 76Z"
+                  fill="white"
+                />
+                <path
+                  id="&#229;&#189;&#162;&#231;&#138;&#182;&#231;&#187;&#147;&#229;&#144;&#136;_3"
+                  d="M68.4934 61.2901L68.4933 64.8168C63.005 66.1839 58.9321 71.1569 58.9321 77.0741C58.9321 77.3899 58.9359 77.6987 58.9436 78.0005L55.504 78.0002C55.4967 77.6966 55.4931 77.3879 55.4931 77.0741C55.4931 69.2458 61.0911 62.7179 68.4934 61.2901Z"
+                  fill="white"
+                />
+                <path
+                  id="&#231;&#159;&#169;&#229;&#189;&#162;"
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M70.4931 61H76.4931V64.806H70.4931V61Z"
+                  fill="white"
+                />
+                <g id="&#231;&#188;&#150;&#231;&#187;&#132;">
+                  <path
+                    id="Fill-11"
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M36.927 70.1091C36.927 69.4966 36.4306 69 35.8182 69C35.493 69 35.1116 69 34.6953 69C32.9196 69 31.2166 69.7056 29.961 70.9612C28.7054 72.2168 28 73.9198 28 75.6955C28 79.785 28 84.9965 28 89.086C28 90.8617 28.7054 92.5647 29.961 93.8203C31.2166 95.076 32.9196 95.7813 34.6953 95.7813C35.1116 95.7813 35.493 95.7813 35.8182 95.7813C36.4306 95.7813 36.927 95.2849 36.927 94.6725C36.927 90.3236 36.927 74.4579 36.927 70.1091Z"
+                    fill="white"
+                    stroke="#9DB9F5"
+                  />
+                  <path
+                    id="&#229;&#189;&#162;&#231;&#138;&#182;&#231;&#187;&#147;&#229;&#144;&#136;_4"
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M29.5069 73.4835V86.874C29.5069 88.6497 30.2123 90.3527 31.4679 91.6083C32.7236 92.864 34.4265 93.5693 36.2022 93.5693L36.4339 93.5692L36.434 94.4605C36.434 95.032 36.0015 95.5026 35.4459 95.5628L35.3251 95.5693H34.2022C32.4265 95.5693 31.7236 94.864 30.4679 93.6083C29.2123 92.3527 28.5069 90.6497 28.5069 88.874V75.8337C28.5069 74.4889 28.9115 73.1858 29.6533 72.0872C29.5569 72.543 29.5069 73.0106 29.5069 73.4835Z"
+                    fill="#DFE9FB"
+                  />
+                </g>
+                <g id="&#231;&#188;&#150;&#231;&#187;&#132;&#229;&#164;&#135;&#228;&#187;&#189;">
+                  <path
+                    id="Fill-11_2"
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M144 70.1091C144 69.4966 144.496 69 145.109 69C145.434 69 145.815 69 146.232 69C148.007 69 149.71 69.7056 150.966 70.9612C152.222 72.2168 152.927 73.9198 152.927 75.6955C152.927 79.785 152.927 84.9965 152.927 89.086C152.927 90.8617 152.222 92.5647 150.966 93.8203C149.71 95.076 148.007 95.7813 146.232 95.7813C145.815 95.7813 145.434 95.7813 145.109 95.7813C144.496 95.7813 144 95.2849 144 94.6725C144 90.3236 144 74.4579 144 70.1091Z"
+                    fill="white"
+                    stroke="#9DB9F5"
+                  />
+                  <path
+                    id="&#229;&#189;&#162;&#231;&#138;&#182;&#231;&#187;&#147;&#229;&#144;&#136;_5"
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M151.42 73.4835V86.874C151.42 88.6497 150.715 90.3527 149.459 91.6083C148.204 92.864 146.501 93.5693 144.725 93.5693L144.493 93.5692L144.493 94.4605C144.493 95.032 144.926 95.5026 145.481 95.5628L145.602 95.5693H146.725C148.501 95.5693 149.204 94.864 150.459 93.6083C151.715 92.3527 152.42 90.6497 152.42 88.874V75.8337C152.42 74.4889 152.016 73.1858 151.274 72.0872C151.37 72.543 151.42 73.0106 151.42 73.4835Z"
+                    fill="#DFE9FB"
+                  />
+                </g>
+                <path
+                  id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;"
+                  d="M90 145C110.987 145 128 142.09 128 138.5C128 134.91 110.987 132 90 132C69.0132 132 52 134.91 52 138.5C52 142.09 69.0132 145 90 145Z"
+                  fill="#E0E8FA"
+                />
+                <path
+                  id="&#232;&#183;&#175;&#229;&#190;&#132;_2"
+                  d="M171.537 94.931C167.868 99.3728 161.059 99.807 161.059 99.807C161.059 99.807 160.2 93.0389 163.871 88.597C167.541 84.1555 174.349 83.7213 174.349 83.7213C174.349 83.7213 175.207 90.4891 171.537 94.931Z"
+                  fill="#E0E8FA"
+                />
+                <path
+                  id="&#232;&#183;&#175;&#229;&#190;&#132;&#229;&#164;&#135;&#228;&#187;&#189;-2"
+                  d="M23.1487 112.332C20.7639 115.219 16.3383 115.501 16.3383 115.501C16.3383 115.501 15.7803 111.102 18.1661 108.215C20.5514 105.328 24.977 105.045 24.977 105.045C24.977 105.045 25.5346 109.444 23.1487 112.332Z"
+                  fill="#E0E8FA"
+                />
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default IconFailComp;

package/lib/h5public/src/components/factory/src/RemoteComponent/assets/index.tsx

@@ -0,0 +1,3 @@
+import IconFailComp from './iconFailComp';
+
+export { IconFailComp };

package/lib/h5public/src/components/factory/src/RemoteComponent/components/FishRender.tsx

@@ -0,0 +1,41 @@
+import { ReactLoadFish } from '@lingxiteam/load-framework';
+import { LingXiFC } from '@lingxiteam/types';
+import { ErrorBlock } from 'antd-mobile-5';
+import { IconFailComp } from '../assets';
+
+export interface FishRenderProps {
+  url: string;
+  customProps: any;
+  engineType: 'editor' | 'engine';
+}
+
+const FishRender: LingXiFC<FishRenderProps> = (props) => {
+  const { customProps, getEngineApis, engineType, ...restProps } = props;
+  const engineApis = getEngineApis?.();
+  return (
+    <ReactLoadFish
+      {...restProps}
+      lxApi={{ getEngineApis, engineType }}
+      moduleProps={customProps}
+      onError={console.log}
+      fallback={(item) => (
+        <ErrorBlock
+          title={
+            engineApis?.getLocale?.('RemoteComponent.fail') ??
+            '自定义组件加载失败'
+          }
+          description={item.error.message}
+          status="empty"
+          image={<IconFailComp />}
+        />
+      )}
+      loading={() => (
+        <div>
+          {engineApis?.getLocale?.('loadingText', '加载中…') ?? '加载中...'}
+        </div>
+      )}
+    />
+  );
+};
+
+export default FishRender;

package/lib/h5public/src/components/factory/src/RemoteComponent/components/ReactRender.tsx

@@ -0,0 +1,61 @@
+import { LingXiFC } from '@lingxiteam/types';
+import { createRequires } from '@paciolan/remote-component/dist/createRequires';
+import { createUseRemoteComponent } from '@paciolan/remote-component/dist/hooks/useRemoteComponent';
+import { ErrorBlock } from 'antd-mobile-5';
+import { useDynamicData } from '../../utils/dynamicUtils/DynamicContext';
+import { IconFailComp } from '../assets';
+import RemoteCompConfig from '../remote-component.config';
+
+export const getUseRemoteComponent = (config: any) => {
+  const requires = createRequires(() => config.resolve);
+  return createUseRemoteComponent({ requires });
+};
+const useRemoteComponent = getUseRemoteComponent(RemoteCompConfig);
+export interface MyRemoteComponentProps {
+  url?: string;
+  customProps: any;
+  useRemoteComponent?: any; // 自定义组件调用依赖的模块，可由调用方传入
+}
+
+// const prefixCls = 'remoteComponent';
+const RemoteComponent: LingXiFC<MyRemoteComponentProps> = (props) => {
+  const { url, customProps, getEngineApis, ...restProps } = props;
+
+  const engineApis = getEngineApis?.() || {};
+
+  const useRemoteComponentInst = props.useRemoteComponent || useRemoteComponent;
+
+  const dynamicDataContext = useDynamicData();
+
+  const [loading, err, Component] = useRemoteComponentInst(url);
+
+  if (loading) {
+    return (
+      <div>
+        {engineApis?.getLocale?.('loadingText', '加载中…') ?? '加载中...'}
+      </div>
+    );
+  }
+  if (err != null) {
+    return (
+      <ErrorBlock
+        title={
+          engineApis?.getLocale?.('RemoteComponent.fail') ??
+          '自定义组件加载失败'
+        }
+        description=""
+        status="empty"
+        image={<IconFailComp />}
+      />
+    );
+  }
+  return (
+    <Component
+      {...restProps}
+      {...customProps}
+      $lxApi={{ form: dynamicDataContext.form }}
+    />
+  );
+};
+
+export default RemoteComponent;