From 4a2f7ebf87b7c027cebff7cb763f8f35f6d2aa36 Mon Sep 17 00:00:00 2001
From: xiaojunnuo <xiaojunnuo@qq.com>
Date: Fri, 15 Nov 2024 14:32:22 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=97=A5=E5=BF=97=E6=9F=A5=E7=9C=8B?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E6=BB=9A=E5=8A=A8=E5=88=B0=E5=BA=95=E9=83=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pipeline/component/task-view/index.vue    | 29 +++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/task-view/index.vue b/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/task-view/index.vue
index 54b13b17..16286310 100644
--- a/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/task-view/index.vue
+++ b/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/task-view/index.vue
@@ -8,7 +8,7 @@
             <pi-status-show :status="item.node.status?.result" type="icon"></pi-status-show>
           </div>
         </template>
-        <div class="pi-task-view-logs" style="overflow: auto">
+        <div class="pi-task-view-logs" :class="item.node.id" style="overflow: auto">
           <template v-for="(logItem, index) of item.logs" :key="index">
             <span :class="logItem.color"> {{ logItem.time }}</span> <span>{{ logItem.content }}</span>
           </template>
@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts">
-import { computed, inject, Ref, ref } from "vue";
+import { computed, inject, nextTick, Ref, ref, watch } from "vue";
 import { RunHistory } from "../../type";
 import PiStatusShow from "/@/views/certd/pipeline/pipeline/component/status-show.vue";
 
@@ -61,6 +61,7 @@ export default {
         if (currentHistory?.value?.logs != null) {
           node.logs = computed(() => {
             if (currentHistory?.value?.logs && currentHistory.value?.logs[node.node.id] != null) {
+              console.log("log changed", node.node.id);
               const logs = currentHistory.value?.logs[node.node.id];
               const list = [];
               for (let log of logs) {
@@ -78,6 +79,30 @@ export default {
             }
             return [];
           });
+
+          watch(
+            () => {
+              return node.logs.value.length;
+            },
+            async () => {
+              let el = document.querySelector(`.pi-task-view-logs.${node.node.id}`);
+              console.log("el", el);
+              //判断当前是否在底部
+              const isBottom = el ? el.scrollHeight - el.scrollTop === el.clientHeight : true;
+              await nextTick();
+              el = document.querySelector(`.pi-task-view-logs.${node.node.id}`);
+              //如果在底部则滚动到底部
+              if (isBottom && el) {
+                el?.scrollTo({
+                  top: el.scrollHeight,
+                  behavior: "smooth"
+                });
+              }
+            },
+            {
+              immediate: true
+            }
+          );
         }
       }