Fix loglist

frontend/js/pages/logs/index.js

@@ -3,11 +3,17 @@
 import { apiFetchJson } from '../../services/api.js';
 import LogList from './logList.js';
 
+// [最终版] 创建一个共享的数据仓库，用于缓存 Groups 和 Keys
+const dataStore = {
+    groups: new Map(), 
+    keys: new Map(),  
+};
+
 class LogsPage {
     constructor() {
         this.state = {
             logs: [],
-            pagination: { page: 1, pages: 1, total: 0, page_size: 20 }, // 包含 page_size
+            pagination: { page: 1, pages: 1, total: 0, page_size: 20 },
             isLoading: true,
             filters: { page: 1, page_size: 20 }
         };
@@ -19,21 +25,30 @@ class LogsPage {
         this.initialized = !!this.elements.tableBody;
 
         if (this.initialized) {
-            this.logList = new LogList(this.elements.tableBody);
+            this.logList = new LogList(this.elements.tableBody, dataStore);
         }
     }
 
     async init() {
-        if (!this.initialized) {
-            console.error("LogsPage: Could not initialize. Essential container element 'logs-table-body' is missing.");
-            return;
-        }
+        if (!this.initialized) return;
         this.initEventListeners();
+        // 页面初始化：先加载群组，再加载日志
+        await this.loadGroupsOnce();
         await this.loadAndRenderLogs();
     }
 
-    initEventListeners() {
-        // 分页和筛选的事件监听器将在后续任务中添加
+    initEventListeners() { /* 分页和筛选的事件监听器 */ }
+
+    async loadGroupsOnce() {
+        if (dataStore.groups.size > 0) return; // 防止重复加载
+        try {
+            const { success, data } = await apiFetchJson("/admin/keygroups");
+            if (success && Array.isArray(data)) {
+                data.forEach(group => dataStore.groups.set(group.id, group));
+            }
+        } catch (error) {
+            console.error("Failed to load key groups:", error);
+        }
     }
 
     async loadAndRenderLogs() {
@@ -41,36 +56,45 @@ class LogsPage {
         this.logList.renderLoading(); 
 
         try {
-            const url = `/admin/logs?page=${this.state.filters.page}&page_size=${this.state.filters.page_size}`;
-            const responseData = await apiFetchJson(url);
+            const query = new URLSearchParams(this.state.filters);
+            const { success, data } = await apiFetchJson(`/admin/logs?${query.toString()}`);
             
-            if (responseData && responseData.success && Array.isArray(responseData.data)) {
-                this.state.logs = responseData.data;
+            if (success && typeof data === 'object') {
+                const { items, total, page, page_size } = data;
+                this.state.logs = items;
+                this.state.pagination = { page, page_size, total, pages: Math.ceil(total / page_size) };
 
-                // [假设] 由于当前响应不包含分页信息，我们基于请求和返回的数据来模拟
-                // TODO: 当后端API返回分页对象时，替换此处的模拟数据
-                this.state.pagination = {
-                    page: this.state.filters.page,
-                    page_size: this.state.filters.page_size,
-                    total: responseData.data.length, // 这是一个不准确的临时值
-                    pages: Math.ceil(responseData.data.length / this.state.filters.page_size) // 同样不准确
-                };
+                // [核心] 在渲染前，按需批量加载本页日志所需的、尚未缓存的Key信息
+                await this.enrichLogsWithKeyNames(items);
                 
-                // [修改] 将分页状态传递给 render 方法
+                // 调用 render，此时 dataStore 中已包含所有需要的数据
                 this.logList.render(this.state.logs, this.state.pagination);
-                
             } else {
-                console.error("API response for logs is incorrect:", responseData);
                 this.logList.render([], this.state.pagination);
             }
-        } catch (error)
-        {
+        } catch (error) {
             console.error("Failed to load logs:", error);
             this.logList.render([], this.state.pagination);
         } finally {
             this.state.isLoading = false;
         }
     }
+
+    async enrichLogsWithKeyNames(logs) {
+        const missingKeyIds = [...new Set(
+            logs.filter(log => log.KeyID && !dataStore.keys.has(log.KeyID)).map(log => log.KeyID)
+        )];
+        if (missingKeyIds.length === 0) return;
+        try {
+            const idsQuery = missingKeyIds.join(',');
+            const { success, data } = await apiFetchJson(`/admin/apikeys?ids=${idsQuery}`);
+            if (success && Array.isArray(data)) {
+                data.forEach(key => dataStore.keys.set(key.ID, key));
+            }
+        } catch (error) {
+            console.error(`Failed to fetch key details:`, error);
+        }
+    }
 }
 
 export default function() {