@lingxiteam/ebe-utils 0.5.10 → 0.6.1

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

@@ -1,109 +1,13 @@
-import { Badge, TabBar } from '@lingxiteam/antd-mobile-plus';
-import { LingXiFC } from '@lingxiteam/types';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import './index.less';
-import TabImage from './TabImage';
-import TabPage from './TabPage';
-
-export interface MyTabBarEDProps {
-  tabsData: any[];
-  style: any;
-  onChange?: any;
-  lcdpParentRenderId: string;
-}
-
-const prefixCls = 'appTabBar';
-const MyTabBar: LingXiFC<MyTabBarEDProps> = props => {
-  const { tabsData, style, onChange, $$componentItem, getEngineApis, lcdpParentRenderId } = props;
-  const { titleColor = '#999999', selectedTitleColor = '#1677ff', titleFontSize = '10', tabBarBackground = '#ffffff' } = style;
-  const [pathName, setPathName] = useState<string>();
-  const [tabs, setTabs] = useState<any>([]);
-  const tabsValue = useRef(tabs);
-  const { getAppFileUrlByFileCode } = getEngineApis();
-
-  useEffect(() => {
-    const tabsDataCopy = [...tabsData];
-    tabsDataCopy.forEach((e: any, index: number) => {
-      const item = e;
-      if (item.defaultSelected && !pathName) {
-        setPathName(item.key);
-      }
-      item.icon = (active: boolean) => {
-        return (
-          <TabImage
-            getAppFileUrlByFileCode={getAppFileUrlByFileCode}
-            titleColor={titleColor}
-            selectedTitleColor={selectedTitleColor}
-            defaultIcon={item.defaultIcon}
-            selectedIcon={item.selectedIcon}
-            isSelected={active}
-            className="icon"
-          />
-        );
-      };
-      item.title = (active: boolean) => {
-        if (active) {
-          return (
-            <span
-              style={{
-                color: selectedTitleColor,
-                fontSize: `${titleFontSize}px`,
-              }}
-            >
-              {item.titleText}
-            </span>
-          );
-        }
-        return <span style={{ color: titleColor, fontSize: `${titleFontSize}px` }}>{item.titleText}</span>;
-      };
-      if (item.badgeData === 'point') {
-        item.badge = { content: Badge.dot, style: { '--top': '15%' } };
-      } else if (item.badgeData && item.badgeData.length > 0) {
-        item.badge = { content: item.badgeData, style: { '--top': '25%' } };
-      }
-    });
-    tabsValue.current = tabsDataCopy;
-    setTabs([...tabsDataCopy]);
-  }, [tabsData]);
-
-  const tabComs = useMemo(() => {
-    return tabs.map((item: any) => <TabBar.Item key={item.key} icon={item.icon} title={item.title} badge={item.badge} />);
-  }, [tabs]);
-
-  return (
-    <div className={`${prefixCls}-app`}>
-      <div className="my-apptabbar-body">
-        <TabPage
-          paths={tabs}
-          selectedPath={pathName}
-          getEngineApis={getEngineApis}
-          $$componentItem={$$componentItem}
-          lcdpParentRenderId={lcdpParentRenderId}
-        />
-      </div>
-      <div className="my-apptabbar-bottom" style={{ background: tabBarBackground }}>
-        <TabBar
-          safeArea
-          activeKey={pathName}
-          onChange={(value: any) => {
-            if (pathName === value) return;
-            setPathName(value);
-            let seletcedIndex = 0;
-            tabs.forEach((item: any, index: number) => {
-              if (item.key === value) {
-                seletcedIndex = index;
-              }
-            });
-            if (onChange) {
-              onChange(seletcedIndex + 1);
-            }
-          }}
-        >
-          {tabComs}
-        </TabBar>
-      </div>
-    </div>
-  );
-};
-
-export default MyTabBar;
+import React, { useImperativeHandle } from 'react';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import TabBarLoader from './loader';
+
+const TabBar = LingxiForwardRef<unknown, any>((props, ref) => {
+  useImperativeHandle(ref, () => ({
+    // 这里暴漏部分指令方法，后续有需要可以补充
+  }));
+  
+  return <TabBarLoader {...props} />;
+});
+
+export default TabBar;

package/lib/h5public/src/components/factory/src/TabBar/loader.tsx

