修复任务详情交互样式

This commit is contained in:
whyour 2022-03-13 11:09:31 +08:00
parent bc7f406968
commit 9ee08acf29
2 changed files with 21 additions and 4 deletions

View File

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

View File

@ -9,6 +9,19 @@
} }
.crontab-detail { .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 { .ant-modal-body {
background: #eee; background: #eee;
padding: 12px; padding: 12px;