修复任务详情日志列表卡顿

back/data/cron.ts

@@ -21,7 +21,7 @@ export class Crontab {
 
   constructor(options: Crontab) {
     this.name = options.name;
-    this.command = options.command;
+    this.command = options.command.trim();
     this.schedule = options.schedule;
     this.saved = options.saved;
     this.id = options.id;

back/schedule/addCron.ts

@@ -17,7 +17,7 @@ const addCron = (
       scheduleStacks.get(id)?.cancel();
     }
 
-    let cmdStr = command;
+    let cmdStr = command.trim();
     if (!cmdStr.startsWith(TASK_PREFIX) && !cmdStr.startsWith(QL_PREFIX)) {
       cmdStr = `${TASK_PREFIX}${cmdStr}`;
     }
@@ -25,8 +25,12 @@ const addCron = (
     scheduleStacks.set(
       id,
       nodeSchedule.scheduleJob(id, schedule, async () => {
-        Logger.silly(`当前时间: ${dayjs().format('YYYY-MM-DD HH:mm:ss')}，运行命令: ${cmdStr}`);
-        runCron(`ID=${id} ${cmdStr}`)
+        Logger.info(
+          `当前时间: ${dayjs().format(
+            'YYYY-MM-DD HH:mm:ss',
+          )}，运行命令: ${cmdStr}`,
+        );
+        runCron(`ID=${id} ${cmdStr}`);
       }),
     );
   }

back/services/cron.ts

@@ -507,13 +507,14 @@ export default class CronService {
   }
 
   private make_command(tab: Crontab) {
+    let command = tab.command.trim();
     if (
-      !tab.command.startsWith(TASK_PREFIX) &&
-      !tab.command.startsWith(QL_PREFIX)
+      !command.startsWith(TASK_PREFIX) &&
+      !command.startsWith(QL_PREFIX)
     ) {
-      tab.command = `${TASK_PREFIX}${tab.command}`;
+      command = `${TASK_PREFIX}${tab.command}`;
     }
-    const crontab_job_string = `ID=${tab.id} ${tab.command}`;
+    const crontab_job_string = `ID=${tab.id} ${command}`;
     return crontab_job_string;
   }
 

back/shared/pLimit.ts

@@ -16,6 +16,7 @@ class TaskLimit {
       this.cpuLimit = pLimit(limit);
       return;
     }
+    await AuthModel.sync();
     const doc = await AuthModel.findOne({ where: { type: AuthDataType.systemConfig } });
     if (doc?.info?.cronConcurrency) {
       this.cpuLimit = pLimit(doc?.info?.cronConcurrency);

package.json

@@ -145,6 +145,7 @@
     "qrcode.react": "^1.0.1",
     "query-string": "^7.1.1",
     "rc-tween-one": "^3.0.6",
+    "rc-virtual-list": "3.5.3",
     "react": "18.2.0",
     "react-codemirror2": "^7.2.1",
     "react-copy-to-clipboard": "^5.1.0",

pnpm-lock.yaml

@@ -267,6 +267,9 @@ devDependencies:
   rc-tween-one:
     specifier: ^3.0.6
     version: 3.0.6(react-dom@18.2.0)(react@18.2.0)
+  rc-virtual-list:
+    specifier: 3.5.3
+    version: 3.5.3(react-dom@18.2.0)(react@18.2.0)
   react:
     specifier: 18.2.0
     version: 18.2.0
@@ -12461,7 +12464,7 @@ packages:
       rc-overflow: 1.3.0(react-dom@18.2.0)(react@18.2.0)
       rc-trigger: 5.3.4(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.33.0(react-dom@18.2.0)(react@18.2.0)
-      rc-virtual-list: 3.5.2(react-dom@18.2.0)(react@18.2.0)
+      rc-virtual-list: 3.5.3(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: true
@@ -12641,7 +12644,7 @@ packages:
       classnames: 2.3.2
       rc-motion: 2.7.3(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.33.0(react-dom@18.2.0)(react@18.2.0)
-      rc-virtual-list: 3.5.2(react-dom@18.2.0)(react@18.2.0)
+      rc-virtual-list: 3.5.3(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: true
@@ -12731,8 +12734,8 @@ packages:
       react-is: 16.13.1
     dev: true
 
-  /rc-virtual-list@3.5.2(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-sE2G9hTPjVmatQni8OP2Kx33+Oth6DMKm67OblBBmgMBJDJQOOFpSGH7KZ6Pm85rrI2IGxDRXZCr0QhYOH2pfQ==}
+  /rc-virtual-list@3.5.3(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-rG6IuD4EYM8K6oZ8Shu2BC/CmcTdqng4yBWkc/5fjWhB20bl6QwR2Upyt7+MxvfscoVm8zOQY+tcpEO5cu4GaQ==}
     engines: {node: '>=8.x'}
     peerDependencies:
       react: '*'

src/hooks/useScrollHeight.ts

@@ -0,0 +1,14 @@
+import { RefObject, useState } from 'react';
+import useResizeObserver from '@react-hook/resize-observer';
+
+export default <T extends HTMLElement>(target: RefObject<T>) => {
+  const [height, setHeight] = useState<number>(0);
+
+  useResizeObserver(target, (entry) => {
+    let _height = entry.target.clientHeight;
+    if (height !== _height) {
+      setHeight(_height);
+    }
+  });
+  return height;
+};

src/hooks/useTableScrollHeight.ts

@@ -1,9 +1,9 @@
-import { MutableRefObject, useLayoutEffect, useState } from 'react';
+import { RefObject, useState } from 'react';
 import useResizeObserver from '@react-hook/resize-observer';
 import { getTableScroll } from '@/utils';
 
 export default <T extends HTMLElement>(
-  target: MutableRefObject<T>,
+  target: RefObject<T>,
   extraHeight?: number,
 ) => {
   const [height, setHeight] = useState<number>(0);

src/pages/crontab/detail.tsx

@@ -30,6 +30,8 @@ import CronLogModal from './logModal';
 import Editor from '@monaco-editor/react';
 import IconFont from '@/components/iconfont';
 import { getCommandScript } from '@/utils';
+import VirtualList from 'rc-virtual-list';
+import useScrollHeight from '@/hooks/useScrollHeight';
 
 const { Text } = Typography;
 
@@ -81,19 +83,28 @@ const CronDetailModal = ({
   const [logUrl, setLogUrl] = useState('');
   const [validTabs, setValidTabs] = useState(tabList);
   const [currentCron, setCurrentCron] = useState<any>({});
+  const listRef = useRef<HTMLDivElement>(null);
+  const tableScrollHeight = useScrollHeight(listRef);
 
   const contentList: any = {
     log: (
-      <List
-        dataSource={logs}
-        loading={loading}
-        renderItem={(item) => (
-          <List.Item className="log-item" onClick={() => onClickItem(item)}>
-            <FileOutlined style={{ marginRight: 10 }} />
-            {item.directory}/{item.filename}
-          </List.Item>
-        )}
-      />
+      <div ref={listRef}>
+        <List>
+          <VirtualList
+            data={logs}
+            height={tableScrollHeight}
+            itemHeight={47}
+            itemKey="filename"
+          >
+            {(item) => (
+              <List.Item className="log-item" onClick={() => onClickItem(item)}>
+                <FileOutlined style={{ marginRight: 10 }} />
+                {item.directory}/{item.filename}
+              </List.Item>
+            )}
+          </VirtualList>
+        </List>
+      </div>
     ),
     script: scriptInfo.filename && (
       <Editor
@@ -248,7 +259,7 @@ const CronDetailModal = ({
       ),
       onOk() {
         request
-          .put(`${config.apiPrefix}crons/stop`, [currentCron.id] )
+          .put(`${config.apiPrefix}crons/stop`, [currentCron.id])
           .then(({ code, data }) => {
             if (code === 200) {
               setCurrentCron({ ...currentCron, status: CrontabStatus.idle });
@@ -280,7 +291,7 @@ const CronDetailModal = ({
             `${config.apiPrefix}crons/${
               currentCron.isDisabled === 1 ? 'enable' : 'disable'
             }`,
-           [currentCron.id],
+            [currentCron.id],
           )
           .then(({ code, data }) => {
             if (code === 200) {

src/pages/crontab/index.less

@@ -10,6 +10,10 @@
         height: calc(90vh - 367px);
         height: calc(90vh - var(--vh-offset, 0px) - 367px);
         overflow-y: auto;
+
+        > div {
+          height: 100%;
+        }
       }
     }
   }

src/pages/crontab/index.tsx

@@ -347,7 +347,7 @@ const Crontab = () => {
   const [cronViews, setCronViews] = useState<any[]>([]);
   const [enabledCronViews, setEnabledCronViews] = useState<any[]>([]);
   const [moreMenuActive, setMoreMenuActive] = useState(false);
-  const tableRef = useRef<any>();
+  const tableRef = useRef<HTMLDivElement>(null);
   const tableScrollHeight = useTableScrollHeight(tableRef);
 
   const goToScriptManager = (record: any) => {

src/pages/crontab/modal.tsx

@@ -31,7 +31,7 @@ const CronModal = ({
       );
 
       if (code === 200) {
-        message.success(cron ? '更新Cron成功' : '新建Cron成功');
+        message.success(cron ? '更新任务成功' : '新建任务成功');
         handleCancel(data);
       }
       setLoading(false);

src/pages/dependence/index.tsx

@@ -190,7 +190,7 @@ const Dependence = () => {
   const [logDependence, setLogDependence] = useState<any>();
   const [isLogModalVisible, setIsLogModalVisible] = useState(false);
   const [type, setType] = useState('nodejs');
-  const tableRef = useRef<any>();
+  const tableRef = useRef<HTMLDivElement>(null);
   const tableScrollHeight = useTableScrollHeight(tableRef, 59);
 
   const getDependencies = () => {

src/pages/env/index.tsx

@@ -214,7 +214,7 @@ const Env = () => {
   const [selectedRowIds, setSelectedRowIds] = useState<string[]>([]);
   const [searchText, setSearchText] = useState('');
   const [importLoading, setImportLoading] = useState(false);
-  const tableRef = useRef<any>();
+  const tableRef = useRef<HTMLDivElement>(null);
   const tableScrollHeight = useTableScrollHeight(tableRef, 59);
 
   const getEnvs = () => {

src/pages/setting/other.tsx

@@ -207,7 +207,7 @@ const Other = ({
       </Form.Item>
       <Form.Item label="数据备份还原" name="frequency">
         <Button type="primary" onClick={exportData} loading={exportLoading}>
-          备份
+          {exportLoading ? '生成数据中...' : '备份'}
         </Button>
         <Upload
           method="put"

src/pages/subscription/index.tsx

@@ -237,7 +237,7 @@ const Subscription = () => {
   const [pageSize, setPageSize] = useState(20);
   const [isLogModalVisible, setIsLogModalVisible] = useState(false);
   const [logSubscription, setLogSubscription] = useState<any>();
-  const tableRef = useRef<any>();
+  const tableRef = useRef<HTMLDivElement>(null);
   const tableScrollHeight = useTableScrollHeight(tableRef);
 
   const runSubscription = (record: any, index: number) => {