fix: improve chat detail page navigation

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"

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;