修复移动端100vh兼容性

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"
   }

src/layouts/index.less

@@ -6,10 +6,13 @@ body {
 
 @import '~codemirror/lib/codemirror.css';
 
-.code-mirror-wrapper .CodeMirror {
+.ql-container-wrapper {
-  position: absolute;
+  .CodeMirror {
-  height: calc(100vh - 128px);
+    position: absolute;
-  width: calc(100% - 32px);
+    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 {
+  .ql-container-wrapper {
-    height: calc(100vh - 176px);
+    &.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;
   }
 }

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(() => {

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}

src/pages/cookie/index.tsx

@@ -450,9 +450,6 @@ const Config = () => {
           marginLeft,
         },
       }}
-      style={{
-        height: '100vh',
-      }}
     >
       <DndProvider backend={HTML5Backend}>
         <Table

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 }}>

src/pages/diff/index.less

@@ -1,12 +1,13 @@
 .d2h-files-diff {
-    height: calc(100vh - 130px);
+  height: calc(100vh - 130px);
-    overflow: auto;
+  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;
+  padding: 0 0.5em;
-}
+}

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={{

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}

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}

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;
 }

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">