From ed508af42466bb123d1108a5827130753cd9c952 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B4=94=E6=B0=B8=E4=BA=AE?= <702625325@qq.com>
Date: Sat, 22 Feb 2025 17:10:53 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=B7=BB=E5=8A=A0=E6=8E=A7=E5=88=B6?=
 =?UTF-8?q?=E5=8F=B0=E5=85=B3=E9=97=AD=E8=87=AA=E5=8A=A8=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/shared/ConsoleDisplayer.vue    |  8 ++-
 dashboard/src/views/ConsolePage.vue           | 71 +++++++++++--------
 2 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/dashboard/src/components/shared/ConsoleDisplayer.vue b/dashboard/src/components/shared/ConsoleDisplayer.vue
index c0f4447ff..620575102 100644
--- a/dashboard/src/components/shared/ConsoleDisplayer.vue
+++ b/dashboard/src/components/shared/ConsoleDisplayer.vue
@@ -13,6 +13,7 @@ export default {
   name: 'ConsoleDisplayer',
   data() {
     return {
+      autoScroll: true,  // 默认开启自动滚动
       logColorAnsiMap: {
         '\u001b[1;34m': 'color: #0000FF; font-weight: bold;', // bold_blue
         '\u001b[1;36m': 'color: #00FFFF; font-weight: bold;', // bold_cyan
@@ -54,6 +55,9 @@ export default {
     }
   },
   methods: {
+    toggleAutoScroll() {
+      this.autoScroll = !this.autoScroll;
+    },
     printLog(log) {
       // append 一个 span 标签到 term，block 的方式
       let ele = document.getElementById('term')
@@ -70,7 +74,9 @@ export default {
       span.classList.add('fade-in')
       span.innerText = log
       ele.appendChild(span)
-      ele.scrollTop = ele.scrollHeight
+      if (this.autoScroll) {
+        ele.scrollTop = ele.scrollHeight
+      }
     }
   },
 }
diff --git a/dashboard/src/views/ConsolePage.vue b/dashboard/src/views/ConsolePage.vue
index 5c6d58281..e638df47c 100644
--- a/dashboard/src/views/ConsolePage.vue
+++ b/dashboard/src/views/ConsolePage.vue
@@ -9,34 +9,42 @@ import axios from 'axios';
     <div
       style="background-color: white; padding: 8px; padding-left: 16px; border-radius: 8px; margin-bottom: 16px; display: flex; flex-direction: row; align-items: center; justify-content: space-between;">
       <h4>控制台</h4>
-      <v-dialog v-model="pipDialog" width="400">
-        <template v-slot:activator="{ props }">
-          <v-btn variant="plain" v-bind="props">安装 pip 库</v-btn>
-        </template>
-        <v-card>
-          <v-card-title>
-            <span class="text-h5">安装 Pip 库</span>
-          </v-card-title>
-          <v-card-text>
-            <v-text-field v-model="pipInstallPayload.package" label="*库名，如 llmtuner" variant="outlined"></v-text-field>
-            <v-text-field v-model="pipInstallPayload.mirror" label="镜像站链接（可选）" variant="outlined"></v-text-field>
-            <small>如果不填镜像站链接，默认使用阿里云镜像：https://mirrors.aliyun.com/pypi/simple/</small>
-            <div>
-              <small>{{ status }}</small>
-            </div>
-            
-          </v-card-text>
-          <v-card-actions>
-            <v-spacer></v-spacer>
-            <v-btn color="blue-darken-1" variant="text" @click="pipInstall" :loading="loading">
-              安装
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
-
+      <div class="d-flex align-center">
+        <v-switch
+          v-model="autoScrollDisabled"
+          :label="autoScrollDisabled ? '自动滚动已关闭' : '自动滚动已开启'"
+          hide-details
+          density="compact"
+          style="margin-right: 16px;"
+        ></v-switch>
+        <v-dialog v-model="pipDialog" width="400">
+          <template v-slot:activator="{ props }">
+            <v-btn variant="plain" v-bind="props">安装 pip 库</v-btn>
+          </template>
+          <v-card>
+            <v-card-title>
+              <span class="text-h5">安装 Pip 库</span>
+            </v-card-title>
+            <v-card-text>
+              <v-text-field v-model="pipInstallPayload.package" label="*库名，如 llmtuner" variant="outlined"></v-text-field>
+              <v-text-field v-model="pipInstallPayload.mirror" label="镜像站链接（可选）" variant="outlined"></v-text-field>
+              <small>如果不填镜像站链接，默认使用阿里云镜像：https://mirrors.aliyun.com/pypi/simple/</small>
+              <div>
+                <small>{{ status }}</small>
+              </div>
+              
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn color="blue-darken-1" variant="text" @click="pipInstall" :loading="loading">
+                安装
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </div>
     </div>
-    <ConsoleDisplayer style="height: calc(100vh - 160px); " />
+    <ConsoleDisplayer ref="consoleDisplayer" style="height: calc(100vh - 160px); " />
   </div>
 </template>
 <script>
@@ -47,6 +55,7 @@ export default {
   },
   data() {
     return {
+      autoScrollDisabled: false,
       pipDialog: false,
       pipInstallPayload: {
         package: '',
@@ -56,7 +65,13 @@ export default {
       status: ''
     }
   },
-
+  watch: {
+    autoScrollDisabled(val) {
+      if (this.$refs.consoleDisplayer) {
+        this.$refs.consoleDisplayer.autoScroll = !val;
+      }
+    }
+  },
   methods: {
     pipInstall() {
       this.loading = true;