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 @@
+
+
+
+
+
+
+
@@ -428,9 +441,27 @@ const visibleMessages = computed(() =>
);
const chatHistory = ref(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;
}