24kycj
88c6ce8ccc
- 迁移为 frontend-web、frontend-electron、backend-web 与 docker 部署结构 - 网页端：订阅门禁二次弹窗、套餐/支付组件化、顶栏分组对齐 - 首页：最近文件与模板库布局优化，缩略图对齐，下载与删除操作 - 新增管理后台、支付与云端文件 API，更新 README 与项目规范 Co-authored-by: Cursor <cursoragent@cursor.com>
84 lines
3.7 KiB
JavaScript
84 lines
3.7 KiB
JavaScript
(function () {
|
||
'use strict';
|
||
|
||
var SIZE_OPTIONS = [10, 20, 50, 100];
|
||
|
||
function pagesCount(total, size) {
|
||
return Math.max(1, Math.ceil((total || 0) / (size || 20)));
|
||
}
|
||
|
||
function html(opts) {
|
||
opts = opts || {};
|
||
var page = opts.page || 1;
|
||
var size = opts.size || 20;
|
||
var total = opts.total || 0;
|
||
var pages = pagesCount(total, size);
|
||
var sizes = opts.sizeOptions || SIZE_OPTIONS;
|
||
if (total === 0) {
|
||
return '<div class="soon-admin-pager soon-admin-pager--empty"><span class="soon-admin-pager__info">共 0 条</span></div>';
|
||
}
|
||
var sizeOpts = sizes.map(function (n) {
|
||
return '<option value="' + n + '"' + (n === size ? ' selected' : '') + '>' + n + ' 条/页</option>';
|
||
}).join('');
|
||
return '<div class="soon-admin-pager" data-page="' + page + '" data-size="' + size + '" data-total="' + total + '">' +
|
||
'<div class="soon-admin-pager__left">' +
|
||
'<button type="button" class="soon-btn soon-btn--sm soon-btn--ghost soon-pager-first"' +
|
||
(page <= 1 ? ' disabled' : '') + ' title="首页">«</button>' +
|
||
'<button type="button" class="soon-btn soon-btn--sm soon-btn--ghost soon-pager-prev"' +
|
||
(page <= 1 ? ' disabled' : '') + ' title="上一页">‹</button>' +
|
||
'<span class="soon-admin-pager__info">第 <strong>' + page + '</strong> / ' + pages + ' 页，共 ' + total + ' 条</span>' +
|
||
'<button type="button" class="soon-btn soon-btn--sm soon-btn--ghost soon-pager-next"' +
|
||
(page >= pages ? ' disabled' : '') + ' title="下一页">›</button>' +
|
||
'<button type="button" class="soon-btn soon-btn--sm soon-btn--ghost soon-pager-last"' +
|
||
(page >= pages ? ' disabled' : '') + ' title="末页">»</button>' +
|
||
'</div>' +
|
||
'<div class="soon-admin-pager__right">' +
|
||
'<label class="soon-admin-pager__size-label">每页<select class="soon-input soon-input--sm soon-pager-size">' +
|
||
sizeOpts + '</select></label>' +
|
||
'<label class="soon-admin-pager__jump-label">跳至<input type="number" class="soon-input soon-input--sm soon-pager-jump" min="1" max="' +
|
||
pages + '" value="' + page + '">页<button type="button" class="soon-btn soon-btn--sm soon-btn--ghost soon-pager-go">GO</button></label>' +
|
||
'</div></div>';
|
||
}
|
||
|
||
function bind(container, state, onChange) {
|
||
if (!container) return;
|
||
var page = state.page || 1;
|
||
var size = state.size || 20;
|
||
var total = state.total || 0;
|
||
var pages = pagesCount(total, size);
|
||
|
||
function go(p) {
|
||
p = Math.max(1, Math.min(pages, p));
|
||
if (p !== page) onChange({ page: p });
|
||
}
|
||
|
||
var first = container.querySelector('.soon-pager-first');
|
||
var prev = container.querySelector('.soon-pager-prev');
|
||
var next = container.querySelector('.soon-pager-next');
|
||
var last = container.querySelector('.soon-pager-last');
|
||
var sizeSel = container.querySelector('.soon-pager-size');
|
||
var jump = container.querySelector('.soon-pager-jump');
|
||
var goBtn = container.querySelector('.soon-pager-go');
|
||
|
||
if (first && !first.disabled) first.onclick = function () { go(1); };
|
||
if (prev && !prev.disabled) prev.onclick = function () { go(page - 1); };
|
||
if (next && !next.disabled) next.onclick = function () { go(page + 1); };
|
||
if (last && !last.disabled) last.onclick = function () { go(pages); };
|
||
if (sizeSel) {
|
||
sizeSel.onchange = function () {
|
||
onChange({ page: 1, size: parseInt(sizeSel.value, 10) || size });
|
||
};
|
||
}
|
||
if (goBtn && jump) {
|
||
goBtn.onclick = function () {
|
||
go(parseInt(jump.value, 10) || page);
|
||
};
|
||
jump.onkeydown = function (e) {
|
||
if (e.key === 'Enter') go(parseInt(jump.value, 10) || page);
|
||
};
|
||
}
|
||
}
|
||
|
||
window.AdminPager = { html: html, bind: bind, pagesCount: pagesCount };
|
||
})();
|