diff --git a/public/ideContainer/imgs/git.svg b/public/ideContainer/imgs/git.svg new file mode 100644 index 0000000..5c9e4aa --- /dev/null +++ b/public/ideContainer/imgs/git.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/ideContainer/imgs/tijiao.svg b/public/ideContainer/imgs/tijiao.svg new file mode 100644 index 0000000..b964c45 --- /dev/null +++ b/public/ideContainer/imgs/tijiao.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/ideContainer/imgs/tongbu.svg b/public/ideContainer/imgs/tongbu.svg new file mode 100644 index 0000000..8b34070 --- /dev/null +++ b/public/ideContainer/imgs/tongbu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/componentDevelopment/componentCoding/index.tsx b/src/pages/componentDevelopment/componentCoding/index.tsx index dac2780..63bcc68 100644 --- a/src/pages/componentDevelopment/componentCoding/index.tsx +++ b/src/pages/componentDevelopment/componentCoding/index.tsx @@ -1,7 +1,7 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, useRef } from 'react'; import styles from './style/index.module.less'; -import { Button, Input, Select, Space } from '@arco-design/web-react'; -import { IconSearch } from '@arco-design/web-react/icon'; +import { Button, Select, Space } from '@arco-design/web-react'; +import { IconFullscreen, IconFullscreenExit } from '@arco-design/web-react/icon'; import { useSelector, useDispatch } from 'react-redux'; import { getMyComponentList } from '@/api/componentBase'; import { updateComponentCodingPath } from '@/store/ideContainer'; @@ -12,6 +12,8 @@ const ComponentCoding = () => { const [serverUrl, setServerUrl] = useState(''); const [optionsList, setOptionsList] = useState([]); const [originList, setOriginList] = useState([]); + const [isFullscreen, setIsFullscreen] = useState(false); + const iframeRef = useRef(null); const { componentCoding } = useSelector((state: any) => state.ideContainer); const dispatch = useDispatch(); @@ -41,6 +43,67 @@ const ComponentCoding = () => { setServerUrl(`${uri}?folder=${codeServerFolderPre}${path}`); }, [componentCoding]); + // 监听全屏状态变化 + useEffect(() => { + const handleFullscreenChange = () => { + const isCurrentlyFullscreen = + document.fullscreenElement || + (document as any).webkitFullscreenElement || + (document as any).mozFullScreenElement || + (document as any).msFullscreenElement; + + setIsFullscreen(!!isCurrentlyFullscreen); + }; + + document.addEventListener('fullscreenchange', handleFullscreenChange); + document.addEventListener('webkitfullscreenchange', handleFullscreenChange); + document.addEventListener('mozfullscreenchange', handleFullscreenChange); + document.addEventListener('MSFullscreenChange', handleFullscreenChange); + + return () => { + document.removeEventListener('fullscreenchange', handleFullscreenChange); + document.removeEventListener('webkitfullscreenchange', handleFullscreenChange); + document.removeEventListener('mozfullscreenchange', handleFullscreenChange); + document.removeEventListener('MSFullscreenChange', handleFullscreenChange); + }; + }, []); + + // 切换全屏状态 + const toggleFullscreen = () => { + const iframeContainer = document.querySelector(`.${styles['code-iframe']}`) as HTMLElement; + + if (!isFullscreen) { + // 进入全屏 + if (iframeContainer.requestFullscreen) { + iframeContainer.requestFullscreen(); + } + else if ((iframeContainer as any).webkitRequestFullscreen) { + (iframeContainer as any).webkitRequestFullscreen(); + } + else if ((iframeContainer as any).mozRequestFullScreen) { + (iframeContainer as any).mozRequestFullScreen(); + } + else if ((iframeContainer as any).msRequestFullscreen) { + (iframeContainer as any).msRequestFullscreen(); + } + } + else { + // 退出全屏 + if (document.exitFullscreen) { + document.exitFullscreen(); + } + else if ((document as any).webkitExitFullscreen) { + (document as any).webkitExitFullscreen(); + } + else if ((document as any).mozCancelFullScreen) { + (document as any).mozCancelFullScreen(); + } + else if ((document as any).msExitFullscreen) { + (document as any).msExitFullscreen(); + } + } + }; + return (
@@ -105,7 +168,30 @@ const ComponentCoding = () => {
-