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

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

src/pages/env/index.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useRef, useState, useEffect } from 'react';
+import React, {
+  useCallback,
+  useRef,
+  useState,
+  useEffect,
+  useMemo,
+} from 'react';
 import {
   Button,
   message,
@@ -33,6 +39,8 @@ import { useOutletContext } from '@umijs/max';
 import { SharedContext } from '@/layouts';
 import useTableScrollHeight from '@/hooks/useTableScrollHeight';
 import Copy from '../../components/copy';
+import { VList } from 'virtuallist-antd';
+
 const { Text } = Typography;
 const { Search } = Input;
 
@@ -381,8 +389,27 @@ const Env = () => {
     setValue(result);
   };
 
+  const vComponents = useMemo(() => {
+    return VList({
+      height: tableScrollHeight!,
+    });
+  }, [tableScrollHeight]);
+  // const components = useMemo(() => {
+  //   return {
+  //     ...vlistComponent,
+  //     body: {
+  //       ...vlistComponent.body,
+  //       row: DragableBodyRow
+  //     },
+  //     header: {
+  //       cell: ResizableTitle
+  //     }
+  //   };
+  // }, []);
   const components = {
+    ...vComponents,
     body: {
+      ...vComponents.body,
       row: DragableBodyRow,
     },
   };