fix(webui): handle history wheel on message list

Author: 1zzxy1

dashboard/src/components/chat/MessageList.vue

@@ -1,5 +1,10 @@
 <template>
-    <div class="messages-container" ref="messageContainer" :class="{ 'is-dark': isDark }">
+    <div
+        class="messages-container"
+        ref="messageContainer"
+        :class="{ 'is-dark': isDark }"
+        :tabindex="manualWheelScroll ? -1 : null"
+        @wheel="handleWheelScroll">
         <!-- 加载指示器 -->
         <div v-if="isLoadingMessages" class="loading-overlay" :class="{ 'is-dark': isDark }">
             <v-progress-circular indeterminate size="48" width="4" color="primary"></v-progress-circular>
@@ -224,6 +229,10 @@ export default {
         isLoadingMessages: {
             type: Boolean,
             default: false
+        },
+        manualWheelScroll: {
+            type: Boolean,
+            default: false
         }
     },
     emits: ['openImagePreview', 'replyMessage', 'replyWithText', 'openRefs'],
@@ -759,6 +768,33 @@ export default {
             }
         },
 
+        handleWheelScroll(event) {
+            if (!this.manualWheelScroll || event.ctrlKey) {
+                return;
+            }
+
+            const container = this.$refs.messageContainer;
+            if (!container) {
+                return;
+            }
+
+            if (document.activeElement !== container) {
+                container.focus({ preventScroll: true });
+            }
+
+            const deltaMultiplier = event.deltaMode === 1
+                ? 16
+                : event.deltaMode === 2
+                    ? container.clientHeight
+                    : 1;
+
+            container.scrollTop += event.deltaY * deltaMultiplier;
+
+            event.preventDefault();
+            event.stopPropagation();
+            this.handleScroll();
+        },
+
         // 组件销毁时移除监听器
         beforeUnmount() {
             const container = this.$refs.messageContainer;

dashboard/src/views/ConversationPage.vue

@@ -198,22 +198,15 @@
                     </div>
 
                     <!-- 预览模式 - 聊天界面 -->
-                    <div
-                        v-else
-                        class="conversation-messages-container"
-                        style="background-color: var(--v-theme-surface);"
-                        role="region"
-                        :aria-label="tm('history.title')"
-                        tabindex="0"
-                        @wheel.stop>
+                    <div v-else class="conversation-messages-container" style="background-color: var(--v-theme-surface);">
                         <!-- 空对话提示 -->
                         <div v-if="conversationHistory.length === 0" class="text-center py-5">
                             <v-icon size="48" color="grey">mdi-chat-remove</v-icon>
                             <p class="text-disabled mt-2">{{ tm('status.emptyContent') }}</p>
                         </div>
 
                         <!-- 消息列表组件 -->
-                        <MessageList v-else :messages="formattedMessages" :isDark="isDark" />
+                        <MessageList v-else :messages="formattedMessages" :isDark="isDark" :manualWheelScroll="true" />
                     </div>
                 </v-card-text>
 
@@ -1109,17 +1102,11 @@ export default {
 .conversation-messages-container {
     max-height: 500px;
     overflow-y: auto;
-    overscroll-behavior-y: contain;
     padding: 8px;
     border-radius: 8px;
     background-color: #f9f9f9;
 }
 
-.conversation-messages-container:focus-visible {
-    outline: 2px solid rgba(var(--v-theme-primary), 0.6);
-    outline-offset: 2px;
-}
-
 /* 暗色模式下的聊天消息容器 */
 .v-theme--dark .conversation-messages-container {
     background-color: #1e1e1e;