feat: iframe嵌入功能支持全屏显示

src/pages/system/iframe/HocContainer.js

-import React, { memo } from "react";
-import SecurityLayout from "../../../layouts/SecurityLayout";
+import React from 'react';
+import SecurityLayout from '../../../layouts/SecurityLayout';
 
-const HocContainer = Component => {
-  return (props) => {
-    return (
-      <SecurityLayout>
-        <Component {...props} />
-      </SecurityLayout>
-    )
-  }
-}
+const HocContainer = Component => props => (
+  <SecurityLayout>
+    <Component {...props} />
+  </SecurityLayout>
+);
 
-export default HocContainer;
\ No newline at end of file
+export default HocContainer;

src/pages/system/iframe/TabWidget.js

-import React, { memo } from 'react';
+import React, { memo, useEffect, useRef } from 'react';
+import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
 import Iframe from 'react-iframe';
 import Empty from '@wisdom-components/empty';
 import styles from './index.less';
 import Hoc from './HocContainer';
+import useFullScreen from './useFullScreen';
 
-const TabWidget = ({ params }) => {
-  const { linkUrl } = params || {};
+const TabWidget = props => {
+  const params = Object.assign({}, props.params, {
+    fullscreen: !(props.params !== undefined && props.params.fullscreen === 'true'),
+  });
+  const { linkUrl, fullscreen } = params;
+  const [ref, isFullscreen, handleFullScreen, handleExitFullScreen] = useFullScreen(fullscreen);
 
   return (
-    <div className={styles['tab-iframe']}>
+    <div className={styles['tab-iframe']} ref={ref}>
+      <div className={styles['oper-wrap']}>
+        <div className={styles['oper-btn']}>
+          {isFullscreen ? (
+            <FullscreenExitOutlined className={styles['btn-fullscreen_exit']} onClick={handleExitFullScreen} />
+          ) : (
+            <FullscreenOutlined className={styles['btn-fullscreen']} onClick={handleFullScreen} />
+          )}
+        </div>
+      </div>
+
       {linkUrl ? (
         <Iframe
           url={linkUrl}
@@ -19,7 +35,7 @@ const TabWidget = ({ params }) => {
           styles={{ border: 'none' }}
         />
       ) : (
-        <Empty description="配置url链接才能显示哦！"/>
+        <Empty description="配置url链接才能显示哦！" />
       )}
     </div>
   );

src/pages/system/iframe/index.less

@@ -3,4 +3,33 @@
   height: 100%;
   position: relative;
   overflow: hidden;
+
+  iframe {
+    border: none;
+  }
+
+
+  .oper-wrap {
+    top: 0;
+    right: 0;
+    width: 100px;
+    height: 100px;
+    position: absolute;
+
+    .oper-btn {
+      cursor: pointer;
+      color: #FFF;
+      position: absolute;
+      top: 10px;
+      right: -100%;
+      transition: right ease-in-out 0.8s;
+    }
+
+    &:hover {
+      .oper-btn {
+        right: 20px;
+      }
+    }
+  }
+
 }
\ No newline at end of file

src/pages/system/iframe/useFullScreen.js

+import { useState, useEffect, useCallback, useRef } from 'react';
+
+const useFullScreen = needFullscreen => {
+  const [isFullscreen, setIsFullscreen] = useState(!!document.fullscreenElement);
+  const ref = useRef();
+
+  useEffect(() => {
+    const handleToggleFullScreen = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+    document.addEventListener('fullscreenchange', handleToggleFullScreen);
+    return () => {
+      document.removeEventListener('fullscreenchange', handleToggleFullScreen);
+    };
+  }, []);
+
+  const handleFullScreen = useCallback(() => {
+    ref.current?.requestFullscreen();
+  }, []);
+
+  const handleExitFullScreen = useCallback(() => {
+    document.exitFullscreen();
+  }, []);
+
+  useEffect(() => {
+    needFullscreen && handleFullScreen();
+  }, [handleFullScreen, needFullscreen]);
+
+  return [ref, isFullscreen, handleFullScreen, handleExitFullScreen];
+};
+
+export default useFullScreen;