优化面板样式

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>