yuqianhe/91-api-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update videoapp frontend

Browse Source
This commit is contained in:
yuqianhe
2026-06-10 06:23:53 +00:00
parent 18fae490e1
commit a75fb8bba9
3 changed files with 57 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
web/static/videoapp/app.js
View File

@@ -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();

13
web/static/videoapp/index.html
View File

@@ -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>
<!-- 分类列表页 -->

21
web/static/videoapp/style.css
View File

@@ -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 {