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

import FullScreenFrame from '@/components/FullScreenFrame';
import { getKnowledgeGraphUrl, getLabelStudioUrl } from '@/services/developmentEnvironment';
import Loading from '@/utils/loading';
import { to } from '@/utils/promise';
import SessionStorage from '@/utils/sessionStorage';
import { FloatButton } from 'antd';
import classNames from 'classnames';
import { useEffect, useState } from 'react';
import './index.less';

export enum IframePageType {
  DatasetAnnotation = 'DatasetAnnotation', // 数据标注
  AppDevelopment = 'AppDevelopment', // 应用开发
  DevEnv = 'DevEnv', // 开发环境
  GitLink = 'GitLink', // git link
  Aim = 'Aim', // 实验对比
  Knowledge = 'Knowledge', // 知识图谱
  TensorBoard = 'TensorBoard', // 可视化结果
}

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.197:30080/' });
    case IframePageType.DevEnv: // 开发环境
      return () =>
        Promise.resolve({
          code: 200,
          data: SessionStorage.getItem(SessionStorage.editorUrlKey) || '',
        });
    case IframePageType.GitLink: // git link
      return () => Promise.resolve({ code: 200, data: 'http://172.20.32.201:4000' });
    case IframePageType.Aim: // Aim
      return () =>
        Promise.resolve({
          code: 200,
          data: SessionStorage.getItem(SessionStorage.aimUrlKey),
        });
    case IframePageType.Knowledge:
      // 知识图谱
      return getKnowledgeGraphUrl;
    case IframePageType.TensorBoard:
      // TensorBoard
      return () =>
        Promise.resolve({
          code: 200,
          data: SessionStorage.getItem(SessionStorage.tensorBoardUrlKey),
        });
  }
};

type IframePageProps = {
  /** 子系统 */
  type?: IframePageType;
  /** url */
  url?: string;
  /** 是否可以在页签上打开 */
  openInTab?: boolean;
  /** 是否显示加载 */
  showLoading?: boolean;
  /** 自定义样式类名 */
  className?: string;
  /** 自定义样式 */
  style?: React.CSSProperties;
};

/** 系统内嵌 iframe，目前系统有数据标注、应用开发、开发环境、GitLink 四个子系统，使用时可以添加其他子系统 */
function IframePage({
  type,
  url,
  showLoading = true,
  openInTab = false,
  className,
  style,
}: IframePageProps) {
  const [iframeUrl, setIframeUrl] = useState('');
  // const [loading, setLoading] = useState(false);

  useEffect(() => {
    const requestIframeUrl = async (type: IframePageType) => {
      if (showLoading) {
        Loading.show();
      }
      const [res] = await to(getRequestAPI(type)());
      if (res && res.data) {
        setIframeUrl(res.data);
      } else {
        if (showLoading) {
          Loading.hide();
        }
      }
    };

    if (type) {
      requestIframeUrl(type);
    } else if (url) {
      if (showLoading) {
        Loading.show();
      }

      setIframeUrl(url);
    }
  }, [type, url, showLoading]);

  const handleLoad = () => {
    if (showLoading) {
      Loading.hide();
    }
  };

  const handleError = (error?: React.SyntheticEvent<HTMLIFrameElement, Event>) => {
    console.log('error', error);
    if (showLoading) {
      Loading.hide();
    }
  };

  return (
    <div className={classNames('kf-iframe-page', className)} style={style}>
      {/* {loading && createPortal(<KFSpin size="large" />, document.body)} */}
      {iframeUrl && <FullScreenFrame url={iframeUrl} onLoad={handleLoad} onError={handleError} />}
      {openInTab && <FloatButton onClick={() => window.open(iframeUrl, '_blank')} />}
    </div>
  );
}

export default IframePage;