feat: 正在下载 / 已完成卡片支持点击折叠
部署到群晖 / deploy (push) Successful in 58s

对齐历史频道的交互:card-hd 整行可点,箭头 ▾ 旋转,
折叠时 card-hd border-bottom 去掉避免多余分隔线。
已完成卡片的分页器 done-pager 跟 card-bd 联动隐藏。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
yuming
2026-04-25 00:02:54 +08:00
parent a697ce8852
commit eb454cbe73
+43 -2
View File
@@ -194,6 +194,10 @@
} }
.card-hd-badge { font-size: 11px; font-weight: 400; color: var(--muted); } .card-hd-badge { font-size: 11px; font-weight: 400; color: var(--muted); }
.card-bd { padding: 12px 14px; } .card-bd { padding: 12px 14px; }
/* 可折叠的 card-hd */
.card-hd.collapsible { cursor: pointer; user-select: none; }
.card-hd.collapsed { border-bottom: none; }
.card-hd-left { display: flex; align-items: center; gap: 6px; }
/* 任务队列总览 */ /* 任务队列总览 */
.task-banner { .task-banner {
@@ -1042,8 +1046,11 @@
<!-- 正在下载 --> <!-- 正在下载 -->
<div class="card"> <div class="card">
<div class="card-hd"> <div class="card-hd collapsible" id="dl-head" onclick="toggleDl()">
<div class="card-hd-left">
<span class="hist-arrow" id="dl-arrow"></span>
<span>正在下载</span> <span>正在下载</span>
</div>
<span class="card-hd-badge" id="dl-badge">0 个文件</span> <span class="card-hd-badge" id="dl-badge">0 个文件</span>
</div> </div>
<div class="card-bd" id="dl-list"> <div class="card-bd" id="dl-list">
@@ -1060,8 +1067,11 @@
<!-- 已完成 --> <!-- 已完成 -->
<div class="card"> <div class="card">
<div class="card-hd"> <div class="card-hd collapsible" id="done-head" onclick="toggleDone()">
<div class="card-hd-left">
<span class="hist-arrow" id="done-arrow"></span>
<span>已完成</span> <span>已完成</span>
</div>
<span class="card-hd-badge" id="done-badge">0 个文件</span> <span class="card-hd-badge" id="done-badge">0 个文件</span>
</div> </div>
<div class="card-bd" id="done-list"> <div class="card-bd" id="done-list">
@@ -1082,6 +1092,8 @@
let dlState = '{{ download_state }}'; let dlState = '{{ download_state }}';
let validatedChannel = null; let validatedChannel = null;
let histOpen = true; let histOpen = true;
let dlOpen = true;
let doneOpen = true;
let setupStatus = {}; let setupStatus = {};
let wizStep = 0; let wizStep = 0;
let donePage = 1; let donePage = 1;
@@ -1174,6 +1186,29 @@
document.getElementById('hist-arrow').className = 'hist-arrow' + (histOpen ? '' : ' closed'); document.getElementById('hist-arrow').className = 'hist-arrow' + (histOpen ? '' : ' closed');
} }
// ── 正在下载 / 已完成 折叠 ──
function toggleDl() {
dlOpen = !dlOpen;
document.getElementById('dl-list').style.display = dlOpen ? '' : 'none';
document.getElementById('dl-arrow').className = 'hist-arrow' + (dlOpen ? '' : ' closed');
document.getElementById('dl-head').classList.toggle('collapsed', !dlOpen);
}
function toggleDone() {
doneOpen = !doneOpen;
document.getElementById('done-list').style.display = doneOpen ? '' : 'none';
document.getElementById('done-arrow').className = 'hist-arrow' + (doneOpen ? '' : ' closed');
document.getElementById('done-head').classList.toggle('collapsed', !doneOpen);
// 分页器跟 done-list 联动,仅在展开且本来就显示时才恢复
const pager = document.getElementById('done-pager');
if (!doneOpen) {
pager.dataset.hiddenByToggle = pager.style.display !== 'none' ? '1' : '';
pager.style.display = 'none';
} else if (pager.dataset.hiddenByToggle === '1') {
pager.style.display = '';
pager.dataset.hiddenByToggle = '';
}
}
function loadHistory() { function loadHistory() {
fetch('/api/channel_history').then(r => r.json()).then(d => { fetch('/api/channel_history').then(r => r.json()).then(d => {
const list = document.getElementById('hist-list'); const list = document.getElementById('hist-list');
@@ -1649,7 +1684,13 @@
if (total_pages <= 1) { if (total_pages <= 1) {
pager.style.display = 'none'; pager.style.display = 'none';
} else { } else {
// 卡片被折叠时不显示分页器,但记下"原本该显示"的状态,展开后由 toggleDone 恢复
if (doneOpen) {
pager.style.display = 'flex'; pager.style.display = 'flex';
} else {
pager.style.display = 'none';
pager.dataset.hiddenByToggle = '1';
}
document.getElementById('done-pager-info').textContent = document.getElementById('done-pager-info').textContent =
`${page} / ${total_pages} 页,共 ${total}`; `${page} / ${total_pages} 页,共 ${total}`;
document.getElementById('pg-prev').disabled = page <= 1; document.getElementById('pg-prev').disabled = page <= 1;