Update 优化历史记录为自动懒加载

app/static/index.html

@@ -5,7 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>数学24点游戏</title>
-    <link rel="icon" href="/static/favicon.ico"></link>
+    <link rel="icon" href="/static/favicon.ico">
+    </link>
     <link rel="stylesheet" href="/static/styles.css">
 </head>
 
@@ -167,20 +168,22 @@
                 <button class="search-btn" id="history-search-btn">查询</button>
             </div>
             <div class="history-data-container">
+                <div class="records-stats history-records-stats">共<span>0</span>条记录</div>
                 <div id="history-container" class="history-cards-container">
                     <div class="placeholder">请点击查询按钮获取历史记录</div>
                 </div>
-                <button id="history-load-more" class="load-more-btn" style="display: none;">加载更多</button>
+                <div id="history-stats" style="height: 20px"></div>
             </div>
         </div>
         <!-- 我的收藏 -->
         <div class="module module-6 module-container" style="display: none;">
             <h2>我的收藏</h2>
             <div class="history-data-container">
+                <div class="records-stats favorite-records-stats">共<span>0</span>条记录</div>
                 <div id="favorite-container" class="history-cards-container">
                     <div class="placeholder">暂无收藏记录</div>
                 </div>
-                <button id="favorite-load-more" class="load-more-btn" style="display: none;">加载更多</button>
+                <div id="favorite-stats" style="height: 20px"></div>
             </div>
         </div>
     </div>

app/static/script.js

