fix: iframe修改

package.json

@@ -115,9 +115,9 @@
         "@wisdom-map/arcgismap": "1.4.0-254",
         "@wisdom-map/basemap": "1.1.0-41",
         "@wisdom-map/util": "^1.0.28-0",
-        "@wisdom-utils/components": "0.1.344",
+        "@wisdom-utils/components": "0.1.345",
         "@wisdom-utils/runtime": "0.0.48",
-        "@wisdom-utils/utils": "0.1.384",
+        "@wisdom-utils/utils": "0.1.385",
         "animate.css": "^4.1.1",
         "antd": "4.21.2",
         "long": "^5.2.3",

src/assets/images/commonMenu/放大-01.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="隔离模式" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M2.56,1.5h2.69C5.66,1.5,6,1.16,6,0.75C6,0.34,5.66,0,5.25,0h-4.5C0.34,0,0,0.34,0,0.75v4.5
+			C0,5.66,0.34,6,0.75,6C1.16,6,1.5,5.66,1.5,5.25V2.56l3.22,3.22c0.19,0.19,0.47,0.27,0.73,0.2c0.26-0.07,0.47-0.27,0.54-0.54
+			c0.07-0.26-0.01-0.54-0.2-0.73L2.56,1.5z M16.5,2.56v2.69C16.5,5.66,16.84,6,17.25,6C17.66,6,18,5.66,18,5.25v-4.5
+			C18,0.34,17.66,0,17.25,0h-4.5C12.34,0,12,0.34,12,0.75c0,0.41,0.34,0.75,0.75,0.75h2.69l-3.22,3.22
+			c-0.19,0.19-0.27,0.47-0.2,0.73c0.07,0.26,0.27,0.47,0.54,0.54c0.26,0.07,0.54-0.01,0.73-0.2L16.5,2.56z M2.56,16.5h2.69
+			C5.66,16.5,6,16.84,6,17.25C6,17.66,5.66,18,5.25,18h-4.5C0.34,18,0,17.66,0,17.25v-4.5C0,12.34,0.34,12,0.75,12
+			c0.41,0,0.75,0.34,0.75,0.75v2.69l3.22-3.22c0.19-0.19,0.47-0.27,0.73-0.2c0.26,0.07,0.47,0.27,0.54,0.54
+			c0.07,0.26-0.01,0.54-0.2,0.73L2.56,16.5z M16.5,15.44v-2.69c0-0.41,0.34-0.75,0.75-0.75c0.41,0,0.75,0.34,0.75,0.75v4.5
+			c0,0.41-0.34,0.75-0.75,0.75h-4.5C12.34,18,12,17.66,12,17.25c0-0.41,0.34-0.75,0.75-0.75h2.69l-3.22-3.22
+			c-0.19-0.19-0.27-0.47-0.2-0.73c0.07-0.26,0.27-0.47,0.54-0.54c0.26-0.07,0.54,0.01,0.73,0.2L16.5,15.44z M16.5,15.44"/>
+	</g>
+</g>
+</svg>

src/assets/images/commonMenu/缩小-01.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="隔离模式" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M2.56,1.5h2.69C5.66,1.5,6,1.16,6,0.75C6,0.34,5.66,0,5.25,0h-4.5C0.34,0,0,0.34,0,0.75v4.5
+		C0,5.66,0.34,6,0.75,6C1.16,6,1.5,5.66,1.5,5.25V1.5H2.56z M12.61,4.33V1.64c0-0.41-0.34-0.75-0.75-0.75
+		c-0.41,0-0.75,0.34-0.75,0.75v4.5c0,0.41,0.34,0.75,0.75,0.75h4.5c0.41,0,0.75-0.34,0.75-0.75c0-0.41-0.34-0.75-0.75-0.75h-2.69
+		l4.1-4.1c0.19-0.19,0.27-0.47,0.2-0.73c-0.07-0.26-0.27-0.47-0.54-0.54c-0.26-0.07-0.54,0.01-0.73,0.2L12.61,4.33z M4.37,12.57
+		H1.68c-0.41,0-0.75-0.34-0.75-0.75c0-0.41,0.34-0.75,0.75-0.75h4.5c0.41,0,0.75,0.34,0.75,0.75v4.5c0,0.41-0.34,0.75-0.75,0.75
+		c-0.41,0-0.75-0.34-0.75-0.75v-2.69l-4.14,4.14c-0.19,0.19-0.47,0.27-0.73,0.2c-0.26-0.07-0.47-0.27-0.54-0.54
+		c-0.07-0.26,0.01-0.54,0.2-0.73L4.37,12.57z M16.5,16.5v-3.75c0-0.41,0.34-0.75,0.75-0.75c0.41,0,0.75,0.34,0.75,0.75v4.5
+		c0,0.41-0.34,0.75-0.75,0.75h-4.5C12.34,18,12,17.66,12,17.25c0-0.41,0.34-0.75,0.75-0.75h2.69H16.5z M16.5,16.5"/>
+</g>
+</svg>

