修复定时任务过多搜索卡顿

src/pages/crontab/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import {
   Button,
   message,
@@ -53,6 +53,7 @@ import { SharedContext } from '@/layouts';
 import useTableScrollHeight from '@/hooks/useTableScrollHeight';
 import { getCommandScript } from '@/utils';
 import { ColumnProps } from 'antd/lib/table';
+import { VList } from 'virtuallist-antd';
 
 const { Text, Paragraph } = Typography;
 const { Search } = Input;
@@ -128,6 +129,7 @@ const Crontab = () => {
                         style={{ cursor: 'point' }}
                         onClick={(e) => {
                           e.stopPropagation();
+                          setSearchValue(`label:${label}`);
                           setSearchText(`label:${label}`);
                         }}
                       >
@@ -393,6 +395,7 @@ const Crontab = () => {
   const [viewConf, setViewConf] = useState<any>();
   const [isDetailModalVisible, setIsDetailModalVisible] = useState(false);
   const [detailCron, setDetailCron] = useState<any>();
+  const [searchValue, setSearchValue] = useState('');
   const [total, setTotal] = useState<number>();
   const [isCreateViewModalVisible, setIsCreateViewModalVisible] =
     useState(false);
@@ -944,6 +947,12 @@ const Crontab = () => {
     setViewConf(view ? view : null);
   };
 
+  const vComponents = useMemo(() => {
+    return VList({
+      height: tableScrollHeight!,
+    });
+  }, [tableScrollHeight]);
+
   return (
     <PageContainer
       className="ql-container-wrapper crontab-wrapper ql-container-wrapper-has-tab"
@@ -955,6 +964,8 @@ const Crontab = () => {
           enterButton
           allowClear
           loading={loading}
+          value={searchValue}
+          onChange={(e) => setSearchValue(e.target.value)}
           onSearch={onSearch}
         />,
         <Button key="2" type="primary" onClick={() => addCron()}>
@@ -1076,6 +1087,7 @@ const Crontab = () => {
           rowSelection={rowSelection}
           rowClassName={getRowClassName}
           onChange={onPageChange}
+          components={vComponents}
         />
       </div>
       <CronLogModal