From 9b0065e533fe4f8c78995197e92e965f93e81516 Mon Sep 17 00:00:00 2001
From: whyour <imwhyour@gmail.com>
Date: Tue, 31 Jan 2023 23:30:47 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=AE=9A=E6=97=B6=E4=BB=BB?=
 =?UTF-8?q?=E5=8A=A1=E8=BF=87=E5=A4=9A=E6=90=9C=E7=B4=A2=E5=8D=A1=E9=A1=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                |  1 +
 pnpm-lock.yaml              | 18 ++++++++++++++++++
 src/pages/crontab/index.tsx | 14 +++++++++++++-
 src/pages/env/index.tsx     | 29 ++++++++++++++++++++++++++++-
 4 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index d9e27ba6..c4548c15 100644
--- a/package.json
+++ b/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"
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c63347ed..a2987a89 100644
--- a/pnpm-lock.yaml
+++ b/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}
diff --git a/src/pages/crontab/index.tsx b/src/pages/crontab/index.tsx
index a7062358..44ddda8f 100644
--- a/src/pages/crontab/index.tsx
+++ b/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
diff --git a/src/pages/env/index.tsx b/src/pages/env/index.tsx
index 19994004..e187755c 100644
--- a/src/pages/env/index.tsx
+++ b/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,
     },
   };