src/assets/images/commonMenu/退出-01.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="隔离模式" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M12.75,3.44c-0.41-0.23-0.54-0.74-0.29-1.12c0.24-0.39,0.77-0.51,1.18-0.28C16.34,3.59,18,6.39,18,9.41
+		C18,14.15,13.97,18,9,18c-4.97,0-9-3.85-9-8.59c0-3.05,1.68-5.83,4.38-7.37C4.78,1.8,5.31,1.93,5.55,2.32
+		C5.8,2.71,5.66,3.21,5.26,3.44C3.06,4.7,1.71,6.96,1.71,9.41c0,3.84,3.26,6.95,7.29,6.95c4.02,0,7.29-3.11,7.29-6.95
+		C16.29,6.94,14.93,4.69,12.75,3.44L12.75,3.44z M9,0c0.47,0,0.86,0.37,0.86,0.82v6.54c0,0.45-0.38,0.82-0.86,0.82
+		c-0.47,0-0.86-0.37-0.86-0.82V0.82C8.14,0.37,8.53,0,9,0L9,0z M9,0"/>
+</g>
+</svg>

src/pages/system/iframe/TabWidget.js

@@ -3,21 +3,18 @@
  * @Author: hongmye
  * @Date: 2023-01-10 11:18:55
  */
-import React, { memo, useEffect, useRef } from 'react';
-import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
+import React, { memo, useEffect } from 'react';
 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 = 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);
-
+  const [ref, isFullscreen, handleFullScreen, handleExitFullScreen, handleExit] = useFullScreen(fullscreen);
   const goToPath = (name, data, widgetId) => {
     try {
       const routes = window.globalConfig?.allWidgets || [];
@@ -76,17 +73,21 @@ const TabWidget = props => {
       <div className={styles['oper-wrap']}>
         <div className={styles['oper-btn']}>
           {isFullscreen ? (
-            <span className={styles['btn-fullscreen_exit']} onClick={handleExitFullScreen} />
+            <>
+              <div className={styles['btn-fullscreen_container']}>
+                <span className={styles['btn-fullscreen_reduce']} onClick={handleExitFullScreen} />
+              </div>
+              <div className={styles['btn-fullscreen_container']} style={{ marginLeft: '8px' }}>
+                <span className={styles['btn-fullscreen_exit']} onClick={handleExit} />
+              </div>
+            </>
           ) : (
-            <FullscreenOutlined
-              className={styles['btn-fullscreen']}
-              style={{ width: '1.2rem', height: '1.2rem' }}
-              onClick={handleFullScreen}
-            />
+            <div className={styles['btn-fullscreen_container']}>
+              <span className={styles['btn-fullscreen_full']} onClick={handleFullScreen} />
+            </div>
           )}
         </div>
       </div>
-
       {linkUrl ? (
         <Iframe
           url={linkUrl}

src/pages/system/iframe/index.less

@@ -51,21 +51,55 @@
       top: 10px;
       right: 15px;
       transition: right ease-in-out 0.8s;
+      display: flex;
+    }
+
+    .btn-fullscreen_container {
+      display: flex;
+      width: 32px;
+      height: 32px;
+      background: #ffffff26;
+      border-radius: 4px;
+    }
+
+    .btn-fullscreen_exit,
+    .btn-fullscreen_full,
+    .btn-fullscreen_reduce {
+      width: 18px;
+      height: 18px;
+      opacity: 0.7;
+      margin: auto;
     }
 
     .btn-fullscreen_exit {
-      display: block;
-      width: 1.2rem;
-      height: 1.2rem;
-      background-image: url('../../../assets/images/commonMenu/退出.svg');
+      background-image: url('../../../assets/images/commonMenu/退出-01.svg');
+    }
+
+    .btn-fullscreen_full {
+      background-image: url('../../../assets/images/commonMenu/放大-01.svg');
+    }
+
+    .btn-fullscreen_reduce {
+      background-image: url('../../../assets/images/commonMenu/缩小-01.svg');
+    }
+
+    .btn-fullscreen_exit:hover,
+    .btn-fullscreen_full:hover,
+    .btn-fullscreen_reduce:hover {
+      opacity: 1;
     }
 
     .btn-fullscreen {
+      opacity: 0.7;
       svg {
         width: 1.2rem;
         height: 1.2rem;
       }
     }
+
+    .btn-fullscreen:hover {
+      opacity: 1;
+    }
   }
 }
 .IntegratedLogin {

src/pages/system/iframe/useFullScreen.js

@@ -22,11 +22,16 @@ const useFullScreen = needFullscreen => {
     document.exitFullscreen();
   }, []);
 
+  const handleExit = useCallback(() => {
+    window.history.replaceState({ delete: true }, null, `/civbase/${window.globalConfig.homepage}`);
+    document.exitFullscreen();
+  }, []);
+
   useEffect(() => {
     needFullscreen && handleFullScreen();
   }, [handleFullScreen, needFullscreen]);
 
-  return [ref, isFullscreen, handleFullScreen, handleExitFullScreen];
+  return [ref, isFullscreen, handleFullScreen, handleExitFullScreen, handleExit];
 };
 
 export default useFullScreen;