优化面板样式

src/app.tsx

@@ -8,9 +8,9 @@ const titleMap: any = {
   '/crontab': '定时任务',
   '/env': '环境变量',
   '/config': '配置文件',
-  '/script': '查看脚本',
+  '/script': '脚本管理',
   '/diff': '对比工具',
-  '/log': '日志',
+  '/log': '任务日志',
   '/setting': '系统设置',
 };
 

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

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

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) && (

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

src/pages/log/index.module.less

@@ -16,7 +16,7 @@
     overflow: auto;
   }
   &-search {
-    margin-bottom: 16px;
+    margin-bottom: 8px;
   }
 }
 

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>

src/pages/script/index.module.less

@@ -16,7 +16,7 @@
     overflow: auto;
   }
   &-search {
-    margin-bottom: 16px;
+    margin-bottom: 8px;
   }
 }
 

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>