feat: iframe 添加 loading

react-ui/src/components/FullScreenFrame/index.tsx

@@ -5,12 +5,21 @@ type FullScreenFrameProps = {
   url: string;
   className?: string;
   style?: React.CSSProperties;
+  onload?: () => void;
+  onerror?: () => void;
 };
 
-function FullScreenFrame({ url, className, style }: FullScreenFrameProps) {
+function FullScreenFrame({ url, className, style, onload, onerror }: FullScreenFrameProps) {
   return (
     <div className={classNames('kf-full-screen-frame', className ?? '')} style={style}>
-      {url && <iframe src={url} className="kf-full-screen-frame__iframe"></iframe>}
+      {url && (
+        <iframe
+          src={url}
+          className="kf-full-screen-frame__iframe"
+          onLoad={onload}
+          onError={onerror}
+        ></iframe>
+      )}
     </div>
   );
 }

react-ui/src/components/IFramePage/index.less

@@ -0,0 +1,5 @@
+.kf-iframe-page {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}

react-ui/src/components/IFramePage/index.tsx

@@ -0,0 +1,57 @@
+import FullScreenFrame from '@/components/FullScreenFrame';
+import KFSpin from '@/components/KFSpin';
+import { getLabelStudioUrl } from '@/services/developmentEnvironment';
+import { to } from '@/utils/promise';
+import classNames from 'classnames';
+import { useEffect, useState } from 'react';
+import './index.less';
+
+export enum IframePageType {
+  DatasetAnnotation = 'DatasetAnnotation', // 数据标注
+  AppDevelopment = 'AppDevelopment', // 应用开发
+}
+
+const getRequestAPI = (type: IframePageType): (() => Promise<any>) => {
+  switch (type) {
+    case IframePageType.DatasetAnnotation:
+      return getLabelStudioUrl;
+    case IframePageType.AppDevelopment:
+      return () => Promise.resolve({ code: 200, data: 'http://172.20.32.181:30080/' });
+  }
+};
+
+type IframePageProps = {
+  type: IframePageType;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+function IframePage({ type, className, style }: IframePageProps) {
+  const [iframeUrl, setIframeUrl] = useState('');
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    requestIframeUrl();
+  }, []);
+  const requestIframeUrl = async () => {
+    setLoading(true);
+    const [res] = await to(getRequestAPI(type)());
+    if (res && res.data) {
+      setIframeUrl(res.data);
+    } else {
+      setLoading(false);
+    }
+  };
+
+  const hideLoading = () => {
+    setLoading(false);
+  };
+
+  return (
+    <div className={classNames('kf-iframe-page', className)} style={style}>
+      {loading && <KFSpin />}
+      <FullScreenFrame url={iframeUrl} onload={hideLoading} onerror={hideLoading} />
+    </div>
+  );
+}
+
+export default IframePage;

react-ui/src/pages/Application/index.tsx

@@ -1,9 +1,7 @@
-import FullScreenFrame from '@/components/FullScreenFrame';
-import { useState } from 'react';
+import IframePage, { IframePageType } from '@/components/IFramePage';
 
 function Application() {
-  const [iframeUrl] = useState('http://172.20.32.181:30080/');
-  return <FullScreenFrame url={iframeUrl}></FullScreenFrame>;
+  return <IframePage type={IframePageType.AppDevelopment}></IframePage>;
 }
 
 export default Application;

react-ui/src/pages/DatasetPreparation/DatasetAnnotation/index.tsx

@@ -1,20 +1,7 @@
-import FullScreenFrame from '@/components/FullScreenFrame';
-import { getLabelStudioUrl } from '@/services/developmentEnvironment';
-import { to } from '@/utils/promise';
-import { useEffect, useState } from 'react';
+import IframePage, { IframePageType } from '@/components/IFramePage';
 
 function DatasetAnnotation() {
-  const [iframeUrl, setIframeUrl] = useState('');
-  useEffect(() => {
-    requestIframeUrl();
-  }, []);
-  const requestIframeUrl = async () => {
-    const [res] = await to(getLabelStudioUrl());
-    if (res && res.data) {
-      setIframeUrl(res.data);
-    }
-  };
-  return <FullScreenFrame url={iframeUrl} />;
+  return <IframePage type={IframePageType.DatasetAnnotation}></IframePage>;
 }
 
 export default DatasetAnnotation;