From 213d52723b8ba382c9a673e3f2352104e0d1e531 Mon Sep 17 00:00:00 2001
From: hnu202326010131 <2950457847@qq.com>
Date: Wed, 7 Jan 2026 11:28:39 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=95=85=E9=9A=9C=E8=AF=8A=E6=96=AD?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=A2=9E=E5=8A=A0=E5=BF=AB=E9=80=9F=E7=BD=AE?=
 =?UTF-8?q?=E5=BA=95=E6=8C=89=E9=92=AE=E5=B9=B6=E4=BC=98=E5=8C=96=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend-vue/src/app/views/Diagnosis.vue | 72 +++++++++++++++++++++++-
 1 file changed, 70 insertions(+), 2 deletions(-)

diff --git a/frontend-vue/src/app/views/Diagnosis.vue b/frontend-vue/src/app/views/Diagnosis.vue
index 8abbb48..75434e9 100644
--- a/frontend-vue/src/app/views/Diagnosis.vue
+++ b/frontend-vue/src/app/views/Diagnosis.vue
@@ -139,6 +139,19 @@
               </div>
             </div>
 
+            <!-- 快速置底按钮 -->
+            <transition name="el-fade-in">
+              <el-button
+                v-if="showScrollBottom"
+                class="scroll-bottom-btn"
+                type="primary"
+                circle
+                @click="scrollToBottom(true)"
+              >
+                <el-icon><ArrowDown /></el-icon>
+              </el-button>
+            </transition>
+
             <div v-if="err" class="chat-error">
               <el-alert :title="err" type="error" show-icon @close="err = ''" />
             </div>
@@ -428,9 +441,27 @@ const visibleMessages = computed(() =>
 );
 
 const chatHistory = ref<HTMLElement | null>(null);
+const showScrollBottom = ref(false);
+
+function handleScroll() {
+  if (!chatHistory.value) return;
+  const { scrollTop, scrollHeight, clientHeight } = chatHistory.value;
+  showScrollBottom.value = scrollHeight - scrollTop - clientHeight > 200;
+}
+
+function scrollToBottom(smooth = true) {
+  nextTick(() => {
+    if (chatHistory.value) {
+      chatHistory.value.scrollTo({
+        top: chatHistory.value.scrollHeight,
+        behavior: smooth ? "smooth" : "auto",
+      });
+    }
+  });
+}
+
 function scrollToLatest() {
-  const el = chatHistory.value;
-  if (el) el.scrollTop = el.scrollHeight;
+  scrollToBottom(true);
 }
 
 const inputMsg = ref("");
@@ -621,14 +652,25 @@ async function generateReport() {
   await send();
 }
 
+watch(chatHistory, (newVal) => {
+  if (newVal) {
+    newVal.addEventListener("scroll", handleScroll);
+  }
+});
+
 onMounted(async () => {
   await loadClusters();
   await loadHistory();
   startRefresh();
+  // 如果已经有对话，初始化时置底
+  scrollToBottom(false);
 });
 
 onUnmounted(() => {
   stopRefresh();
+  if (chatHistory.value) {
+    chatHistory.value.removeEventListener("scroll", handleScroll);
+  }
 });
 
 watch(selectedNode, () => {
@@ -865,6 +907,7 @@ function formatError(e: any, def: string) {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  position: relative; /* 为置底按钮提供定位参考 */
 }
 
 .chat-history {
@@ -874,6 +917,31 @@ function formatError(e: any, def: string) {
   padding-right: 4px;
 }
 
+.scroll-bottom-btn {
+  position: absolute;
+  right: 20px;
+  bottom: 180px; /* 位于输入框上方 */
+  z-index: 10;
+  box-shadow: var(--el-box-shadow-light);
+  transition: transform 0.3s;
+}
+
+.scroll-bottom-btn:hover {
+  transform: translateY(-2px);
+}
+
+.scroll-bottom-btn:active {
+  transform: translateY(0);
+}
+
+/* 移动端适配：调整按钮位置 */
+@media (max-width: 768px) {
+  .scroll-bottom-btn {
+    right: 15px;
+    bottom: 200px;
+  }
+}
+
 .chat-item {
   margin-bottom: 20px;
 }