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

package.json

@@ -145,6 +145,7 @@
     "typescript": "4.8.4",
     "umi-request": "^1.4.0",
     "vh-check": "^2.0.5",
+    "virtuallist-antd": "^0.7.5",
     "webpack": "^5.70.0",
     "yorkie": "^2.0.0"
   }

pnpm-lock.yaml

@@ -89,6 +89,7 @@ specifiers:
   umi-request: ^1.4.0
   uuid: ^8.3.2
   vh-check: ^2.0.5
+  virtuallist-antd: ^0.7.5
   webpack: ^5.70.0
   winston: ^3.6.0
   yargs: ^17.3.1
@@ -187,6 +188,7 @@ devDependencies:
   typescript: 4.8.4
   umi-request: 1.4.0
   vh-check: 2.0.5
+  virtuallist-antd: 0.7.5_antd@4.24.7+react@18.2.0
   webpack: 5.75.0
   yorkie: 2.0.0
 
@@ -14852,6 +14854,22 @@ packages:
     resolution: {integrity: sha512-vHtIYWt9uLl2P2tLlatVpMwv9+ezuJCtMNjUVIpzd5Pa/dJXN8AtqkKmVRcNSlmXyCjkCkbMQX/Vs9axmdlfgg==}
     dev: true
 
+  /virtuallist-antd/0.7.5_antd@4.24.7+react@18.2.0:
+    resolution: {integrity: sha512-Z+nyvaqEFo6fw61p+GlM13kjSofFefnEL6siOoOcVQSZpkrx6qkLmFXaoyAR21dZgjEULwCrJdObPAqSZwXpkQ==}
+    engines: {node: '>=8', npm: '>=5'}
+    peerDependencies:
+      antd: ^4.1.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || 18
+    peerDependenciesMeta:
+      antd:
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      antd: 4.24.7_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+    dev: true
+
   /vite/3.2.5_f2wittb4cajzb7wm3nryx4tf2e:
     resolution: {integrity: sha512-4mVEpXpSOgrssFZAOmGIr85wPHKvaDAcXqxVxVRZhljkJOMZi1ibLibzjLHzJvcok8BMguLc7g1W6W/GqZbLdQ==}
     engines: {node: ^14.18.0 || >=16.0.0}

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,
     },
   };