From 49a3662788f699f3215d930f47b1a8c5e5b36de7 Mon Sep 17 00:00:00 2001
From: whyour <imwhyour@gmail.com>
Date: Tue, 11 May 2021 19:37:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=A7=BB=E5=8A=A8=E7=AB=AF10?=
 =?UTF-8?q?0vh=E5=85=BC=E5=AE=B9=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                |  1 +
 src/layouts/index.less      | 33 +++++++++++++++++++++++++++------
 src/layouts/index.tsx       |  2 ++
 src/pages/config/index.tsx  |  5 +----
 src/pages/cookie/index.tsx  |  3 ---
 src/pages/crontab/index.tsx |  5 +----
 src/pages/diff/index.less   | 11 ++++++-----
 src/pages/diff/index.tsx    |  5 +----
 src/pages/diy/index.tsx     |  5 +----
 src/pages/log/index.tsx     |  7 ++-----
 src/pages/login/index.less  |  1 +
 src/pages/setting/index.tsx |  7 ++-----
 12 files changed, 45 insertions(+), 40 deletions(-)

diff --git a/package.json b/package.json
index 076acce4..a3ee805f 100644
--- a/package.json
+++ b/package.json
@@ -71,6 +71,7 @@
     "typescript": "^4.1.2",
     "umi": "^3.3.9",
     "umi-request": "^1.3.5",
+    "vh-check": "^2.0.5",
     "webpack": "^5.28.0",
     "yorkie": "^2.0.0"
   }
