优化定时任务表格渲染

src/pages/crontab/index.tsx

@@ -51,6 +51,8 @@ import { FilterValue, SorterResult } from 'antd/lib/table/interface';
 import { SharedContext } from '@/layouts';
 import useTableScrollHeight from '@/hooks/useTableScrollHeight';
 import { getCommandScript } from '@/utils';
+import { isEqual } from 'lodash';
+import { ColumnProps } from 'antd/lib/table';
 
 const { Text, Paragraph } = Typography;
 const { Search } = Input;
@@ -82,15 +84,30 @@ enum OperationPath {
   'unpin',
 }
 
+export interface ICrontab {
+  name: string;
+  command: string;
+  schedule: string;
+  id: number;
+  status: number;
+  isDisabled?: 1 | 0;
+  isPinned?: 1 | 0;
+  labels?: string[];
+  last_running_time?: number;
+  last_execution_time?: number;
+  nextRunTime: Date;
+}
+
 const Crontab = () => {
   const { headerStyle, isPhone, theme } = useOutletContext<SharedContext>();
-  const columns: any = [
+  const columns: ColumnProps<ICrontab>[] = [
     {
       title: '名称',
       dataIndex: 'name',
       key: 'name',
       width: 150,
       align: 'center' as const,
+      shouldCellUpdate: (record, prevRecord) => isEqual(record, prevRecord),
       render: (text: string, record: any) => (
         <>
           <a
@@ -137,7 +154,7 @@ const Crontab = () => {
         </>
       ),
       sorter: {
-        compare: (a: any, b: any) => a?.name?.localeCompare(b?.name),
+        compare: (a, b) => a?.name?.localeCompare(b?.name),
       },
     },
     {
@@ -146,7 +163,8 @@ const Crontab = () => {
       key: 'command',
       width: 300,
       align: 'center' as const,
-      render: (text: string, record: any) => {
+      shouldCellUpdate: (record, prevRecord) => isEqual(record, prevRecord),
+      render: (text, record) => {
         return (
           <Paragraph
             style={{
@@ -176,8 +194,9 @@ const Crontab = () => {
       key: 'schedule',
       width: 110,
       align: 'center' as const,
+      shouldCellUpdate: (record, prevRecord) => isEqual(record, prevRecord),
       sorter: {
-        compare: (a: any, b: any) => a.schedule.localeCompare(b.schedule),
+        compare: (a, b) => a.schedule.localeCompare(b.schedule),
       },
     },
     {
@@ -187,11 +206,12 @@ const Crontab = () => {
       key: 'last_execution_time',
       width: 150,
       sorter: {
-        compare: (a: any, b: any) => {
+        compare: (a, b) => {
-          return a.last_execution_time - b.last_execution_time;
+          return (a.last_execution_time || 0) - (b.last_execution_time || 0);
         },
       },
-      render: (text: string, record: any) => {
+      shouldCellUpdate: (record, prevRecord) => isEqual(record, prevRecord),
+      render: (text, record) => {
         const language = navigator.language || navigator.languages[0];
         return (
           <span
@@ -221,7 +241,8 @@ const Crontab = () => {
           return a.last_running_time - b.last_running_time;
         },
       },
-      render: (text: string, record: any) => {
+      shouldCellUpdate: (record, prevRecord) => isEqual(record, prevRecord),
+      render: (text, record) => {
         return record.last_running_time
           ? diffTime(record.last_running_time)
           : '-';
@@ -236,7 +257,8 @@ const Crontab = () => {
           return a.nextRunTime - b.nextRunTime;
         },
       },
-      render: (text: string, record: any) => {
+      shouldCellUpdate: (record, prevRecord) => isEqual(record, prevRecord),
+      render: (text, record) => {
         const language = navigator.language || navigator.languages[0];
         return record.nextRunTime
           .toLocaleString(language, {
@@ -270,14 +292,15 @@ const Crontab = () => {
           value: 3,
         },
       ],
-      onFilter: (value: number, record: any) => {
+      onFilter: (value, record) => {
         if (record.isDisabled && record.status !== 0) {
           return value === 2;
         } else {
           return record.status === value;
         }
       },
-      render: (text: string, record: any) => (
+      shouldCellUpdate: (record, prevRecord) => isEqual(record, prevRecord),
+      render: (text, record) => (
         <>
           {(!record.isDisabled || record.status !== CrontabStatus.idle) && (
             <>
@@ -314,7 +337,8 @@ const Crontab = () => {
       key: 'action',
       align: 'center' as const,
       width: 100,
-      render: (text: string, record: any, index: number) => {
+      shouldCellUpdate: (record, prevRecord) => isEqual(record, prevRecord),
+      render: (text, record, index) => {
         const isPc = !isPhone;
         return (
           <Space size="middle">