@@ -20,11 +20,11 @@ document.addEventListener('DOMContentLoaded', function () {
     const historyEndDateInput = document.getElementById('history-end-date');
     const historySearchBtn = document.getElementById('history-search-btn');
     const historyContainer = document.getElementById('history-container');
-    const historyLoadMoreBtn = document.getElementById('history-load-more');
+    const historyStats = document.getElementById('history-stats');
 
     // 获取DOM元素 - 我的收藏模块
     const favoriteContainer = document.getElementById('favorite-container');
-    const favoriteLoadMoreBtn = document.getElementById('favorite-load-more');
+    const favoriteStats = document.getElementById('favorite-stats');
 
     // 获取DOM元素 - 出题模块
     const problemContent = document.getElementById('problem-content');
@@ -101,11 +101,27 @@ document.addEventListener('DOMContentLoaded', function () {
     // 为历史记录查询按钮添加点击事件
     historySearchBtn.addEventListener('click', () => { fetchHistory(false) });
 
-    // 为历史记录加载更多按钮添加点击事件
-    historyLoadMoreBtn.addEventListener('click', () => fetchHistory(true));
+    // 添加滚动监听器，实现自动加载更多
+    document.querySelector('.history-data-container').addEventListener('scroll', function () {
+        const module5 = document.querySelector('.module-5');
+        const module6 = document.querySelector('.module-6');
 
-    // 为收藏加载更多按钮添加点击事件
-    favoriteLoadMoreBtn.addEventListener('click', () => fetchFavorites(true));
+        // 检查历史记录模块是否可见
+        if (module5.style.display === 'block') {
+            const historyStatsRect = historyStats.getBoundingClientRect();
+            if (historyStatsRect.top <= window.innerHeight && !isLoadingHistory && hasMoreHistory) {
+                fetchHistory(true);
+            }
+        }
+
+        // 检查收藏模块是否可见
+        if (module6.style.display === 'block') {
+            const favoriteStatsRect = favoriteStats.getBoundingClientRect();
+            if (favoriteStatsRect.top <= window.innerHeight && !isLoadingFavorite && hasMoreFavorite) {
+                fetchFavorites(true);
+            }
+        }
+    });
 
     // 根据题型生成题目
     let answerTimer = null;
@@ -243,6 +259,7 @@ document.addEventListener('DOMContentLoaded', function () {
         }
     }
 
+    generateProblem(0)
     // 渲染问题答案
     function renderProblemAnswers(answers) {
         if (!answers || answers.length === 0) {
@@ -537,17 +554,11 @@ document.addEventListener('DOMContentLoaded', function () {
     async function fetchHistory(loadMore = false) {
         if (isLoadingHistory) return;
         isLoadingHistory = true;
+        historyStats.textContent = ''
 
-        // 如果不是加载更多，则重置状态
         if (!loadMore) {
             currentHistoryPage = 1;
             hasMoreHistory = true;
-            historyContainer.innerHTML = '<div class="placeholder">正在加载历史记录...</div>';
-            historyLoadMoreBtn.style.display = 'none';
-        } else {
-            // 显示加载中状态
-            historyLoadMoreBtn.textContent = '加载中...';
-            historyLoadMoreBtn.disabled = true;
         }
 
         try {
@@ -563,7 +574,7 @@ document.addEventListener('DOMContentLoaded', function () {
                 params.append('end_date', historyEndDateInput.value);
             }
             params.append('page', currentHistoryPage.toString());
-            params.append('page_size', '5');
+            params.append('page_size', '10');
 
             // 调用API获取历史记录
             const response = await fetch(`/api/history?${params.toString()}`);
@@ -572,11 +583,10 @@ document.addEventListener('DOMContentLoaded', function () {
             if (response.ok && data.history) {
                 // 渲染历史记录
                 renderHistoryData(data.history, historyContainer, loadMore, false);
-
                 // 更新分页状态
                 hasMoreHistory = currentHistoryPage < data.total_pages;
-                historyLoadMoreBtn.style.display = hasMoreHistory ? 'block' : 'none';
-
+                const historyRecordsStats = document.querySelector('.history-records-stats span');
+                historyRecordsStats.textContent = data.count
                 // 如果成功加载，增加页码
                 currentHistoryPage++;
 
@@ -586,42 +596,33 @@ document.addEventListener('DOMContentLoaded', function () {
         } catch (error) {
             if (!loadMore) {
                 historyContainer.innerHTML = `<div class="error">${error.message}</div>`;
+                historyStats.textContent = '加载失败';
             } else {
                 // 显示加载失败消息
                 alert('加载更多历史记录失败: ' + error.message);
             }
         } finally {
             isLoadingHistory = false;
-            if (loadMore) {
-                historyLoadMoreBtn.textContent = '加载更多';
-                historyLoadMoreBtn.disabled = false;
-            }
         }
     }
     // 获取收藏记录数据
     async function fetchFavorites(loadMore = false) {
         if (isLoadingFavorite) return;
         isLoadingFavorite = true;
-
+        favoriteStats.textContent = ''
         // 如果不是加载更多，则重置状态
         if (!loadMore) {
             currentFavoritePage = 1;
             hasMoreFavorite = true;
-            favoriteContainer.innerHTML = '<div class="placeholder">正在加载收藏记录...</div>';
-            favoriteLoadMoreBtn.style.display = 'none';
-        } else {
-            // 显示加载中状态
-            favoriteLoadMoreBtn.textContent = '加载中...';
-            favoriteLoadMoreBtn.disabled = true;
         }
 
         try {
             // 构建查询参数
             const params = new URLSearchParams();
             params.append('page', currentFavoritePage);
-            params.append('page_size', 5);
-            params.append('only_favorite', true);
-            params.append('include_deleted', true);
+            params.append('page_size', "10");
+            params.append('only_favorite', "true");
+            params.append('include_deleted', "false");
 
             // 调用API获取收藏记录
             const response = await fetch(`/api/history?${params.toString()}`);
@@ -632,25 +633,25 @@ document.addEventListener('DOMContentLoaded', function () {
                 renderHistoryData(data.history, favoriteContainer, loadMore, true);
                 // 更新分页状态
                 hasMoreFavorite = currentFavoritePage < data.total_pages;
-                favoriteLoadMoreBtn.style.display = hasMoreFavorite ? 'block' : 'none';
+
+                const favoriteRecordsStats = document.querySelector('.favorite-records-stats span');
+                favoriteRecordsStats.textContent = data.count
                 // 更新分页状态
                 currentFavoritePage++;
             } else {
                 if (!loadMore) {
                     favoriteContainer.innerHTML = `<div class="error">${data.detail || '获取收藏记录失败'}</div>`;
+                    favoriteStats.textContent = '加载失败';
                 }
             }
         } catch (error) {
             console.error('Error:', error);
             if (!loadMore) {
                 favoriteContainer.innerHTML = '<div class="error">请求失败，请检查网络连接</div>';
+                favoriteStats.textContent = '加载失败';
             }
         } finally {
             isLoadingFavorite = false;
-            if (loadMore) {
-                favoriteLoadMoreBtn.textContent = '加载更多';
-                favoriteLoadMoreBtn.disabled = false;
-            }
         }
     }
 
@@ -663,7 +664,7 @@ document.addEventListener('DOMContentLoaded', function () {
         }
 
         // 构建卡片内容
-        let cardsHTML = '';
+        let cardsHTML = ``;
         historyItems.forEach(item => {
             // 格式化日期时间
             const date = new Date(item.created_at);
@@ -827,7 +828,7 @@ document.addEventListener('DOMContentLoaded', function () {
         });
 
         function renderHistoryAnswers(answers) {
-            let str=''
+            let str = ''
             if (!answers || answers.length === 0) {
                 str = '<p class="placeholder">没有找到答案</p>';
                 return str;
@@ -889,24 +890,6 @@ document.addEventListener('DOMContentLoaded', function () {
 
     }
 
-    // 为加载更多按钮添加事件监听
-    if (historyLoadMoreBtn) {
-        historyLoadMoreBtn.addEventListener('click', () => {
-            if (!isLoadingHistory && hasMoreHistory) {
-                fetchHistory(true);
-            }
-        });
-    }
-
-    // 为收藏加载更多按钮添加事件监听
-    if (favoriteLoadMoreBtn) {
-        favoriteLoadMoreBtn.addEventListener('click', () => {
-            if (!isLoadingFavorite && hasMoreFavorite) {
-                fetchFavorites(true);
-            }
-        });
-    }
-
     // 设置日期输入框的默认值为当前日期
     const today = new Date();
     // 计算三天前的日期

app/static/styles.css

@@ -10,14 +10,15 @@ body {
     color: #333;
     background-color: #f5f5f5;
     padding: 10px 3px;
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
 }
 
 .container {
-    max-width: 800px;
+    max-width: 900px;
     margin: 0 auto;
-    /* background-color: #fff; */
     border-radius: 8px;
-    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
     padding: 8px;
 }
 
@@ -198,7 +199,6 @@ button:hover {
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     padding: 20px;
-    margin-bottom: 30px;
 }
 
 .module h2 {
@@ -217,11 +217,13 @@ button:hover {
     gap: 15px;
     margin-bottom: 20px;
 }
-.pre-container{
+
+.pre-container {
     display: inline-flex;
     gap: 8px;
     align-items: center;
 }
+
 .timer-container {
     display: inline-flex;
     align-items: center;
@@ -527,7 +529,7 @@ button:hover {
 
 .history-data-container {
     margin-top: 20px;
-    max-height: 600px;
+    max-height: calc(110vh - 400px);
     overflow-y: auto;
 }
 
@@ -564,12 +566,6 @@ button:hover {
     font-size: 13px;
 }
 
-.history-card-actions {
-    display: flex;
-    gap: 5px;
-    align-items: center;
-}
-
 
 .history-card.favorite {
     border-left: 4px solid #ffcc00;
@@ -670,13 +666,24 @@ button:hover {
     margin-top: 5px;
 }
 
+.records-stats {
+    display: block;
+    width: 100%;
+    padding: 3px;
+    /*background-color: #f5f5f5;*/
+    color: #666;
+    text-align: center;
+    font-size: 14px;
+}
+
+/* 保留加载按钮样式用于其他地方 */
 .load-more-btn {
     display: block;
     width: 100%;
     padding: 10px;
-    margin-top: 15px;
-    background-color: #f2f2f2;
-    color: #333;
+    margin-top: 5px;
+    background-color: #2ecc71;
+    color: #eee;
     border: 1px solid #ddd;
     border-radius: 4px;
     cursor: pointer;
@@ -684,12 +691,12 @@ button:hover {
 }
 
 .load-more-btn:hover {
-    background-color: #e0e0e0;
+    color: #fff;
+    background-color: #2ecc71;
 }
 
 .load-more-btn:disabled {
-    background-color: #f9f9f9;
-    color: #999;
+    color: #ddd;
     cursor: not-allowed;
 }
 
@@ -811,17 +818,17 @@ button:hover {
 
 
 .icon-btn {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            padding: 5px;
-            border: none;
-            background: transparent;
-            color: #666;
-            cursor: pointer;
-            border-radius: 4px;
-            transition: all 0.2s;
-        }
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 5px;
+    border: none;
+    background: transparent;
+    color: #666;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.2s;
+}
 
 /* 确保按钮在不同状态下的一致性 */
 .show-history-answer-btn,
@@ -830,19 +837,23 @@ button:hover {
     outline: none;
     box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3);
 }
-.show-history-answer-btn{
-    color:#3498db;
+
+.show-history-answer-btn {
+    color: #3498db;
 }
 
-.favorite-btn{
-    color:#f39c12;
+.favorite-btn {
+    color: #f39c12;
 }
+
 .delete-btn {
-    color:#c0392b;
+    color: #c0392b;
 }
-.delete-btn.active{
+
+.delete-btn.active {
     color: #4CAF50;
 }
+
 /* 禁用状态的按钮样式 */
 .favorite-btn:disabled,
 .delete-btn:disabled {
@@ -857,11 +868,14 @@ button:hover {
 
 .history-card-actions {
     display: flex;
-    gap: 8px;
+    align-items: center;
+    gap: 15px;
 }
+
 .show-history-answer-btn.active {
     color: #3498db;
 }
+
 .favorite-btn.active {
     color: #f39c12;
 }