修改定时任务列表滚动

package.json

@@ -147,6 +147,7 @@
     "typescript": "4.8.4",
     "umi-request": "^1.4.0",
     "vh-check": "^2.0.5",
+    "virtualizedtableforantd4": "1.3.0",
     "webpack": "^5.70.0",
     "yorkie": "^2.0.0"
   }

pnpm-lock.yaml

@@ -90,6 +90,7 @@ specifiers:
   umi-request: ^1.4.0
   uuid: ^8.3.2
   vh-check: ^2.0.5
+  virtualizedtableforantd4: 1.3.0
   webpack: ^5.70.0
   winston: ^3.6.0
   yargs: ^17.3.1
@@ -189,6 +190,7 @@ devDependencies:
   typescript: 4.8.4
   umi-request: 1.4.0
   vh-check: 2.0.5
+  virtualizedtableforantd4: 1.3.0_eyanc6viuzknyw5lsn6lba32mq
   webpack: 5.75.0
   yorkie: 2.0.0
 
@@ -13564,7 +13566,7 @@ packages:
   /rxjs/7.8.0:
     resolution: {integrity: sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==}
     dependencies:
-      tslib: 2.4.1
+      tslib: 2.5.0
     dev: true
 
   /safe-buffer/5.1.2:
@@ -15195,6 +15197,25 @@ packages:
     resolution: {integrity: sha512-vHtIYWt9uLl2P2tLlatVpMwv9+ezuJCtMNjUVIpzd5Pa/dJXN8AtqkKmVRcNSlmXyCjkCkbMQX/Vs9axmdlfgg==}
     dev: true
 
+  /virtualizedtableforantd4/1.3.0_eyanc6viuzknyw5lsn6lba32mq:
+    resolution: {integrity: sha512-V7y4/yFMo1xr/20Q3up6wPNPe9K5xvkPuj/LnSouDzM7pxWOwdvp/qndr86BISpH2OIzfAoZjSIivKktOXP4dQ==}
+    peerDependencies:
+      antd: ^4.0.0 || ^5.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || 18
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || 18
+    peerDependenciesMeta:
+      antd:
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      antd: 4.24.8_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: true
+
   /vite/4.1.4_uakuilq6iygkg5ll5cv37w4i7m:
     resolution: {integrity: sha512-3knk/HsbSTKEin43zHu7jTwYWv81f8kgAL99G5NWBcA1LKvtvcVAC4JjBH1arBunO9kQka+1oGbrMKOjk4ZrBg==}
     engines: {node: ^14.18.0 || >=16.0.0}

src/pages/crontab/index.less

@@ -192,3 +192,9 @@ tr.drop-over-upward td {
     margin: -24px;
   }
 }
+
+.crontab-wrapper {
+  .ant-table-cell {
+    height: 69px !important;
+  }
+}

src/pages/crontab/index.tsx

@@ -53,7 +53,7 @@ import { SharedContext } from '@/layouts';
 import useTableScrollHeight from '@/hooks/useTableScrollHeight';
 import { getCommandScript, parseCrontab } from '@/utils';
 import { ColumnProps } from 'antd/lib/table';
-import { VList } from '../../components/vlist';
+import { useVT } from 'virtualizedtableforantd4';
 
 const { Text, Paragraph } = Typography;
 const { Search } = Input;
