From ecdfdff50d9d73e65422e53a85749f31a3a3c4cc Mon Sep 17 00:00:00 2001
From: hanhh <18330117883@163.com>
Date: Sat, 17 Jul 2021 22:20:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=9D=A2=E6=9D=BF=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.tsx                        |  4 +--
 src/layouts/defaultProps.tsx       |  4 +--
 src/layouts/index.less             | 43 +++++++++++++++++++++++++++---
 src/pages/crontab/index.tsx        |  1 +
 src/pages/env/index.tsx            |  5 ++--
 src/pages/log/index.module.less    |  2 +-
 src/pages/log/index.tsx            | 39 ++++++++++++++++-----------
 src/pages/script/index.module.less |  2 +-
 src/pages/script/index.tsx         | 10 +++++--
 9 files changed, 80 insertions(+), 30 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 5130b5f0..53313350 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -8,9 +8,9 @@ const titleMap: any = {
   '/crontab': '定时任务',
   '/env': '环境变量',
   '/config': '配置文件',
-  '/script': '查看脚本',
+  '/script': '脚本管理',
   '/diff': '对比工具',
-  '/log': '日志',
+  '/log': '任务日志',
   '/setting': '系统设置',
 };
 
diff --git a/src/layouts/defaultProps.tsx b/src/layouts/defaultProps.tsx
index f2019f18..888cf247 100644
--- a/src/layouts/defaultProps.tsx
+++ b/src/layouts/defaultProps.tsx
@@ -38,7 +38,7 @@ export default {
       },
       {
         path: '/script',
-        name: '查看脚本',
+        name: '脚本管理',
         icon: <FormOutlined />,
         component: '@/pages/script/index',
       },
@@ -50,7 +50,7 @@ export default {
       },
       {
         path: '/log',
-        name: '日志',
+        name: '任务日志',
         icon: <FolderOutlined />,
         component: '@/pages/log/index',
       },
diff --git a/src/layouts/index.less b/src/layouts/index.less
index fab9c03b..8c8985f1 100644
--- a/src/layouts/index.less
+++ b/src/layouts/index.less
@@ -71,6 +71,34 @@ body {
   }
 }
 