@@ -0,0 +1,9 @@
+import Loadable from 'react-loadable';
+import { LoadingComponennt } from '../utils/LoaderHelper';
+
+const LoadableLXRadarChart = Loadable({
+  loader: async () => (await import(/* webpackChunkName: 'factory-TabBar' */ './TabBar')) as unknown as React.ComponentType<any>,
+  loading: LoadingComponennt,
+});
+
+export default LoadableLXRadarChart;

package/lib/h5public/src/components/factory/src/Table/Table.tsx

@@ -0,0 +1,124 @@
+import Table from '@lingxiteam/antd-mobile-plus/es/Table';
+import { TableType } from '@lingxiteam/antd-mobile-plus/es/Table/PropsType';
+import React, { useEffect } from 'react';
+import { LingxiForwardRef } from '@lingxiteam/types';
+
+export interface MyTableProps extends Omit<TableType, 'dataSource'> {
+  data?: TableType['columns'];
+  dataSource: any[];
+  dataMap: any;
+  style?: any;
+  isBindData?: boolean;
+  getValueAction?: any;
+  remotedataColumns?: TableType['columns'];
+  remoteDataSource: any[];
+  setRemoteDataColumns: (columns: TableType['columns']) => void;
+  setRemoteDataSource: (dataSource: TableType['dataSource']) => void;
+}
+
+const MyTable = LingxiForwardRef<any, MyTableProps>((props, ref) => {
+  const {
+    style,
+    getValueAction,
+    $$componentItem,
+    getEngineApis,
+    dataMap,
+    data,
+    isBindData,
+    dataSource,
+    remotedataColumns,
+    remoteDataSource,
+    setRemoteDataColumns,
+    setRemoteDataSource,
+    ...restProps
+  } = props;
+
+  const { service: { commonFetch } } = getEngineApis();
+
+  const { titleBackground, titleColor, leftTitleColor, leftBackground, ...restStyle } = style;
+  const firstLeftStyle: any = {};
+
+
+  if (leftTitleColor) {
+    firstLeftStyle.color = leftTitleColor;
+  }
+  if (leftBackground) {
+    firstLeftStyle.background = leftBackground;
+  }
+  if (dataMap.type === 'custom' && Array.isArray(data)) {
+    useEffect(() => {
+      setRemoteDataColumns(dataMap.data);
+      setRemoteDataSource(dataMap.dataSource);
+    }, [dataMap]);
+  } else if (dataMap.type === 'service') {
+    const { service } = dataMap;
+    const { requestParam, selectedService } = service;
+    const dataColumnsKey = service.data;
+    const dataSourceKey = service.dataSource;
+
+    const getTableData = async (method: string, api: string, params: any) => {
+      // @ts-ignore
+      return commonFetch(method || 'post', api || '', params);
+    };
+
+    useEffect(() => {
+      const params: any = {};
+      if (typeof requestParam === 'string') {
+        params.parameters = JSON.parse(requestParam);
+      }
+      params.serviceCode = selectedService.serviceCode || '';
+      params.appId = selectedService.appId || '';
+      params.serviceVersionId = selectedService.serviceVersionId || '';
+      params.version = selectedService.versionCode || '1.0';
+
+      getTableData(selectedService.serviceMethod, selectedService.api, params).then((res: any) => {
+        if (typeof res === 'object') {
+          const columnData = res[dataColumnsKey] || [];
+          const columnDataCopy: any[] = [];
+          if (Array.isArray(columnData)) {
+            columnData.forEach((item: any) => {
+              const itemCopy = { ...item } || {};
+              if (!itemCopy.width) {
+                itemCopy.width = 100;
+              } else if (typeof itemCopy.width === 'string') {
+                itemCopy.width = parseFloat(itemCopy.width);
+              }
+              columnDataCopy.push(itemCopy);
+            });
+          }
+          setRemoteDataColumns(columnDataCopy);
+          setRemoteDataSource(res[dataSourceKey] || []);
+        }
+      });
+    }, []);
+  }
+
+  useEffect(() => {
+    // 绑定数据
+    if (isBindData) {
+      setRemoteDataColumns(data);
+      setRemoteDataSource(dataSource);
+    }
+  }, [data, dataSource]);
+
+  useEffect(() => {
+    if (getValueAction) {
+      getValueAction({ data: remotedataColumns, dataSource: remoteDataSource });
+    }
+  }, [getValueAction]);
+
+
+  return (
+    <Table
+      {...restProps}
+      columns={remotedataColumns}
+      dataSource={remoteDataSource}
+      titleBackground={titleBackground}
+      titleColor={titleColor}
+      firstLeftStyle={firstLeftStyle}
+      style={restStyle}
+    />
+  );
+});
+
+export default MyTable;

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

