From f7bc735c440865a7a70e9ea026db775c0df26570 Mon Sep 17 00:00:00 2001
From: guofei <guofeichu@gmail.com>
Date: Mon, 6 Jan 2025 11:53:37 +0800
Subject: [PATCH] fix: screen fit

---
 src/App.css                          |  1 +
 src/App.js                           |  2 +-
 src/Components/deviceFrame/index.css |  4 +++-
 src/Components/deviceFrame/index.js  | 17 ++++++++++++++---
 src/Components/pane/index.css        | 10 ++++++++--
 src/Components/pane/index.js         |  2 +-
 6 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/App.css b/src/App.css
index e25a953..2802034 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2,6 +2,7 @@
   text-align: center;
   display: flex;
   align-items: stretch;
+  overflow: hidden;
 }
 
 .App-logo {
diff --git a/src/App.js b/src/App.js
index b1b941c..40da8f2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -217,7 +217,7 @@ class App extends React.Component {
     const { t } = this.props;
 
     return (
-      <div className="App">
+      <div className="App" style={{ height: isMobile ? window.innerHeight + 'px' : '100vh' }}>
         <Dialog open={loginOpen}>
           <DialogTitle>{t("login")}</DialogTitle>
           <DialogContent>
diff --git a/src/Components/deviceFrame/index.css b/src/Components/deviceFrame/index.css
index 5652748..c81eb36 100644
--- a/src/Components/deviceFrame/index.css
+++ b/src/Components/deviceFrame/index.css
@@ -12,10 +12,12 @@
 
 .refreshButton {
   position: absolute;
-  right: 24px;
+  right: 12px;
   bottom: 24px;
   cursor: pointer;
   z-index: 1000;
+  width: 58px;
+  height: 61px;
 }
 
 .qrCode {
diff --git a/src/Components/deviceFrame/index.js b/src/Components/deviceFrame/index.js
index 6cacefe..4e58b76 100644
--- a/src/Components/deviceFrame/index.js
+++ b/src/Components/deviceFrame/index.js
@@ -85,9 +85,21 @@ function DeviceFrame(props) {
 	var [cacheKey, setCacheKey] = useState(new Date().getTime());
 	var [openPopup, setOpenPopup] = useState(false);
 	var [absoluteUrl, setAbsoluteUrl] = useState("");
-	var [isMobile, setIsMobile] = useState(props.isMobile);
+	var [isMobile] = useState(props.isMobile);
+	var [safeAreaBottom, setSafeAreaBottom] = useState(0);
 	const { t } = useTranslation();
 
+
+	useEffect(() => {
+		let safeAreaBottom = 0;
+		if (window.visualViewport) {
+			safeAreaBottom = window.innerHeight - window.visualViewport.height;
+		} else {
+			safeAreaBottom = window.screen.height - window.innerHeight;
+		}
+		setSafeAreaBottom(safeAreaBottom);
+	}, [isMobile]);
+
 	useEffect(() => {
 		// 将宽度和高度的值转换为数字，并增加10%
 		const current = JSON.parse(JSON.stringify(configMap[props.device]))
@@ -135,8 +147,7 @@ function DeviceFrame(props) {
 
 	return (
 		<div className="deviceFrameContainer">
-
-			<img src={refreshButtonPng} alt="refresh" onClick={() => refresh()} className="refreshButton" />
+			<img src={refreshButtonPng} alt="refresh" onClick={() => refresh()} className="refreshButton" style={{ bottom: isMobile ? safeAreaBottom + 40 + 'px' : '24px' }} />
 			{props.qrDataUrl && !isMobile && (
 				<div className="qrCode">
 					<img src={props.qrDataUrl} alt="qr code" />
diff --git a/src/Components/pane/index.css b/src/Components/pane/index.css
index 6d41025..8ed1fe5 100644
--- a/src/Components/pane/index.css
+++ b/src/Components/pane/index.css
@@ -1,12 +1,12 @@
 .Pane {
   width: 370px;
   background-color: #535353;
-  min-height: 100vh;
   padding: 24px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   position: relative;
+  overflow: hidden;
 }
 
 .selectPager {
@@ -20,13 +20,19 @@
   top: 0;
   bottom: 0;
   width: 60vw;
-  height: 100vh;
   background-color: #535353;
   z-index: 1000;
   overflow: hidden;
   transition: width 0.2s linear;
 }
 
+/* @TODO 横屏模式 */
+@media only screen and (orientation: landscape) {
+  .Pane.mobile {
+    width: 30vw;
+  }
+}
+
 .flod-menu-btn-warpper {
   position: fixed;
   right: 12px;
diff --git a/src/Components/pane/index.js b/src/Components/pane/index.js
index 094da3c..0b7e7ed 100644
--- a/src/Components/pane/index.js
+++ b/src/Components/pane/index.js
@@ -77,7 +77,7 @@ function Pane(props) {
 
 
 	return (
-		<div className={`Pane ${isMobile ? 'mobile' : ''} ${foldPanel ? 'fold' : ''}`} style={{ height: window.innerHeight }}>
+		<div className={`Pane ${isMobile ? 'mobile' : ''} ${foldPanel ? 'fold' : ''}`} style={{ height: window.innerHeight + 'px' }}>
 			{
 				isMobile &&
 				<div className="flod-menu-btn-warpper">