From a75fb8bba96a70982ef8ad6adbdbc9eb4f3aac10 Mon Sep 17 00:00:00 2001
From: yuqianhe <yuqianhe@privserv.eu.org>
Date: Wed, 10 Jun 2026 06:23:53 +0000
Subject: [PATCH] Update videoapp frontend

---
 web/static/videoapp/app.js     | 23 +++++++++++++++++++++++
 web/static/videoapp/index.html | 13 +++++++++++++
 web/static/videoapp/style.css  | 21 +++++++++++++++++++++
 3 files changed, 57 insertions(+)

diff --git a/web/static/videoapp/app.js b/web/static/videoapp/app.js
index 4871f38..da3b935 100644
--- a/web/static/videoapp/app.js
+++ b/web/static/videoapp/app.js
@@ -185,9 +185,20 @@ async function loadCategoryPage() {
     try {
         const data = await apiGet(`/category/${currentCategory}?page=${currentPage}`);
         totalPages = data.total_pages || 1;
+
+        // 更新顶部翻页
         document.getElementById('pageInfo').textContent = `第 ${currentPage} 页 / 共 ${totalPages} 页`;
         document.getElementById('btnPrev').disabled = currentPage <= 1;
         document.getElementById('btnNext').disabled = currentPage >= totalPages;
+        document.getElementById('pageJumpTop').max = totalPages;
+        document.getElementById('pageJumpTop').value = '';
+
+        // 更新底部翻页
+        document.getElementById('pageInfoBottom').textContent = `第 ${currentPage} 页 / 共 ${totalPages} 页`;
+        document.getElementById('btnPrevBottom').disabled = currentPage <= 1;
+        document.getElementById('btnNextBottom').disabled = currentPage >= totalPages;
+        document.getElementById('pageJumpBottom').max = totalPages;
+        document.getElementById('pageJumpBottom').value = '';
 
         renderVideoGrid('videoGrid', data.items || [], true);
     } catch(e) {
@@ -199,6 +210,18 @@ async function loadCategoryPage() {
 function prevPage() { if (currentPage > 1) { currentPage--; loadCategoryPage(); } }
 function nextPage() { if (currentPage < totalPages) { currentPage++; loadCategoryPage(); } }
 
+function jumpToPage(source) {
+    const inputId = source === 'top' ? 'pageJumpTop' : 'pageJumpBottom';
+    const input = document.getElementById(inputId);
+    const page = parseInt(input.value, 10);
+    if (isNaN(page) || page < 1 || page > totalPages) {
+        alert(`请输入 1 ~ ${totalPages} 之间的页码`);
+        return;
+    }
+    currentPage = page;
+    loadCategoryPage();
+}
+
 // ── 搜索 ────────────────────────────────────────────────────
 async function doSearch() {
     const q = document.getElementById('searchInput').value.trim();
diff --git a/web/static/videoapp/index.html b/web/static/videoapp/index.html
index b947006..f817208 100644
--- a/web/static/videoapp/index.html
+++ b/web/static/videoapp/index.html
@@ -58,10 +58,23 @@
                     <button class="btn btn-sm" onclick="prevPage()" id="btnPrev">◀ 上一页</button>
                     <span id="pageInfo">第 1 页</span>
                     <button class="btn btn-sm" onclick="nextPage()" id="btnNext">下一页 ▶</button>
+                    <span class="page-jump-group">
+                        跳至 <input type="number" class="page-jump-input" id="pageJumpTop" min="1" placeholder="页码" onkeydown="if(event.key==='Enter')jumpToPage('top')">
+                        <button class="btn btn-sm" onclick="jumpToPage('top')">GO</button>
+                    </span>
                 </div>
             </div>
             <div class="video-grid" id="videoGrid"></div>
             <div class="loading" id="browseLoading" style="display:none;">加载中...</div>
+            <div class="browse-footer-pagination" id="browseFooterPagination">
+                <button class="btn btn-sm" onclick="prevPage()" id="btnPrevBottom">◀ 上一页</button>
+                <span id="pageInfoBottom">第 1 页</span>
+                <button class="btn btn-sm" onclick="nextPage()" id="btnNextBottom">下一页 ▶</button>
+                <span class="page-jump-group">
+                    跳至 <input type="number" class="page-jump-input" id="pageJumpBottom" min="1" placeholder="页码" onkeydown="if(event.key==='Enter')jumpToPage('bottom')">
+                    <button class="btn btn-sm" onclick="jumpToPage('bottom')">GO</button>
+                </span>
+            </div>
         </section>
 
         <!-- 分类列表页 -->
diff --git a/web/static/videoapp/style.css b/web/static/videoapp/style.css
index ed3fe97..1e0aa07 100644
--- a/web/static/videoapp/style.css
+++ b/web/static/videoapp/style.css
@@ -101,6 +101,27 @@ body {
 }
 #pageInfo { font-size:0.85rem; color:var(--text2); min-width:60px; text-align:center; }
 
+/* ── 底部翻页 ──────────────────────────────────────────── */
+.browse-footer-pagination {
+    max-width:1200px; margin:20px auto 30px; padding:0 20px;
+    display:flex; justify-content:center; align-items:center; gap:12px;
+}
+
+/* ── 跳转页码 ──────────────────────────────────────────── */
+.page-jump-group {
+    display:inline-flex; align-items:center; gap:4px;
+    font-size:0.85rem; color:var(--text2);
+}
+.page-jump-input {
+    width:60px; padding:5px 8px; background:var(--bg2); color:var(--text);
+    border:1px solid var(--border); border-radius:6px; font-size:0.85rem;
+    text-align:center;
+    -moz-appearance:textfield;
+}
+.page-jump-input::-webkit-inner-spin-button,
+.page-jump-input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
+.page-jump-input:focus { outline:none; border-color:var(--accent); }
+
 /* ── 搜索栏 ────────────────────────────────────────────── */
 .search-bar { display:flex; gap:8px; max-width:600px; margin:20px auto; padding:0 20px; }
 .search-bar input {