From e6acbbfd3fe569c68c5029d9306b67c2b25d3962 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=91=A8=E8=85=BE?= <zhout@olymtech.com>
Date: Thu, 3 Jun 2021 19:57:24 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=97=A5=E5=BF=97=E6=89=8B?=
 =?UTF-8?q?=E6=9C=BA=E7=9A=84=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/index.less          |  5 ++-
 src/pages/log/index.module.less |  4 +++
 src/pages/log/index.tsx         | 57 ++++++++++++++++++---------------
 3 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/src/layouts/index.less b/src/layouts/index.less
index 28e307be..1fd3fb67 100644
--- a/src/layouts/index.less
+++ b/src/layouts/index.less
@@ -12,7 +12,7 @@ body {
     position: absolute;
     height: calc(100vh - 128px);
     height: calc(100vh - var(--vh-offset, 0px) - 128px);
-    width: calc(100% - 32px - @tree-width);
+    width: calc(100% - 32px);
   }
 }
 
@@ -56,10 +56,13 @@ body {
       .ant-pro-grid-content.wide .ant-pro-page-container-children-content {
         height: calc(100vh - 184px);
         height: calc(100vh - var(--vh-offset, 0px) - 184px);
+        margin-left: 0;
+        margin-right: 0;
       }
       .CodeMirror {
         height: calc(100vh - 216px);
         height: calc(100vh - var(--vh-offset, 0px) - 216px);
+        width: calc(100vw - 32px);
       }
     }
     .CodeMirror {
diff --git a/src/pages/log/index.module.less b/src/pages/log/index.module.less
index 0289a1f1..fb59c15c 100644
--- a/src/pages/log/index.module.less
+++ b/src/pages/log/index.module.less
@@ -35,5 +35,9 @@
       padding: 0;
       background-color: #f8f8f8;
     }
+
+    .CodeMirror {
+      width: calc(100% - 32px - @tree-width);
+    }
   }
 }
diff --git a/src/pages/log/index.tsx b/src/pages/log/index.tsx
index 53682cdb..532594c4 100644
--- a/src/pages/log/index.tsx
+++ b/src/pages/log/index.tsx
@@ -45,6 +45,7 @@ const Log = () => {
   const [data, setData] = useState<any[]>([]);
   const [filterData, setFilterData] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
+  const [isPhone, setIsPhone] = useState(false);
 
   const getConfig = () => {
     request.get(`${config.apiPrefix}logs`).then((data) => {
@@ -105,10 +106,12 @@ const Log = () => {
       setWdith('auto');
       setMarginLeft(0);
       setMarginTop(0);
+      setIsPhone(true);
     } else {
       setWdith('100%');
       setMarginLeft(0);
       setMarginTop(-72);
+      setIsPhone(false);
     }
     getConfig();
   }, []);
@@ -117,18 +120,20 @@ const Log = () => {
     <PageContainer
       className="ql-container-wrapper log-wrapper"
       title={title}
-      extra={[
-        <TreeSelect
-          className="log-select"
-          value={select}
-          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-          treeData={data}
-          placeholder="请选择日志文件"
-          showSearch
-          key="value"
-          onSelect={onSelect}
-        />,
-      ]}
+      extra={
+        isPhone && [
+          <TreeSelect
+            className="log-select"
+            value={select}
+            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+            treeData={data}
+            placeholder="请选择日志文件"
+            showSearch
+            key="value"
+            onSelect={onSelect}
+          />,
+        ]
+      }
       header={{
         style: {
           padding: '4px 16px 4px 15px',
@@ -142,20 +147,22 @@ const Log = () => {
         },
       }}
     >
-      <div className={styles['log-container']}>
-        <div className={styles['left-tree-container']}>
-          <Input.Search
-            className={styles['left-tree-search']}
-            onChange={onSearch}
-          ></Input.Search>
-          <div className={styles['left-tree-scroller']}>
-            <Tree
-              className={styles['left-tree']}
-              treeData={filterData}
-              onSelect={onTreeSelect}
-            ></Tree>
+      <div className={`${styles['log-container']}`}>
+        {!isPhone && (
+          <div className={styles['left-tree-container']}>
+            <Input.Search
+              className={styles['left-tree-search']}
+              onChange={onSearch}
+            ></Input.Search>
+            <div className={styles['left-tree-scroller']}>
+              <Tree
+                className={styles['left-tree']}
+                treeData={filterData}
+                onSelect={onTreeSelect}
+              ></Tree>
+            </div>
           </div>
-        </div>
+        )}
         <CodeMirror
           value={value}
           options={{