diff --git a/src/layouts/index.less b/src/layouts/index.less
index 7329aca7..5e4df4c7 100644
--- a/src/layouts/index.less
+++ b/src/layouts/index.less
@@ -6,10 +6,13 @@ body {
 
 @import '~codemirror/lib/codemirror.css';
 
-.code-mirror-wrapper .CodeMirror {
-  position: absolute;
-  height: calc(100vh - 128px);
-  width: calc(100% - 32px);
+.ql-container-wrapper {
+  .CodeMirror {
+    position: absolute;
+    height: calc(100vh - 128px);
+    height: calc(100vh - var(--vh-offset, 0px) - 128px);
+    width: calc(100% - 32px);
+  }
 }
 
 .ant-pro-grid-content.wide {
@@ -18,6 +21,7 @@ body {
   .ant-pro-page-container-children-content {
     overflow: auto;
     height: calc(100vh - 96px);
+    height: calc(100vh - var(--vh-offset, 0px) - 96px);
     background-color: #fff;
     padding: 16px;
   }
@@ -29,13 +33,30 @@ body {
   }
 }
 
+.log-select {
+  width: 300px;
+}
+
 @media (max-width: 768px) {
   .ant-pro-grid-content.wide {
     .ant-pro-page-container-children-content {
       height: calc(100vh - 144px);
+      height: calc(100vh - var(--vh-offset, 0px) - 144px);
     }
   }
-  .code-mirror-wrapper .CodeMirror {
-    height: calc(100vh - 176px);
+  .ql-container-wrapper {
+    &.crontab-wrapper {
+      .ant-pro-grid-content.wide .ant-pro-page-container-children-content {
+        height: calc(100vh - 184px);
+        height: calc(100vh - var(--vh-offset, 0px) - 184px);
+      }
+    }
+    .CodeMirror {
+      height: calc(100vh - 176px);
+      height: calc(100vh - var(--vh-offset, 0px) - 176px);
+    }
+  }
+  .log-select {
+    width: 200px;
   }
 }
diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
index 8a42056a..c855ba92 100644
--- a/src/layouts/index.tsx
+++ b/src/layouts/index.tsx
@@ -13,6 +13,7 @@ import config from '@/utils/config';
 import 'codemirror/mode/shell/shell.js';
 import { request } from '@/utils/http';
 import './index.less';
+import vhCheck from 'vh-check';
 
 export default function (props: any) {
   const logout = () => {
@@ -27,6 +28,7 @@ export default function (props: any) {
     if (!isAuth) {
       history.push('/login');
     }
+    vhCheck();
   }, []);
 
   useEffect(() => {
diff --git a/src/pages/config/index.tsx b/src/pages/config/index.tsx
index ba35b07e..763d59f3 100644
--- a/src/pages/config/index.tsx
+++ b/src/pages/config/index.tsx
@@ -49,7 +49,7 @@ const Config = () => {
 
   return (
     <PageContainer
-      className="code-mirror-wrapper"
+      className="ql-container-wrapper"
       title="config.sh"
       extra={[
         <Button key="1" type="primary" onClick={updateConfig}>
@@ -68,9 +68,6 @@ const Config = () => {
           marginLeft,
         },
       }}
-      style={{
-        height: '100vh',
-      }}
     >
       <CodeMirror
         value={value}
diff --git a/src/pages/cookie/index.tsx b/src/pages/cookie/index.tsx
index 7f2ff7f6..00e85337 100644
--- a/src/pages/cookie/index.tsx
+++ b/src/pages/cookie/index.tsx
@@ -450,9 +450,6 @@ const Config = () => {
           marginLeft,
         },
       }}
-      style={{
-        height: '100vh',
-      }}
     >
       <DndProvider backend={HTML5Backend}>
         <Table
diff --git a/src/pages/crontab/index.tsx b/src/pages/crontab/index.tsx
index 67a3a406..693d1e5a 100644
--- a/src/pages/crontab/index.tsx
+++ b/src/pages/crontab/index.tsx
@@ -537,7 +537,7 @@ const Crontab = () => {
 
   return (
     <PageContainer
-      className="code-mirror-wrapper"
+      className="ql-container-wrapper crontab-wrapper"
       title="定时任务"
       extra={[
         <Search
@@ -563,9 +563,6 @@ const Crontab = () => {
           marginLeft,
         },
       }}
-      style={{
-        height: '100vh',
-      }}
     >
       {selectedRowIds.length > 0 && (
         <div style={{ marginBottom: 16 }}>
diff --git a/src/pages/diff/index.less b/src/pages/diff/index.less
index a0acd042..dbea084e 100644
--- a/src/pages/diff/index.less
+++ b/src/pages/diff/index.less
@@ -1,12 +1,13 @@
 .d2h-files-diff {
-    height: calc(100vh - 130px);
-    overflow: auto;
+  height: calc(100vh - 130px);
+  height: calc(100vh - var(--vh-offset, 0px) - 130px);
+  overflow: auto;
 }
 
 .d2h-code-side-linenumber {
-    position: relative;
+  position: relative;
 }
 
 .d2h-code-side-line {
-    padding: 0 0.5em;
-}
\ No newline at end of file
+  padding: 0 0.5em;
+}
diff --git a/src/pages/diff/index.tsx b/src/pages/diff/index.tsx
index 6801c5f1..43ff3d28 100644
--- a/src/pages/diff/index.tsx
+++ b/src/pages/diff/index.tsx
@@ -46,7 +46,7 @@ const Crontab = () => {
 
   return (
     <PageContainer
-      className="code-mirror-wrapper"
+      className="ql-container-wrapper"
       title="对比工具"
       loading={loading}
       header={{
@@ -61,9 +61,6 @@ const Crontab = () => {
           marginLeft,
         },
       }}
-      style={{
-        height: '100vh',
-      }}
     >
       <ReactDiffViewer
         styles={{
diff --git a/src/pages/diy/index.tsx b/src/pages/diy/index.tsx
index 596582f3..21879f03 100644
--- a/src/pages/diy/index.tsx
+++ b/src/pages/diy/index.tsx
@@ -49,7 +49,7 @@ const Crontab = () => {
 
   return (
     <PageContainer
-      className="code-mirror-wrapper"
+      className="ql-container-wrapper"
       title="extra.sh"
       extra={[
         <Button key="1" type="primary" onClick={updateConfig}>
@@ -68,9 +68,6 @@ const Crontab = () => {
           marginLeft,
         },
       }}
-      style={{
-        height: '100vh',
-      }}
     >
       <CodeMirror
         value={value}
diff --git a/src/pages/log/index.tsx b/src/pages/log/index.tsx
index 2fee3db3..89318bcb 100644
--- a/src/pages/log/index.tsx
+++ b/src/pages/log/index.tsx
@@ -66,11 +66,11 @@ const Log = () => {
 
   return (
     <PageContainer
-      className="code-mirror-wrapper"
+      className="ql-container-wrapper"
       title={title}
       extra={[
         <TreeSelect
-          style={{ width: 280 }}
+          className="log-select"
           value={select}
           dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
           treeData={data}
@@ -92,9 +92,6 @@ const Log = () => {
           marginLeft,
         },
       }}
-      style={{
-        height: '100vh',
-      }}
     >
       <CodeMirror
         value={value}
diff --git a/src/pages/login/index.less b/src/pages/login/index.less
index 3892be68..7fbc78f0 100644
--- a/src/pages/login/index.less
+++ b/src/pages/login/index.less
@@ -4,6 +4,7 @@
   display: flex;
   flex-direction: column;
   height: 100vh;
+  height: calc(100vh - var(--vh-offset, 0px));
   overflow: auto;
   background: @layout-body-background;
 }
diff --git a/src/pages/setting/index.tsx b/src/pages/setting/index.tsx
index 45acdd43..fd71edde 100644
--- a/src/pages/setting/index.tsx
+++ b/src/pages/setting/index.tsx
@@ -87,7 +87,7 @@ const Password = () => {
 
   return (
     <PageContainer
-      className="code-mirror-wrapper"
+      className="ql-container-wrapper"
       title="系统设置"
       header={{
         style: {
@@ -101,14 +101,11 @@ const Password = () => {
           marginLeft,
         },
       }}
-      style={{
-        height: '100vh',
-      }}
     >
       <Tabs
         defaultActiveKey="person"
         tabPosition="left"
-        style={{ height: 'calc(100vh - 128px)' }}
+        style={{ height: 'calc(100vh - var(--vh-offset, 0px) - 128px)' }}
       >
         <Tabs.TabPane tab="个人设置" key="person">
           <Form onFinish={handleOk} layout="vertical">