@@ -1,120 +1,37 @@
-import { Table, TableType } from '@lingxiteam/antd-mobile-plus';
+import React, { useImperativeHandle, useState } from 'react';
 import { LingxiForwardRef } from '@lingxiteam/types';
-import React, { useEffect, useImperativeHandle, useState } from 'react';
+import TableLoader from './loader';
 import useAsyncState from '../utils/hooks/useAsyncState';
 
-export interface MyTableProps extends Omit<TableType, 'dataSource'> {
-  data?: TableType['columns'];
-  dataSource?: TableType['dataSource'];
-  dataMap: any;
-  style?: any;
-  isBindData?: boolean;
-  getValueAction?: any;
-}
-
-const MyTable = LingxiForwardRef<any, MyTableProps>((props, ref) => {
-  const { style, getValueAction, $$componentItem, getEngineApis, ...restProps } = props;
-
-  const {
-    service: { commonFetch },
-  } = getEngineApis();
-
+const Table = LingxiForwardRef<unknown, any>((props, ref) => {
   const [{ data, dataMap, dataSource, isBindData }, setState] = useAsyncState({
     data: props.data,
     dataMap: props.dataMap,
     dataSource: props.dataSource,
     isBindData: props.isBindData ?? false,
   });
-  const { titleBackground, titleColor, leftTitleColor, leftBackground, ...restStyle } = style;
-  const firstLeftStyle: any = {};
+
   const [remotedataColumns, setRemoteDataColumns] = useState<any>([]);
   const [remoteDataSource, setRemoteDataSource] = useState<any>([]);
 
-  if (leftTitleColor) {
-    firstLeftStyle.color = leftTitleColor;
-  }
-  if (leftBackground) {
-    firstLeftStyle.background = leftBackground;
-  }
-  if (dataMap.type === 'custom' && Array.isArray(data)) {
-    useEffect(() => {
-      setRemoteDataColumns(dataMap.data);
-      setRemoteDataSource(dataMap.dataSource);
-    }, [dataMap]);
-  } else if (dataMap.type === 'service') {
-    const { service } = dataMap;
-    const { requestParam, selectedService } = service;
-    const dataColumnsKey = service.data;
-    const dataSourceKey = service.dataSource;
-
-    const getTableData = async (method: string, api: string, params: any) => {
-      // @ts-ignore
-      return commonFetch(method || 'post', api || '', params);
-    };
-
-    useEffect(() => {
-      const params: any = {};
-      if (typeof requestParam === 'string') {
-        params.parameters = JSON.parse(requestParam);
-      }
-      params.serviceCode = selectedService.serviceCode || '';
-      params.appId = selectedService.appId || '';
-      params.serviceVersionId = selectedService.serviceVersionId || '';
-      params.version = selectedService.versionCode || '1.0';
-
-      getTableData(selectedService.serviceMethod, selectedService.api, params).then((res: any) => {
-        if (typeof res === 'object') {
-          const columnData = res[dataColumnsKey] || [];
-          const columnDataCopy: any[] = [];
-          if (Array.isArray(columnData)) {
-            columnData.forEach((item: any) => {
-              const itemCopy = { ...item } || {};
-              if (!itemCopy.width) {
-                itemCopy.width = 100;
-              } else if (typeof itemCopy.width === 'string') {
-                itemCopy.width = parseFloat(itemCopy.width);
-              }
-              columnDataCopy.push(itemCopy);
-            });
-          }
-          setRemoteDataColumns(columnDataCopy);
-          setRemoteDataSource(res[dataSourceKey] || []);
-        }
-      });
-    }, []);
-  }
-
-  useEffect(() => {
-    // 绑定数据
-    if (isBindData) {
-      setRemoteDataColumns(data);
-      setRemoteDataSource(dataSource);
-    }
-  }, [data, dataSource]);
-
-  useEffect(() => {
-    if (getValueAction) {
-      getValueAction({ data: remotedataColumns, dataSource: remoteDataSource });
-    }
-  }, [getValueAction]);
-
   useImperativeHandle(ref, () => ({
+    // 这里暴漏部分指令方法，后续有需要可以补充
     reloadAppTableData: setState,
     dataSource: remoteDataSource,
     data: remotedataColumns,
   }));
-
-  return (
-    <Table
-      {...restProps}
-      columns={remotedataColumns}
-      dataSource={remoteDataSource}
-      titleBackground={titleBackground}
-      titleColor={titleColor}
-      firstLeftStyle={firstLeftStyle}
-      style={restStyle}
-    />
-  );
+  
+  return <TableLoader
+    {...props}
+    data={data}
+    dataMap={dataMap}
+    dataSource={dataSource}
+    isBindData={isBindData}
+    remotedataColumns={remotedataColumns}
+    remoteDataSource={remoteDataSource}
+    setRemoteDataColumns={setRemoteDataColumns}
+    setRemoteDataSource={setRemoteDataSource}
+  />;
 });
 
-export default MyTable;
+export default Table;

package/lib/h5public/src/components/factory/src/Table/loader.tsx

@@ -0,0 +1,9 @@
+import Loadable from 'react-loadable';
+import { LoadingComponennt } from '../utils/LoaderHelper';
+
+const LoadableLXRadarChart = Loadable({
+  loader: async () => (await import(/* webpackChunkName: 'factory-Table' */ './Table')) as unknown as React.ComponentType<any>,
+  loading: LoadingComponennt,
+});
+
+export default LoadableLXRadarChart;

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

@@ -1,8 +1,8 @@
-import { LingxiForwardRef } from '@lingxiteam/types';
 import React, { useMemo } from 'react';
-import useHiddenStyle from '../utils/hooks/useHiddenStyle';
-import { withTransformProps } from '../utils/withTransformProps';
 import transformProps from './transformProps';
+import { withTransformProps } from '../utils/withTransformProps';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import useHiddenStyle from '../utils/hooks/useHiddenStyle';
 
 export interface MyTextprops {
   showHtml?: boolean;
@@ -22,20 +22,27 @@ const Text = LingxiForwardRef<any, MyTextprops>((props, ref) => {
    */
   const { customs, attrNbrInfo } = textReg || {};
 
-  const getRegStr = (str: string) => (/^\/.+\/.*/g.test(str) ? str.replace(/^\//, '').replace(/\/$/g, '') : str);
+  const getRegStr = (str: string) =>
+    /^\/.+\/.*/g.test(str) ? str.replace(/^\//, '').replace(/\/$/g, '') : str;
 
-  const getRegMap = (array: string[], originKey: string, targetKey: string): [Record<string, any>, string[]] => {
+  const getRegMap = (
+    array: string[],
+    originKey: string,
+    targetKey: string,
+  ): [Record<string, any>, string[]] => {
     const regExpMap = {};
-    const regExpSort = [...array].sort((a: any, b: any) => String(b[originKey]).length - String(a[originKey]).length);
-    regExpSort.forEach(c => {
+    const regExpSort = [...array].sort(
+      (a: any, b: any) => String(b[originKey]).length - String(a[originKey]).length,
+    );
+    regExpSort.forEach((c) => {
       // @ts-ignore
       regExpMap[getRegStr(c[originKey])] = c[targetKey];
     });
     // @ts-ignore
-    return [regExpMap, regExpSort.map(c => c[originKey])];
+    return [regExpMap, regExpSort.map((c) => c[originKey])];
   };
   const getRegMapItem = (map: any, item: string) => {
-    const key = Object.keys(map).find(c => new RegExp(c).test(item)) || '';
+    const key = Object.keys(map).find((c) => new RegExp(c).test(item)) || '';
     return map[key];
   };
   const getFinalStr = (array: string[], originKey: string, targetKey: string) => {
@@ -43,12 +50,14 @@ const Text = LingxiForwardRef<any, MyTextprops>((props, ref) => {
     const reStr = `(${customRegSort.join('|')})`;
     const newReg = new RegExp(reStr, 'g');
     const pcontent = typeof children === 'string' ? children : '';
-    return pcontent.replace(newReg, it => customRegMap[it] || getRegMapItem(customRegMap, it));
+    return pcontent.replace(newReg, (it) => customRegMap[it] || getRegMapItem(customRegMap, it));
   };
   const showContent = useMemo(() => {
     if (textReg) {
       if (Array.isArray(attrNbrInfo) && attrNbrInfo.length) {
-        return attrNbrInfo?.length ? getFinalStr(attrNbrInfo, 'value', 'label') : children;
+        return attrNbrInfo?.length
+          ? getFinalStr(attrNbrInfo, 'value', 'label')
+          : children;
       }
       if (Array.isArray(customs) && customs.length) {
         return getFinalStr(customs, 'text', 'translation');
@@ -78,8 +87,7 @@ const Text = LingxiForwardRef<any, MyTextprops>((props, ref) => {
             ...hiddenStyle,
           }}
           {...restProps}
-        >
-          {showContent || name}
+        >{showContent || name}
         </span>
       )}
     </>

package/lib/h5public/src/components/factory/src/VideoPlayer/ViewPlayer.tsx

@@ -1,7 +1,7 @@
-import { LingxiForwardRef } from '@lingxiteam/types';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useState, useEffect, useMemo, useRef } from 'react';
 import type { ReactPlayerProps } from 'react-player';
 import ReactPlayer from 'react-player';
+import { LingxiForwardRef } from '@lingxiteam/types';
 
 const VideoPlayer = LingxiForwardRef<any, ReactPlayerProps>((props, ref) => {
   const {
@@ -97,11 +97,7 @@ const VideoPlayer = LingxiForwardRef<any, ReactPlayerProps>((props, ref) => {
   return (
     <div
       ref={videoRef}
-      style={{
-        width: '100%',
-        height: videoHeight,
-        borderRadius: style?.borderRadius || '0px',
-      }}
+      style={{ width: '100%', height: videoHeight, borderRadius: style?.borderRadius || '0px' }}
     >
       <ReactPlayer
         width={width || '100%'}

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

@@ -1,7 +1,8 @@
+import ViewPlayerLoader from './loader';
+import type { ReactPlayerProps } from 'react-player';
 import { LingxiForwardRef } from '@lingxiteam/types';
 import React, { useImperativeHandle } from 'react';
-import type { ReactPlayerProps } from 'react-player';
-import ViewPlayerLoader from './loader';
+
 
 const ViewPlayer = LingxiForwardRef<unknown, ReactPlayerProps>((props, ref) => {
   useImperativeHandle(ref, () => ({}));

package/lib/h5public/src/components/factory/src/VideoPlayer/loader.ts

@@ -1,10 +1,11 @@
 import Loadable from 'react-loadable';
-import type { ReactPlayerProps } from 'react-player';
 import { LoadingComponennt } from '../utils/LoaderHelper';
+import type { ReactPlayerProps } from 'react-player';
+
 
 const ViewPlayerLoader = Loadable<ReactPlayerProps, React.ComponentType<ReactPlayerProps>>({
   // eslint-disable-next-line func-call-spacing
-  loader: async () => (await import(/* webpackChunkName: 'factory-ViewPlayer' */ './ViewPlayer')) as unknown as React.ComponentType<any>,
+  loader: async () => (await import /* webpackChunkName: 'factory-ViewPlayer' */ ('./ViewPlayer')) as unknown as React.ComponentType<any>,
   loading: LoadingComponennt,
 });
 

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

@@ -1,11 +1,11 @@
+import React, { useRef, useState, useEffect } from 'react';
+import type { AppViewProps } from './useStyle';
+import useStyle from './useStyle';
 import { LingxiForwardRef } from '@lingxiteam/types';
+import transformProps from './transformProps';
+import { withTransformProps } from '../utils/withTransformProps';
 import { useThrottleFn } from 'ahooks';
-import React, { useEffect, useRef, useState } from 'react';
 import useHiddenStyle from '../utils/hooks/useHiddenStyle';
-import { withTransformProps } from '../utils/withTransformProps';
-import transformProps from './transformProps';
-import type { AppViewProps } from './useStyle';
-import useStyle from './useStyle';
 
 const AppView = LingxiForwardRef<any, AppViewProps>((props, ref) => {
   const { backgroundType = {}, fileCode, src, $$componentItem, visible, getEngineApis, onClick, visibility = false, ...restProps } = props;
@@ -16,11 +16,7 @@ const AppView = LingxiForwardRef<any, AppViewProps>((props, ref) => {
   const { getAppFileUrlByFileCode } = getEngineApis() || {};
   useEffect(() => {
     if (backgroundType.image || fileCode) {
-      setImgSrc(
-        getAppFileUrlByFileCode(backgroundType.image || fileCode, {
-          appId: $$componentItem.appId,
-        })
-      );
+      setImgSrc(getAppFileUrlByFileCode(backgroundType.image || fileCode, { appId: $$componentItem.appId }));
     }
   }, [backgroundType, src, fileCode]);
   const viewRef = useRef<any>();
@@ -29,17 +25,15 @@ const AppView = LingxiForwardRef<any, AppViewProps>((props, ref) => {
       ...props,
       src: imgSrc,
     },
-    viewRef
-  );
-  const { run } = useThrottleFn(
-    e => {
-      onClick && onClick(e);
-    },
-    {
-      wait: 200,
-      trailing: false,
-    }
+    viewRef,
   );
+  const { run } = useThrottleFn((e) => {
+    onClick && onClick(e);
+  },
+  {
+    wait: 200,
+    trailing: false,
+  });
   if (visible === false && isDid.current === false) {
     return null;
   }

package/lib/h5public/src/components/factory/src/View/useStyle.ts

@@ -1,7 +1,7 @@
-import _ from 'lodash';
-import type React from 'react';
 import type { CSSProperties } from 'react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import type React from 'react';
+import _ from 'lodash';
+import { useMemo, useState, useEffect, useCallback } from 'react';
 import { getImageSize } from '../utils/getImageSize';
 // import { $$componentItem } from '../interfaces/types';
 
@@ -17,7 +17,10 @@ export interface AppViewProps {
   // $$componentItem?: $$componentItem;
 }
 
-const useStyle = (props: AppViewProps, ref: React.MutableRefObject<HTMLDivElement | null | undefined>) => {
+const useStyle = (
+  props: AppViewProps,
+  ref: React.MutableRefObject<HTMLDivElement | null | undefined>,
+) => {
   const { src: imgSrc, style, backgroundType = {} } = props;
   const { mode, type, color, startColor, endColor } = backgroundType || {};
   const [size, setSize] = useState({
@@ -112,7 +115,7 @@ const useStyle = (props: AppViewProps, ref: React.MutableRefObject<HTMLDivElemen
       targetStyle.background = `linear-gradient(to bottom, ${startColor}, ${endColor})`;
     } else if (type === 'image') {
       const imageStyle: any = getImageStyle();
-      Object.keys(imageStyle).forEach(key => {
+      Object.keys(imageStyle).forEach((key) => {
         targetStyle[key] = imageStyle[key];
       });
     }

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

@@ -1,6 +1,10 @@
+import React, { useRef, useEffect, useState, useImperativeHandle } from 'react';
+import {
+  addEventListenerMessage,
+  postMessageToContentWindow,
+  removeEventListenerMessage,
+} from 'lcdp-message';
 import { LingxiForwardRef } from '@lingxiteam/types';
-import { addEventListenerMessage, postMessageToContentWindow, removeEventListenerMessage } from 'lcdp-message';
-import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
 
 export interface WebviewProps {
   visible?: boolean;
@@ -13,7 +17,7 @@ export interface WebviewProps {
 }
 
 const Webview = LingxiForwardRef<any, WebviewProps>((props, ref) => {
-  const { __compId, onMessage = () => {}, title, visible = true, src: mySrc, $$componentItem, getEngineApis, onUnload, ...restProps } = props;
+  const { __compId, onMessage = () => { }, title, visible = true, src: mySrc, $$componentItem, getEngineApis, onUnload, ...restProps } = props;
   const webViewRef = useRef<HTMLIFrameElement | null>(null);
   const [src, setSrc] = useState(mySrc);
   const [update, setUpdate] = useState(() => String(Date.now()));
@@ -44,10 +48,18 @@ const Webview = LingxiForwardRef<any, WebviewProps>((props, ref) => {
     const unload = () => {
       onUnload?.();
     };
-    contentWindow?.addEventListener('unload', unload);
+    try {
+      contentWindow?.addEventListener('unload', unload);
+    } catch (error) {
+      console.error('Error adding event listener:', error);
+    }
     return () => {
-      contentWindow?.removeEventListener?.('unload', unload);
-      removeEventListenerMessage(fn);
+      try {
+        contentWindow?.removeEventListener?.('unload', unload);
+        removeEventListenerMessage(fn);
+      } catch (error) {
+        console.error('Error removing event listener:', error);
+      }
     };
   }, []);