+.ant-tree {
+  .ant-tree-treenode {
+    width: 100%;
+    padding-right: 8px !important;
+  }
+
+  .ant-tree-node-content-wrapper {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+  }
+}
+
+.ant-select-tree {
+  .ant-select-tree-treenode {
+    width: 100%;
+    padding-right: 8px !important;
+  }
+
+  .ant-select-tree-node-content-wrapper {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+  }
+}
+
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
@@ -91,17 +119,17 @@ input:-webkit-autofill:active {
 
   .ql-container-wrapper {
     &.crontab-wrapper,
-    &.log-wrapper {
+    &.log-wrapper,
+    &.env-wrapper,
+    &.config-wrapper {
       .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);
+        width: calc(100vw - 80px);
       }
     }
     .CodeMirror {
@@ -114,3 +142,10 @@ input:-webkit-autofill:active {
     max-width: 250px !important;
   }
 }
+
+@media (min-width: 768px) {
+  .ant-layout-content.ant-pro-basicLayout-content.ant-pro-basicLayout-has-header {
+    min-height: calc(100vh - 72px);
+    min-height: calc(100vh - var(--vh-offset, 0px) - 72px);
+  }
+}
diff --git a/src/pages/crontab/index.tsx b/src/pages/crontab/index.tsx
index 175e021c..02c8689e 100644
--- a/src/pages/crontab/index.tsx
+++ b/src/pages/crontab/index.tsx
@@ -101,6 +101,7 @@ const Crontab = () => {
       key: 'status',
       dataIndex: 'status',
       align: 'center' as const,
+      width: 60,
       render: (text: string, record: any) => (
         <>
           {(!record.isDisabled || record.status !== CrontabStatus.idle) && (
diff --git a/src/pages/env/index.tsx b/src/pages/env/index.tsx
index 833be0b1..55f1f344 100644
--- a/src/pages/env/index.tsx
+++ b/src/pages/env/index.tsx
@@ -108,6 +108,7 @@ const Env = () => {
     {
       title: '序号',
       align: 'center' as const,
+      width: 50,
       render: (text: string, record: any, index: number) => {
         return <span style={{ cursor: 'text' }}>{index + 1} </span>;
       },
@@ -123,7 +124,7 @@ const Env = () => {
       dataIndex: 'value',
       key: 'value',
       align: 'center' as const,
-      width: '40%',
+      width: '44%',
       ellipsis: {
         showTitle: false,
       },
@@ -436,7 +437,7 @@ const Env = () => {
 
   return (
     <PageContainer
-      className="env-wrapper"
+      className="ql-container-wrapper env-wrapper"
       title="环境变量"
       extra={[
         <Search
diff --git a/src/pages/log/index.module.less b/src/pages/log/index.module.less
index b1f98948..d2dafec2 100644
--- a/src/pages/log/index.module.less
+++ b/src/pages/log/index.module.less
@@ -16,7 +16,7 @@
     overflow: auto;
   }
   &-search {
-    margin-bottom: 16px;
+    margin-bottom: 8px;
   }
 }
 
diff --git a/src/pages/log/index.tsx b/src/pages/log/index.tsx
index 451a4e06..1f86ab6e 100644
--- a/src/pages/log/index.tsx
+++ b/src/pages/log/index.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, Key } from 'react';
+import { useState, useEffect, useCallback, Key, useRef } from 'react';
 import { TreeSelect, Tree, Input } from 'antd';
 import config from '@/utils/config';
 import { PageContainer } from '@ant-design/pro-layout';
@@ -46,13 +46,19 @@ const Log = () => {
   const [filterData, setFilterData] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const [isPhone, setIsPhone] = useState(false);
+  const [height, setHeight] = useState<number>();
+  const treeDom = useRef<any>();
 
-  const getConfig = () => {
-    request.get(`${config.apiPrefix}logs`).then((data) => {
-      const result = formatData(data.dirs) as any;
-      setData(result);
-      setFilterData(result);
-    });
+  const getLogs = () => {
+    setLoading(true);
+    request
+      .get(`${config.apiPrefix}logs`)
+      .then((data) => {
+        const result = formatData(data.dirs) as any;
+        setData(result);
+        setFilterData(result);
+      })
+      .finally(() => setLoading(false));
   };
 
   const formatData = (tree: any[]) => {
@@ -73,13 +79,9 @@ const Log = () => {
   };
 
   const getLog = (node: any) => {
-    setLoading(true);
-    request
-      .get(`${config.apiPrefix}logs/${node.value}`)
-      .then((data) => {
-        setValue(data.data);
-      })
-      .finally(() => setLoading(false));
+    request.get(`${config.apiPrefix}logs/${node.value}`).then((data) => {
+      setValue(data.data);
+    });
   };
 
   const onSelect = (value: any, node: any) => {
@@ -113,13 +115,15 @@ const Log = () => {
       setMarginTop(-72);
       setIsPhone(false);
     }
-    getConfig();
+    getLogs();
+    setHeight(treeDom.current.clientHeight);
   }, []);
 
   return (
     <PageContainer
       className="ql-container-wrapper log-wrapper"
       title={title}
+      loading={loading}
       extra={
         isPhone && [
           <TreeSelect
@@ -154,10 +158,13 @@ const Log = () => {
               className={styles['left-tree-search']}
               onChange={onSearch}
             ></Input.Search>
-            <div className={styles['left-tree-scroller']}>
+            <div className={styles['left-tree-scroller']} ref={treeDom}>
               <Tree
                 className={styles['left-tree']}
                 treeData={filterData}
+                showIcon={true}
+                height={height}
+                showLine={{ showLeafIcon: true }}
                 onSelect={onTreeSelect}
               ></Tree>
             </div>
diff --git a/src/pages/script/index.module.less b/src/pages/script/index.module.less
index b1f98948..d2dafec2 100644
--- a/src/pages/script/index.module.less
+++ b/src/pages/script/index.module.less
@@ -16,7 +16,7 @@
     overflow: auto;
   }
   &-search {
-    margin-bottom: 16px;
+    margin-bottom: 8px;
   }
 }
 
diff --git a/src/pages/script/index.tsx b/src/pages/script/index.tsx
index ca419f83..1ac87134 100644
--- a/src/pages/script/index.tsx
+++ b/src/pages/script/index.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, Key } from 'react';
+import { useState, useEffect, useCallback, Key, useRef } from 'react';
 import { TreeSelect, Tree, Input } from 'antd';
 import config from '@/utils/config';
 import { PageContainer } from '@ant-design/pro-layout';
@@ -37,6 +37,8 @@ const Script = () => {
   const [loading, setLoading] = useState(false);
   const [isPhone, setIsPhone] = useState(false);
   const [mode, setMode] = useState('');
+  const [height, setHeight] = useState<number>();
+  const treeDom = useRef<any>();
 
   const getScripts = () => {
     setLoading(true);
@@ -89,6 +91,7 @@ const Script = () => {
       setIsPhone(false);
     }
     getScripts();
+    setHeight(treeDom.current.clientHeight);
   }, []);
 
   return (
@@ -130,10 +133,13 @@ const Script = () => {
               className={styles['left-tree-search']}
               onChange={onSearch}
             ></Input.Search>
-            <div className={styles['left-tree-scroller']}>
+            <div className={styles['left-tree-scroller']} ref={treeDom}>
               <Tree
                 className={styles['left-tree']}
                 treeData={filterData}
+                showIcon={true}
+                height={height}
+                showLine={{ showLeafIcon: true }}
                 onSelect={onTreeSelect}
               ></Tree>
             </div>