@@ -330,7 +330,6 @@ const Crontab = () => {
               <Tooltip title={isPc ? '运行' : ''}>
                 <a
                   onClick={(e) => {
-                    setReset(false);
                     e.stopPropagation();
                     runCron(record, index);
                   }}
@@ -343,7 +342,6 @@ const Crontab = () => {
               <Tooltip title={isPc ? '停止' : ''}>
                 <a
                   onClick={(e) => {
-                    setReset(false);
                     e.stopPropagation();
                     stopCron(record, index);
                   }}
@@ -355,7 +353,6 @@ const Crontab = () => {
             <Tooltip title={isPc ? '日志' : ''}>
               <a
                 onClick={(e) => {
-                  setReset(false);
                   e.stopPropagation();
                   setLogCron({ ...record, timestamp: Date.now() });
                 }}
@@ -399,10 +396,6 @@ const Crontab = () => {
   const [moreMenuActive, setMoreMenuActive] = useState(false);
   const tableRef = useRef<any>();
   const tableScrollHeight = useTableScrollHeight(tableRef);
-  const resetRef = useRef<boolean>(true);
-  const setReset = (v) => {
-    resetRef.current = v;
-  };
 
   const goToScriptManager = (record: any) => {
     const result = getCommandScript(record.command);
@@ -686,7 +679,6 @@ const Crontab = () => {
         items: getMenuItems(record),
         onClick: ({ key, domEvent }) => {
           domEvent.stopPropagation();
-          setReset(false);
           action(key, record, index);
         },
       }}
@@ -722,7 +714,6 @@ const Crontab = () => {
   };
 
   const onSearch = (value: string) => {
-    setReset(true);
     setSearchText(value.trim());
   };
 
@@ -750,10 +741,6 @@ const Crontab = () => {
     setSelectedRowIds(selectedIds);
   };
 
-  useEffect(() => {
-    setReset(false);
-  }, [selectedRowIds]);
-
   const rowSelection = {
     selectedRowKeys: selectedRowIds,
     onChange: onSelectChange,
@@ -781,7 +768,6 @@ const Crontab = () => {
   };
 
   const operateCrons = (operationStatus: number) => {
-    setReset(false);
     Modal.confirm({
       title: `确认${OperationName[operationStatus]}`,
       content: <>确认{OperationName[operationStatus]}选中的定时任务吗</>,
@@ -808,7 +794,6 @@ const Crontab = () => {
     sorter: SorterResult<any> | SorterResult<any>[],
   ) => {
     const { current, pageSize } = pagination;
-    setReset(true);
     setPageConf({
       page: current as number,
       size: pageSize as number,
@@ -923,21 +908,14 @@ const Crontab = () => {
   const tabClick = (key: string) => {
     const view = enabledCronViews.find((x) => x.id == key);
     setSelectedRowIds([]);
-    setReset(true);
     setPageConf({ ...pageConf, page: 1 });
     setViewConf(view ? view : null);
   };
 
-  const vComponents = useMemo(() => {
+  const [vt] = useVT(
-    return VList({
+    () => ({ scroll: { y: tableScrollHeight } }),
-      height: tableScrollHeight,
+    [tableScrollHeight],
-      reset: resetRef.current,
+  );
-      rowHeight: 69,
-      scrollTop: resetRef.current
-        ? 0
-        : tableRef.current?.querySelector('.ant-table-body')?.scrollTop,
-    });
-  }, [tableScrollHeight, resetRef.current]);
 
   return (
     <PageContainer
@@ -1073,7 +1051,7 @@ const Crontab = () => {
           rowSelection={rowSelection}
           rowClassName={getRowClassName}
           onChange={onPageChange}
-          components={vComponents}
+          components={vt}
         />
       </div>
       <CronLogModal

src/pages/env/index.tsx

@@ -39,7 +39,7 @@ import { useOutletContext } from '@umijs/max';
 import { SharedContext } from '@/layouts';
 import useTableScrollHeight from '@/hooks/useTableScrollHeight';
 import Copy from '../../components/copy';
-import { VList } from '../../components/vlist';
+import { useVT } from 'virtualizedtableforantd4';
 
 const { Text } = Typography;
 const { Search } = Input;
@@ -216,10 +216,6 @@ const Env = () => {
   const [importLoading, setImportLoading] = useState(false);
   const tableRef = useRef<any>();
   const tableScrollHeight = useTableScrollHeight(tableRef, 59);
-  const resetRef = useRef<boolean>(true);
-  const setReset = (v) => {
-    resetRef.current = v;
-  };
 
   const getEnvs = () => {
     setLoading(true);
@@ -234,7 +230,6 @@ const Env = () => {
   };
 
   const enabledOrDisabledEnv = (record: any, index: number) => {
-    setReset(false);
     Modal.confirm({
       title: `确认${record.status === Status.已禁用 ? '启用' : '禁用'}`,
       content: (
@@ -280,19 +275,16 @@ const Env = () => {
   };
 
   const addEnv = () => {
-    setReset(false);
     setEditedEnv(null as any);
     setIsModalVisible(true);
   };
 
   const editEnv = (record: any, index: number) => {
-    setReset(false);
     setEditedEnv(record);
     setIsModalVisible(true);
   };
 
   const deleteEnv = (record: any, index: number) => {
-    setReset(false);
     Modal.confirm({
       title: '确认删除',
       content: (
@@ -332,20 +324,13 @@ const Env = () => {
     getEnvs();
   };
 
-  const vComponents = useMemo(() => {
+  const [vt, setVT] = useVT(
-    return VList({
+    () => ({ scroll: { y: tableScrollHeight } }),
-      height: tableScrollHeight!,
+    [tableScrollHeight],
-      reset: resetRef.current,
+  );
-      rowHeight: 48,
-      scrollTop: resetRef.current
-        ? 0
-        : tableRef.current?.querySelector('.ant-table-body')?.scrollTop,
-    });
-  }, [tableScrollHeight, resetRef.current]);
 
-  const DragableBodyRow = (props: any) => {
+  const DragableBodyRow = React.forwardRef((props: any, ref) => {
     const { index, moveRow, className, style, ...restProps } = props;
-    const ref = useRef();
     const [{ isOver, dropClassName }, drop] = useDrop({
       accept: type,
       collect: (monitor) => {
@@ -373,31 +358,27 @@ const Env = () => {
 
     useEffect(() => {
       drop(drag(ref));
-    }, [drag, drop]);
+    }, [ref]);
 
-    const components = useMemo(() => vComponents.body.row, []);
+    return (
+      <tr
+        ref={ref}
+        className={`${className}${isOver ? dropClassName : ''}`}
+        style={{ cursor: 'move', ...style }}
+        {...restProps}
+      />
+    );
+  });
 
-    const tempProps = useMemo(() => {
+  useEffect(
-      return {
+    () =>
-        ref: ref,
+      setVT({
-        className: `${className}${isOver ? dropClassName : ''}`,
+        body: {
-        style: { cursor: 'move', ...style },
+          row: DragableBodyRow,
-        ...restProps,
+        },
-      };
+      }),
-    }, [className, dropClassName, restProps, style, isOver]);
+    [],
-
+  );
-    return <> {components(tempProps, ref)} </>;
-  };
-
-  const components = useMemo(() => {
-    return {
-      ...vComponents,
-      body: {
-        ...vComponents.body,
-        row: DragableBodyRow,
-      },
-    };
-  }, [vComponents]);
 
   const moveRow = useCallback(
     (dragIndex: number, hoverIndex: number) => {
@@ -425,17 +406,12 @@ const Env = () => {
     setSelectedRowIds(selectedIds);
   };
 
-  useEffect(() => {
-    setReset(false);
-  }, [selectedRowIds]);
-
   const rowSelection = {
     selectedRowKeys: selectedRowIds,
     onChange: onSelectChange,
   };
 
   const delEnvs = () => {
-    setReset(false);
     Modal.confirm({
       title: '确认删除',
       content: <>确认删除选中的变量吗</>,
@@ -457,7 +433,6 @@ const Env = () => {
   };
 
   const operateEnvs = (operationStatus: number) => {
-    setReset(false);
     Modal.confirm({
       title: `确认${OperationName[operationStatus]}`,
       content: <>确认{OperationName[operationStatus]}选中的变量吗</>,
@@ -490,7 +465,6 @@ const Env = () => {
   };
 
   const onSearch = (value: string) => {
-    setReset(true);
     setSearchText(value.trim());
   };
 
@@ -607,7 +581,7 @@ const Env = () => {
             rowKey="id"
             size="middle"
             scroll={{ x: 1000, y: tableScrollHeight }}
-            components={components}
+            components={vt}
             loading={loading}
             onRow={(record: any, index: number | undefined) => {
               return {