From 1f82b89295e6817063eb64cef67c432ecf2003d2 Mon Sep 17 00:00:00 2001
From: Nelson <1475262689@qq.com>
Date: Thu, 30 Jul 2026 15:32:56 +0800
Subject: [PATCH] fix: improve chat detail page navigation

---
 ai_knowledge_base_v2/apps/admin-web/src/App.vue   | 15 +++++++++++++--
 .../apps/admin-web/src/styles.css                 | 11 +++++++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/ai_knowledge_base_v2/apps/admin-web/src/App.vue b/ai_knowledge_base_v2/apps/admin-web/src/App.vue
index 0859ffa..d01ffe0 100644
--- a/ai_knowledge_base_v2/apps/admin-web/src/App.vue
+++ b/ai_knowledge_base_v2/apps/admin-web/src/App.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ElMessage, ElMessageBox } from "element-plus";
-import { computed, onMounted, reactive, ref, watch } from "vue";
+import { computed, nextTick, onMounted, reactive, ref, watch } from "vue";
 
 import AdminLoginView from "./components/AdminLoginView.vue";
 import AdminPagination from "./components/AdminPagination.vue";
@@ -55,6 +55,7 @@ const chatDetailOpen = ref(false);
 const chatDetailLoading = ref(false);
 const chatMessagesLoading = ref(false);
 const chatDetailSessionId = ref<number | null>(null);
+const chatDetailBodyRef = ref<HTMLElement | null>(null);
 const selectedAiLog = ref<AiLogRecord | null>(null);
 const aiLogDetailOpen = ref(false);
 const recordTab = ref("chats");
@@ -784,6 +785,8 @@ async function changeChatDetailMessagePage(page: number, pageSize: number) {
       messagesPage: result,
     };
     Object.assign(chatDetailMessagePager, { page: result.page, pageSize: result.pageSize, total: result.total });
+    await nextTick();
+    chatDetailBodyRef.value?.scrollTo({ top: 0, behavior: "smooth" });
   } catch (error) {
     ElMessage.error(error instanceof Error ? error.message : "聊天消息加载失败");
   } finally {
@@ -1249,7 +1252,7 @@ function formatRecordDateTime(value: string, boundary: "start" | "end") {
     </el-drawer>
 
     <el-drawer v-model="chatDetailOpen" size="760px" title="聊天详情">
-      <div v-loading="chatDetailLoading" class="chat-detail-body">
+      <div ref="chatDetailBodyRef" v-loading="chatDetailLoading" class="chat-detail-body">
       <template v-if="chatDetail">
         <section class="chat-summary">
           <div><span>会话ID</span><strong>{{ chatDetail.session.id }}</strong></div>
@@ -1259,6 +1262,13 @@ function formatRecordDateTime(value: string, boundary: "start" | "end") {
         </section>
 
         <h3 class="detail-title">完整对话</h3>
+        <AdminPagination
+          class="chat-detail-pagination top"
+          :page="chatDetailMessagePager.page"
+          :page-size="chatDetailMessagePager.pageSize"
+          :total="chatDetailMessagePager.total"
+          @change="changeChatDetailMessagePage"
+        />
         <section v-loading="chatMessagesLoading" class="conversation-list">
           <article
             v-for="message in chatDetail.messages"
@@ -1280,6 +1290,7 @@ function formatRecordDateTime(value: string, boundary: "start" | "end") {
           </article>
         </section>
         <AdminPagination
+          class="chat-detail-pagination"
           :page="chatDetailMessagePager.page"
           :page-size="chatDetailMessagePager.pageSize"
           :total="chatDetailMessagePager.total"
diff --git a/ai_knowledge_base_v2/apps/admin-web/src/styles.css b/ai_knowledge_base_v2/apps/admin-web/src/styles.css
index ce90ae0..1f42be7 100644
--- a/ai_knowledge_base_v2/apps/admin-web/src/styles.css
+++ b/ai_knowledge_base_v2/apps/admin-web/src/styles.css
@@ -1740,6 +1740,9 @@ textarea {
 
 .chat-detail-body {
   min-height: 320px;
+  max-height: calc(100vh - 96px);
+  overflow-y: auto;
+  padding-right: 4px;
 }
 
 .chat-summary {
@@ -1783,6 +1786,14 @@ textarea {
   gap: 12px;
 }
 
+.chat-detail-pagination {
+  margin: 14px 0;
+}
+
+.chat-detail-pagination.top {
+  margin-top: 0;
+}
+
 .conversation-message {
   padding: 12px;
   border: 1px solid #dfe8e5;