From d0e46224dc4c4331eaf89ed880886a02c101f8e8 Mon Sep 17 00:00:00 2001
From: whyour <imwhyour@gmail.com>
Date: Sat, 12 Mar 2022 23:49:09 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=AE=9A=E6=97=B6=E4=BB=BB?=
 =?UTF-8?q?=E5=8A=A1=E8=AF=A6=E6=83=85=E6=97=A5=E5=BF=97=E6=9F=A5=E7=9C=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/crontab/detail.tsx   | 19 +++++++++++++------
 src/pages/crontab/index.less   | 33 +++++++++++++++++++++++++++++++--
 src/pages/crontab/index.tsx    | 15 ++++++++-------
 src/pages/crontab/logModal.tsx |  8 +++++---
 src/pages/env/index.tsx        | 20 ++++++++++----------
 5 files changed, 67 insertions(+), 28 deletions(-)

diff --git a/src/pages/crontab/detail.tsx b/src/pages/crontab/detail.tsx
index fdaa178c..ce718297 100644
--- a/src/pages/crontab/detail.tsx
+++ b/src/pages/crontab/detail.tsx
@@ -66,6 +66,7 @@ const CronDetailModal = ({
   const [isLogModalVisible, setIsLogModalVisible] = useState(false);
   const editorRef = useRef<any>(null);
   const [scriptInfo, setScriptInfo] = useState<any>({});
+  const [logUrl, setLogUrl] = useState('');
 
   const contentList: any = {
     log: (
@@ -101,6 +102,8 @@ const CronDetailModal = ({
   };
 
   const onClickItem = (item: LogItem) => {
+    localStorage.setItem('logCron', cron.id);
+    setLogUrl(`${config.apiPrefix}logs/${item.directory}/${item.filename}`);
     request
       .get(`${config.apiPrefix}logs/${item.directory}/${item.filename}`)
       .then((data) => {
@@ -173,6 +176,7 @@ const CronDetailModal = ({
             })
             .then((_data: any) => {
               if (_data.code === 200) {
+                setValue(content);
                 message.success(`保存成功`);
               } else {
                 message.error(_data);
@@ -220,6 +224,12 @@ const CronDetailModal = ({
     >
       <div style={{ height: '80vh' }}>
         <Card>
+          <div className="cron-detail-info-item">
+            <div className="cron-detail-info-title">任务</div>
+            <div className="cron-detail-info-value">{cron.command}</div>
+          </div>
+        </Card>
+        <Card style={{ marginTop: 10 }}>
           <div className="cron-detail-info-item">
             <div className="cron-detail-info-title">状态</div>
             <div className="cron-detail-info-value">
@@ -252,10 +262,6 @@ const CronDetailModal = ({
               )}
             </div>
           </div>
-          <div className="cron-detail-info-item">
-            <div className="cron-detail-info-title">任务</div>
-            <div className="cron-detail-info-value">{cron.command}</div>
-          </div>
           <div className="cron-detail-info-item">
             <div className="cron-detail-info-title">定时</div>
             <div className="cron-detail-info-value">{cron.schedule}</div>
@@ -291,7 +297,7 @@ const CronDetailModal = ({
           </div>
         </Card>
         <Card
-          style={{ marginTop: 16 }}
+          style={{ marginTop: 10 }}
           tabList={tabList}
           activeTabKey={activeTabKey}
           onTabChange={(key) => {
@@ -308,7 +314,7 @@ const CronDetailModal = ({
               </Button>
             )
           }
-          bodyStyle={{ height: 'calc(80vh - 188px)', overflowY: 'auto' }}
+          bodyStyle={{ height: 'calc(80vh - 238px)', overflowY: 'auto' }}
         >
           {contentList[activeTabKey]}
         </Card>
@@ -320,6 +326,7 @@ const CronDetailModal = ({
         }}
         cron={cron}
         data={log}
+        logUrl={logUrl}
       />
     </Modal>
   );
diff --git a/src/pages/crontab/index.less b/src/pages/crontab/index.less
index 04c2f634..6ca67a55 100644
--- a/src/pages/crontab/index.less
+++ b/src/pages/crontab/index.less
@@ -14,13 +14,42 @@
     padding: 12px;
   }
 
+  .ant-card-body {
+    padding: 18px;
+  }
+  .ant-card-head {
+    padding: 0 18px;
+  }
+
   .ant-card:first-child {
+    max-height: 66px;
+    overflow: auto;
+
+    .ant-card-body {
+      min-width: 600px;
+    }
+
+    .cron-detail-info-item {
+      display: flex;
+
+      .cron-detail-info-title {
+        width: 50px;
+      }
+
+      .cron-detail-info-value {
+        flex: 1;
+        margin-top: 0;
+      }
+    }
+  }
+
+  .ant-card:nth-child(2) {
     overflow-x: auto;
 
     .ant-card-body {
       display: flex;
       justify-content: space-between;
-      min-width: 700px;
+      min-width: 600px;
     }
   }
 
@@ -32,7 +61,7 @@
     }
 
     .cron-detail-info-value {
-      margin-top: 18px;
+      margin-top: 12px;
     }
   }
 }
diff --git a/src/pages/crontab/index.tsx b/src/pages/crontab/index.tsx
index 1d128148..3ec94523 100644
--- a/src/pages/crontab/index.tsx
+++ b/src/pages/crontab/index.tsx
@@ -40,7 +40,7 @@ import { getTableScroll } from '@/utils/index';
 import { history } from 'umi';
 import './index.less';
 
-const { Text } = Typography;
+const { Text, Paragraph } = Typography;
 const { Search } = Input;
 
 export enum CrontabStatus {
@@ -130,16 +130,16 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
       align: 'center' as const,
       render: (text: string, record: any) => {
         return (
-          <span
+          <Paragraph
             style={{
-              textAlign: 'left',
-              width: '100%',
-              display: 'inline-block',
               wordBreak: 'break-all',
+              marginBottom: 0,
+              textAlign: 'left',
             }}
+            ellipsis={{ tooltip: text, rows: 2 }}
           >
             {text}
-          </span>
+          </Paragraph>
         );
       },
       sorter: {
@@ -628,7 +628,8 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
     index: number;
   }> = ({ record, index }) => (
     <Dropdown
-      arrow
+      arrow={{ pointAtCenter: true }}
+      placement="bottomRight"
       trigger={['click']}
       overlay={
         <Menu
diff --git a/src/pages/crontab/logModal.tsx b/src/pages/crontab/logModal.tsx
index 34978931..ce924850 100644
--- a/src/pages/crontab/logModal.tsx
+++ b/src/pages/crontab/logModal.tsx
@@ -21,11 +21,13 @@ const CronLogModal = ({
   handleCancel,
   visible,
   data,
+  logUrl,
 }: {
   cron?: any;
   visible: boolean;
   handleCancel: () => void;
   data?: string;
+  logUrl?: string;
 }) => {
   const [value, setValue] = useState<string>('启动中...');
   const [loading, setLoading] = useState<any>(true);
@@ -38,7 +40,7 @@ const CronLogModal = ({
       setLoading(true);
     }
     request
-      .get(`${config.apiPrefix}crons/${cron.id}/log`)
+      .get(logUrl ? logUrl : `${config.apiPrefix}crons/${cron.id}/log`)
       .then((data: any) => {
         if (localStorage.getItem('logCron') === String(cron.id)) {
           const log = data.data as string;
@@ -99,10 +101,10 @@ const CronLogModal = ({
   };
 
   useEffect(() => {
-    if (cron && cron.id) {
+    if (cron && cron.id && visible) {
       getCronLog(true);
     }
-  }, [cron]);
+  }, [cron, visible]);
 
   useEffect(() => {
     if (data) {
diff --git a/src/pages/env/index.tsx b/src/pages/env/index.tsx
index c3dd1e37..303b6a4d 100644
--- a/src/pages/env/index.tsx
+++ b/src/pages/env/index.tsx
@@ -27,7 +27,7 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 import './index.less';
 import { getTableScroll } from '@/utils/index';
 
-const { Text } = Typography;
+const { Text, Paragraph } = Typography;
 const { Search } = Input;
 
 enum Status {
@@ -119,18 +119,18 @@ const Env = ({ headerStyle, isPhone, theme }: any) => {
       key: 'value',
       align: 'center' as const,
       width: '35%',
-      ellipsis: {
-        showTitle: false,
-      },
       render: (text: string, record: any) => {
         return (
-          <Tooltip
-            placement="topLeft"
-            title={text}
-            trigger={['hover', 'click']}
+          <Paragraph
+            style={{
+              wordBreak: 'break-all',
+              marginBottom: 0,
+              textAlign: 'left',
+            }}
+            ellipsis={{ tooltip: text, rows: 2 }}
           >
-            <span>{text}</span>
-          </Tooltip>
+            {text}
+          </Paragraph>
         );
       },
     },