修复任务详情日志列表卡顿

src/pages/crontab/detail.tsx

@@ -30,6 +30,8 @@ import CronLogModal from './logModal';
 import Editor from '@monaco-editor/react';
 import IconFont from '@/components/iconfont';
 import { getCommandScript } from '@/utils';
+import VirtualList from 'rc-virtual-list';
+import useScrollHeight from '@/hooks/useScrollHeight';
 
 const { Text } = Typography;
 
@@ -81,19 +83,28 @@ const CronDetailModal = ({
   const [logUrl, setLogUrl] = useState('');
   const [validTabs, setValidTabs] = useState(tabList);
   const [currentCron, setCurrentCron] = useState<any>({});
+  const listRef = useRef<HTMLDivElement>(null);
+  const tableScrollHeight = useScrollHeight(listRef);
 
   const contentList: any = {
     log: (
-      <List
-        dataSource={logs}
-        loading={loading}
-        renderItem={(item) => (
-          <List.Item className="log-item" onClick={() => onClickItem(item)}>
-            <FileOutlined style={{ marginRight: 10 }} />
-            {item.directory}/{item.filename}
-          </List.Item>
-        )}
-      />
+      <div ref={listRef}>
+        <List>
+          <VirtualList
+            data={logs}
+            height={tableScrollHeight}
+            itemHeight={47}
+            itemKey="filename"
+          >
+            {(item) => (
+              <List.Item className="log-item" onClick={() => onClickItem(item)}>
+                <FileOutlined style={{ marginRight: 10 }} />
+                {item.directory}/{item.filename}
+              </List.Item>
+            )}
+          </VirtualList>
+        </List>
+      </div>
     ),
     script: scriptInfo.filename && (
       <Editor
@@ -248,7 +259,7 @@ const CronDetailModal = ({
       ),
       onOk() {
         request
-          .put(`${config.apiPrefix}crons/stop`, [currentCron.id] )
+          .put(`${config.apiPrefix}crons/stop`, [currentCron.id])
           .then(({ code, data }) => {
             if (code === 200) {
               setCurrentCron({ ...currentCron, status: CrontabStatus.idle });
@@ -280,7 +291,7 @@ const CronDetailModal = ({
             `${config.apiPrefix}crons/${
               currentCron.isDisabled === 1 ? 'enable' : 'disable'
             }`,
-           [currentCron.id],
+            [currentCron.id],
           )
           .then(({ code, data }) => {
             if (code === 200) {

src/pages/crontab/index.less

@@ -10,6 +10,10 @@
         height: calc(90vh - 367px);
         height: calc(90vh - var(--vh-offset, 0px) - 367px);
         overflow-y: auto;
+
+        > div {
+          height: 100%;
+        }
       }
     }
   }

src/pages/crontab/index.tsx

@@ -347,7 +347,7 @@ const Crontab = () => {
   const [cronViews, setCronViews] = useState<any[]>([]);
   const [enabledCronViews, setEnabledCronViews] = useState<any[]>([]);
   const [moreMenuActive, setMoreMenuActive] = useState(false);
-  const tableRef = useRef<any>();
+  const tableRef = useRef<HTMLDivElement>(null);
   const tableScrollHeight = useTableScrollHeight(tableRef);
 
   const goToScriptManager = (record: any) => {

src/pages/crontab/modal.tsx

@@ -31,7 +31,7 @@ const CronModal = ({
       );
 
       if (code === 200) {
-        message.success(cron ? '更新Cron成功' : '新建Cron成功');
+        message.success(cron ? '更新任务成功' : '新建任务成功');
         handleCancel(data);
       }
       setLoading(false);