修改任务日志自动滚动逻辑

Hany1688 · Feb 5, 2023 · 0144f3b · 0144f3b
1 parent 518436d
commit 0144f3b
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 31 deletions.
diff --git a/back/config/const.ts b/back/config/const.ts
@@ -1,4 +1,4 @@
-export const LOG_END_SYMBOL = '\n　　　　　　　　　　';
+export const LOG_END_SYMBOL = '　　　　　';
 
 export const TASK_COMMAND = 'task';
 export const QL_COMMAND = 'ql';

diff --git a/shell/otask.sh b/shell/otask.sh
@@ -124,8 +124,7 @@ handle_task_after() {
   local end_timestamp=$(format_timestamp "$time_format" "$etime")
   local diff_time=$(($end_timestamp - $begin_timestamp))
 
-  echo -e "\n\n## 执行结束... $end_time  耗时 $diff_time 秒"
-  echo -e "\n　　　　　"
+  echo -e "\n\n## 执行结束... $end_time  耗时 $diff_time 秒　　　　　"
 
   [[ $ID ]] && update_cron "\"$ID\"" "1" "" "$log_path" "$begin_timestamp" "$diff_time"
 }

diff --git a/shell/update.sh b/shell/update.sh
@@ -499,8 +499,7 @@ main() {
   [[ $ID ]] && update_cron "\"$ID\"" "1" "" "$log_path" "$begin_timestamp" "$diff_time"
 
   if [[ "$p1" != "repo" ]] && [[ "$p1" != "raw" ]]; then
-    eval echo -e "\\\n\#\# 执行结束... $end_time  耗时 $diff_time 秒" $cmd
-    eval echo -e "\\\n　　　　　　　　　　" $cmd
+    eval echo -e "\\\n\#\# 执行结束... $end_time  耗时 $diff_time 秒　　　　　" $cmd
   fi
 
   if [[ -f $file_path ]]; then

diff --git a/src/pages/crontab/index.less b/src/pages/crontab/index.less
@@ -179,3 +179,15 @@ tr.drop-over-upward td {
     margin-left: 40px;
   }
 }
+
+.log-modal {
+  .log-container {
+    overflow-y: auto;
+    min-height: 300px;
+    max-height: calc(80vh - 110px);
+    max-height: calc(80vh - var(--vh-offset, 110px));
+
+    padding: 24px;
+    margin: -24px;
+  }
+}
diff --git a/src/pages/crontab/logModal.tsx b/src/pages/crontab/logModal.tsx
@@ -34,6 +34,7 @@ const CronLogModal = ({
   const [loading, setLoading] = useState<any>(true);
   const [executing, setExecuting] = useState<any>(true);
   const [isPhone, setIsPhone] = useState(false);
+  const scrollInfoRef = useRef({ value: 0, down: true });
 
   const getCronLog = (isFirst?: boolean) => {
     if (isFirst) {
@@ -44,17 +45,19 @@ const CronLogModal = ({
       .then(({ code, data }) => {
         if (
           code === 200 &&
-          localStorage.getItem('logCron') === String(cron.id)
+          localStorage.getItem('logCron') === String(cron.id) &&
+          data !== value
         ) {
           const log = data as string;
           setValue(log || '暂无日志');
-          const hasNext = log && !logEnded(log) && !log.includes('重启面板') && !log.includes('任务未运行或运行失败，请尝试手动运行');
+          const hasNext = Boolean(
+            log &&
+              !logEnded(log) &&
+              !log.includes('重启面板') &&
+              !log.includes('任务未运行或运行失败，请尝试手动运行'),
+          );
           setExecuting(hasNext);
-          setTimeout(() => {
-            document
-              .querySelector('#log-flag')!
-              .scrollIntoView({ behavior: 'smooth' });
-          }, 1000);
+          autoScroll();
           if (hasNext) {
             setTimeout(() => {
               getCronLog();
@@ -92,11 +95,33 @@ const CronLogModal = ({
       });
   };
 
+  const autoScroll = () => {
+    if (!scrollInfoRef.current.down) {
+      return;
+    }
+
+    setTimeout(() => {
+      document
+        .querySelector('#log-flag')!
+        .scrollIntoView({ behavior: 'smooth' });
+    }, 1000);
+  };
+
   const cancel = () => {
     localStorage.removeItem('logCron');
     handleCancel();
   };
 
+  const handleScroll = (e) => {
+    const sTop = e.target.scrollTop;
+    if (scrollInfoRef.current.down) {
+      scrollInfoRef.current = {
+        value: sTop,
+        down: sTop > scrollInfoRef.current.value,
+      };
+    }
+  };
+
   const titleElement = () => {
     return (
       <>
@@ -141,24 +166,26 @@ const CronLogModal = ({
         </Button>,
       ]}
     >
-      {loading ? (
-        <PageLoading />
-      ) : (
-        <pre
-          style={
-            isPhone
-              ? {
-                  fontFamily: 'Source Code Pro',
-                  width: 375,
-                  zoom: 0.83,
-                }
-              : {}
-          }
-        >
-          {value}
-        </pre>
-      )}
-      <div id="log-flag"></div>
+      <div onScroll={handleScroll} className="log-container">
+        {loading ? (
+          <PageLoading />
+        ) : (
+          <pre
+            style={
+              isPhone
+                ? {
+                    fontFamily: 'Source Code Pro',
+                    width: 375,
+                    zoom: 0.83,
+                  }
+                : {}
+            }
+          >
+            {value}
+          </pre>
+        )}
+        <div id="log-flag"></div>
+      </div>
     </Modal>
   );
 };

diff --git a/src/utils/const.ts b/src/utils/const.ts
@@ -1 +1 @@
-export const LOG_END_SYMBOL = '\n　　　　　　　　　　';
+export const LOG_END_SYMBOL = '　　　　　';