From b1f337020c8d45624a703888fd025ceb0be99f2a Mon Sep 17 00:00:00 2001
From: igophper <34326532+igophper@users.noreply.github.com>
Date: Mon, 24 Feb 2025 13:34:51 +0800
Subject: [PATCH] fix(container/log): enable close-on-click-modal and wrap log
 update in nextTick (#7960)

Refs #7547
---
 frontend/src/components/compose-log/index.vue        | 12 +++++++-----
 frontend/src/components/container-log/index.vue      | 12 +++++++-----
 frontend/src/views/container/container/log/index.vue | 12 +++++++-----
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/compose-log/index.vue b/frontend/src/components/compose-log/index.vue
index 5f2edda38..8a32d7070 100644
--- a/frontend/src/components/compose-log/index.vue
+++ b/frontend/src/components/compose-log/index.vue
@@ -59,7 +59,7 @@
 <script lang="ts" setup>
 import i18n from '@/lang';
 import { dateFormatForName } from '@/utils/util';
-import { computed, onBeforeUnmount, reactive, ref, shallowRef, watch } from 'vue';
+import { computed, nextTick, onBeforeUnmount, reactive, ref, shallowRef, watch } from 'vue';
 import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
@@ -145,10 +145,12 @@ const searchLogs = async () => {
     );
     terminalSocket.value.onmessage = (event) => {
         logInfo.value += event.data;
-        const state = view.value.state;
-        view.value.dispatch({
-            selection: { anchor: state.doc.length, head: state.doc.length },
-            scrollIntoView: true,
+        nextTick(() => {
+            const state = view.value.state;
+            view.value.dispatch({
+                selection: { anchor: state.doc.length, head: state.doc.length },
+                scrollIntoView: true,
+            });
         });
     };
 };
diff --git a/frontend/src/components/container-log/index.vue b/frontend/src/components/container-log/index.vue
index ec7f32603..2f8bddc69 100644
--- a/frontend/src/components/container-log/index.vue
+++ b/frontend/src/components/container-log/index.vue
@@ -48,7 +48,7 @@
 import { cleanContainerLog } from '@/api/modules/container';
 import i18n from '@/lang';
 import { dateFormatForName, downloadWithContent } from '@/utils/util';
-import { onBeforeUnmount, reactive, ref, shallowRef } from 'vue';
+import { nextTick, onBeforeUnmount, reactive, ref, shallowRef } from 'vue';
 import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
@@ -113,10 +113,12 @@ const searchLogs = async () => {
     );
     terminalSocket.value.onmessage = (event) => {
         logInfo.value += event.data;
-        const state = view.value.state;
-        view.value.dispatch({
-            selection: { anchor: state.doc.length, head: state.doc.length },
-            scrollIntoView: true,
+        nextTick(() => {
+            const state = view.value.state;
+            view.value.dispatch({
+                selection: { anchor: state.doc.length, head: state.doc.length },
+                scrollIntoView: true,
+            });
         });
     };
 };
diff --git a/frontend/src/views/container/container/log/index.vue b/frontend/src/views/container/container/log/index.vue
index c4e27ec1f..9df7517c2 100644
--- a/frontend/src/views/container/container/log/index.vue
+++ b/frontend/src/views/container/container/log/index.vue
@@ -69,7 +69,7 @@
 import { cleanContainerLog, DownloadFile } from '@/api/modules/container';
 import i18n from '@/lang';
 import { dateFormatForName } from '@/utils/util';
-import { computed, onBeforeUnmount, reactive, ref, shallowRef, watch } from 'vue';
+import { computed, nextTick, onBeforeUnmount, reactive, ref, shallowRef, watch } from 'vue';
 import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
@@ -152,10 +152,12 @@ const searchLogs = async () => {
     );
     terminalSocket.value.onmessage = (event) => {
         logInfo.value += event.data.replace(/\x1B\[[0-?]*[ -/]*[@-~]/g, '');
-        const state = view.value.state;
-        view.value.dispatch({
-            selection: { anchor: state.doc.length, head: state.doc.length },
-            scrollIntoView: true,
+        nextTick(() => {
+            const state = view.value.state;
+            view.value.dispatch({
+                selection: { anchor: state.doc.length, head: state.doc.length },
+                scrollIntoView: true,
+            });
         });
     };
 };