fix: paginate chat detail messages

ai_knowledge_base_v2/apps/admin-web/src/App.vue

@@ -52,6 +52,8 @@ const retrievalDetailOpen = ref(false);
 const previewKnowledgeId = ref<number | null>(null);
 const chatDetail = ref<ChatDetail | null>(null);
 const chatDetailOpen = ref(false);
+const chatDetailLoading = ref(false);
+const chatDetailSessionId = ref<number | null>(null);
 const selectedAiLog = ref<AiLogRecord | null>(null);
 const aiLogDetailOpen = ref(false);
 const recordTab = ref("chats");
@@ -63,6 +65,7 @@ const pagers = reactive({
   retrievals: { page: 1, pageSize: 20, total: 0 },
   attention: { page: 1, pageSize: 20, total: 0 },
 });
+const chatDetailMessagePager = reactive({ page: 1, pageSize: 20, total: 0 });
 const editingModelId = ref<number | null>(null);
 const editingKnowledgeId = ref<number | null>(null);
 const batchNodeToken = ref("");
@@ -739,13 +742,38 @@ async function resetChatFilters() {
 }
 
 async function openChatDetail(row: ChatRecord) {
-  chatDetail.value = await api.chatDetail(row.id);
-  chatDetailOpen.value = true;
+  await openChatSession(row.id);
 }
 
 async function openChatSession(sessionId: number) {
-  chatDetail.value = await api.chatDetail(sessionId);
   chatDetailOpen.value = true;
+  chatDetail.value = null;
+  chatDetailSessionId.value = sessionId;
+  Object.assign(chatDetailMessagePager, { page: 1, pageSize: chatDetailMessagePager.pageSize, total: 0 });
+  await loadChatDetail(sessionId, 1, chatDetailMessagePager.pageSize);
+}
+
+async function loadChatDetail(sessionId = chatDetailSessionId.value, page = chatDetailMessagePager.page, pageSize = chatDetailMessagePager.pageSize) {
+  if (!sessionId) return;
+  chatDetailLoading.value = true;
+  try {
+    const detail = await api.chatDetail(sessionId, { messagePage: page, messagePageSize: pageSize });
+    chatDetail.value = detail;
+    const messagePage = detail.messagesPage;
+    Object.assign(chatDetailMessagePager, {
+      page: messagePage?.page ?? page,
+      pageSize: messagePage?.pageSize ?? pageSize,
+      total: messagePage?.total ?? detail.messages.length,
+    });
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : "聊天详情加载失败");
+  } finally {
+    chatDetailLoading.value = false;
+  }
+}
+
+async function changeChatDetailMessagePage(page: number, pageSize: number) {
+  await loadChatDetail(chatDetailSessionId.value, page, pageSize);
 }
 
 async function openAiLogDetail(row: AiLogRecord) {
@@ -1206,6 +1234,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">
       <template v-if="chatDetail">
         <section class="chat-summary">
           <div><span>会话ID</span><strong>{{ chatDetail.session.id }}</strong></div>
@@ -1235,6 +1264,12 @@ function formatRecordDateTime(value: string, boundary: "start" | "end") {
             </div>
           </article>
         </section>
+        <AdminPagination
+          :page="chatDetailMessagePager.page"
+          :page-size="chatDetailMessagePager.pageSize"
+          :total="chatDetailMessagePager.total"
+          @change="changeChatDetailMessagePage"
+        />
 
         <h3 class="detail-title">关联 AI 请求</h3>
         <el-collapse>
@@ -1263,6 +1298,8 @@ function formatRecordDateTime(value: string, boundary: "start" | "end") {
           </el-collapse-item>
         </el-collapse>
       </template>
+      <el-empty v-else-if="!chatDetailLoading" description="聊天详情加载失败或暂无数据" :image-size="80" />
+      </div>
     </el-drawer>
 
     <el-drawer v-model="aiLogDetailOpen" size="820px" title="AI 请求详情">