From 47a58373d1084732bc0965126d61492297d24db5 Mon Sep 17 00:00:00 2001
From: imizao <2313466338@qq.com>
Date: Tue, 7 Jan 2025 16:24:34 +0800
Subject: [PATCH] [Improvement-16947][UI] Task instance log details should
 always stay at the bottom

---
 .../src/components/log-modal/index.tsx        | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/dolphinscheduler-ui/src/components/log-modal/index.tsx b/dolphinscheduler-ui/src/components/log-modal/index.tsx
index acc3cdbdb892..a89328bb7c87 100644
--- a/dolphinscheduler-ui/src/components/log-modal/index.tsx
+++ b/dolphinscheduler-ui/src/components/log-modal/index.tsx
@@ -23,10 +23,13 @@ import {
   reactive,
   toRefs,
   onMounted,
-  onUnmounted
+  onUnmounted,
+  nextTick,
+  watchEffect
 } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { NIcon, NLog } from 'naive-ui'
+import type { LogInst } from 'naive-ui'
 import Modal from '../modal'
 import {
   DownloadOutlined,
@@ -69,6 +72,9 @@ export default defineComponent({
     const variables = reactive({
       isFullscreen: false
     })
+    
+    const logInstRef = ref<LogInst | null>(null)
+
 
     const change = () => {
       variables.isFullscreen = screenfull.isFullscreen
@@ -95,12 +101,21 @@ export default defineComponent({
       ctx.emit('downloadLogs', props.row)
     }
 
+    // Listen for changes in logRef and scroll to the bottom
+    watchEffect(() => {
+      if (props.logRef) {
+        nextTick(() => {
+          logInstRef.value?.scrollTo({ position: 'bottom', slient: true })
+        })
+      }
+    })
+
     onMounted(() => {
       screenfull.on('change', change)
     })
 
     onUnmounted(() => {
-      screenfull.on('change', change)
+      screenfull.off('change', change)
     })
 
     return {
@@ -110,6 +125,7 @@ export default defineComponent({
       refreshLogs,
       downloadLogs,
       handleFullScreen,
+      logInstRef,
       ...toRefs(variables)
     }
   },
@@ -157,6 +173,7 @@ export default defineComponent({
         ])}
       >
         <NLog
+          ref="logInstRef"
           rows={30}
           log={this.logRef}
           loading={this.logLoadingRef}