修复任务详情交互样式

liuyuetingaac · Mar 13, 2022 · 51afcb6 · 51afcb6
1 parent 92ebb70
commit 51afcb6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/src/pages/crontab/detail.tsx b/src/pages/crontab/detail.tsx
@@ -67,6 +67,7 @@ const CronDetailModal = ({
   const editorRef = useRef<any>(null);
   const [scriptInfo, setScriptInfo] = useState<any>({});
   const [logUrl, setLogUrl] = useState('');
+  const [validTabs, setValidTabs] = useState(tabList);
 
   const contentList: any = {
     log: (
@@ -146,6 +147,8 @@ const CronDetailModal = ({
         .then((data) => {
           setValue(data.data);
         });
+    } else {
+      setValidTabs([validTabs[0]]);
     }
   };
 
@@ -204,7 +207,9 @@ const CronDetailModal = ({
       title={
         <>
           <span>{cron.name}</span>
-          <Divider type="vertical"></Divider>
+          {cron.labels?.length > 0 && cron.labels[0] !== '' && (
+            <Divider type="vertical"></Divider>
+          )}
           {cron.labels?.length > 0 &&
             cron.labels[0] !== '' &&
             cron.labels?.map((label: string, i: number) => (
@@ -222,7 +227,7 @@ const CronDetailModal = ({
       wrapClassName="crontab-detail"
       width={!isPhone ? '80vw' : ''}
     >
-      <div style={{ height: '80vh' }}>
+      <div className="card-wrapper">
         <Card>
           <div className="cron-detail-info-item">
             <div className="cron-detail-info-title">任务</div>
@@ -298,7 +303,7 @@ const CronDetailModal = ({
         </Card>
         <Card
           style={{ marginTop: 10 }}
-          tabList={tabList}
+          tabList={validTabs}
           activeTabKey={activeTabKey}
           onTabChange={(key) => {
             onTabChange(key);
@@ -314,7 +319,6 @@ const CronDetailModal = ({
               </Button>
             )
           }
-          bodyStyle={{ height: 'calc(80vh - 238px)', overflowY: 'auto' }}
         >
           {contentList[activeTabKey]}
         </Card>

diff --git a/src/pages/crontab/index.less b/src/pages/crontab/index.less
@@ -9,6 +9,19 @@
 }
 
 .crontab-detail {
+  .card-wrapper {
+    height: 80vh;
+    height: calc(80vh - var(--vh-offset, 0px));
+
+    .ant-card:last-child {
+      .ant-card-body {
+        height: calc(80vh - 238px);
+        height: calc(80vh - var(--vh-offset, 0px) - 238px);
+        overflow-y: auto;
+      }
+    }
+  }
+
   .ant-modal-body {
     background: #eee;
     padding: 12px;